Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ghiscoding/vanilla-calendar-picker
Vanilla Calendar is a versatile JavaScript date and time picker with TypeScript support, making it compatible with any JavaScript framework or library. It is designed to be lightweight, simple to use, and feature-rich without relying on external dependencies.
https://github.com/ghiscoding/vanilla-calendar-picker
calendar date datepicker javascript native typescript vanilla
Last synced: 16 days ago
JSON representation
Vanilla Calendar is a versatile JavaScript date and time picker with TypeScript support, making it compatible with any JavaScript framework or library. It is designed to be lightweight, simple to use, and feature-rich without relying on external dependencies.
- Host: GitHub
- URL: https://github.com/ghiscoding/vanilla-calendar-picker
- Owner: ghiscoding
- License: mit
- Created: 2024-04-20T19:51:45.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-05-08T17:28:12.000Z (6 months ago)
- Last Synced: 2024-05-09T05:33:50.426Z (6 months ago)
- Topics: calendar, date, datepicker, javascript, native, typescript, vanilla
- Language: TypeScript
- Homepage: https://vanilla-calendar.pro/
- Size: 328 KB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# VanillaCalendar - A Lightweight, Feature-Rich JavaScript Date and Time Picker
> [!WARNING]
> ## Forked from [Vanilla-Calendar-Pro](https://github.com/uvarov-frontend/vanilla-calendar-pro)
>
> This was a fork of the [Vanilla-Calendar-Pro](https://github.com/uvarov-frontend/vanilla-calendar-pro) project but **is no longer supported** since all my PRs (about a dozen of them) for features and fixes were all merged.
---
[](https://vanilla-calendar.pro/)
[](https://npmjs.com/package/vanilla-calendar-pro)
[](https://github.com/uvarov-frontend/vanilla-calendar/actions/workflows/pull_request.yml)
[](https://npmjs.com/package/vanilla-calendar-pro)
VanillaCalendar is a versatile JavaScript date and time picker with TypeScript support, making it compatible with any JavaScript framework or library. It is designed to be lightweight, simple to use, and feature-rich without relying on external dependencies.
## Key Features
- **Lightweight**: The final minified .js file is only approximately **37.3 KB**, and with gzip compression, it's just around **9.9 KB**.
- **No Dependencies**: VanillaCalendar is entirely self-contained, ensuring you don't need to include additional libraries.
- **Simple Localization**: Supports simple localization for any language.
- **Customizable**: Can be easily configured using CSS and HTML markup.
- **Multiple Instances**: Allows for an unlimited number of calendar instances on a single page.
- **Theme Support**: Includes two themes - the light theme and the dark theme.
- **Week Start Customization**: Supports both Sunday and Monday as the beginning of the week.
- **Week Number Display**: Can display week numbers throughout the year.
- **Not Tied to Input Tags**: Unlike many date pickers, it's not limited to the `` tag.
## Browser Support
VanillaCalendar is compatible with a wide range of browsers:
 |  |  |  | 
--- | --- | --- | --- | --- |
57+ ✔ | 52+ ✔ | 80+ ✔ | 44+ ✔ | 10.1+ ✔ |
## Support and Feedback
This plugin is completely free, and your support is important. Please feel free to report any issues or share your new ideas; it's really important!
If you like VanillaCalendar, please consider giving it a 🌟 star on GitHub.
## Getting Started
### Installation
You can install VanillaCalendar using npm or yarn:
```sh
npm install vanilla-calendar-picker
# or
yarn add vanilla-calendar-picker
```
If you prefer not to use a package manager, you can also include it via [CDN](https://cdn.jsdelivr.net/npm/vanilla-calendar-picker/build/) or [download](https://vanilla-calendar.pro/vanilla-calendar.zip) it from the website.
### Usage
Here's a simple example of how to use VanillaCalendar in your HTML:
```html
```
To add the necessary styles and scripts, you can use the following code:
```js
import { VanillaCalendar } from 'vanilla-calendar-picker';
import 'vanilla-calendar-picker/build/vanilla-calendar.min.css';
// Initialize the calendar
const calendar = new VanillaCalendar('#calendar');
calendar.init();
// or
// const calendarWithInput = new VanillaCalendar('#calendar-input', { input: true });
// calendarWithInput.init();
```
If you're not using a package manager and prefer manual installation or CDN usage, you can include the necessary files in your HTML document's ``:
```html
document.addEventListener('DOMContentLoaded', () => {
const calendar = new VanillaCalendar('#calendar');
calendar.init();
});
```
## CSS Themes
```js
// Only layout calendar
import 'vanilla-calendar-picker/build/vanilla-calendar.layout.min.css';
// Themes
import 'vanilla-calendar-picker/build/themes/light.min.css';
import 'vanilla-calendar-picker/build/themes/dark.min.css';
```
VanillaCalendar includes two CSS themes: the **light theme** and the **dark theme**.
- The **vanilla-calendar.min.css** file contains all styles with all themes.
- The **vanilla-calendar.layout.min.css** file contains the essential structural styles for the calendar.
- The **themes/light.min.css** theme provides a light color scheme.
- The **themes/dark.min.css** theme offers a dark color scheme.
The calendar will automatically display the theme according to the user's system preferences. If you want to apply a specific theme, it is recommended to import **«vanilla-calendar.layout.min.css»** along with the theme you prefer: **«light.min.css»** or **«dark.min.css»**, instead of **«vanilla-calendar.min.css»**.
## DOM Templates
VanillaCalendar features customizable DOM templates that allow you to modify the structure of the calendar to fit your needs. The templates are identified by tags containing the **#** character, and they should include a trailing slash at the end.
Here's an example of the default template:
```js
new VanillaCalendar('#calendar', {
DOMTemplates: {
default: `
<#ArrowPrev />
<#Month />
<#Year />
<#ArrowNext />
<#WeekNumbers />
<#Week />
<#Days />
<#ControlTime />
`
}
});
```
## React Component
For detailed instructions on using VanillaCalendar in a React component with TypeScript, please visit the [website](https://vanilla-calendar.pro/docs/learn/additional-features/react-component) for comprehensive documentation and examples.
## API Reference
For detailed information on the available parameters and settings, please refer to the [API reference](https://vanilla-calendar.pro/docs/reference/main/create-an-instance).
## Sponsor
This project is tested with BrowserStack.
## License
MIT License
## Author
Yury Uvarov (*[email protected]*)