vanilla-calendar-pro
Advanced tools
The Vanilla Calendar Pro is a versatile JavaScript date and time picker component with TypeScript support, making it compatible with any JavaScript frameworks and libraries. It is designed to be lightweight, easy to use, and feature-rich, without relying
This is a versatile JavaScript date and time picker component with TypeScript support, compatible with any JavaScript frameworks and libraries. It is designed to be lightweight, easy to use, and feature-rich, without relying on external dependencies.
<input> tag.tabindex, and full keyboard navigation, enhancing accessibility.VanillaCalendar is compatible with a wide range of browsers:
 |  |  |  |  |
|---|---|---|---|---|
| 57+ ✔ | 52+ ✔ | 80+ ✔ | 44+ ✔ | 10.1+ ✔ |
Vanilla Calendar Pro is free to use for everyone, but maintaining it comes with costs. I personally cover expenses like hosting, domain, and development resources to keep the project running smoothly. Your donations help me continue improving the tool while keeping it accessible for the community. Any contribution, big or small, makes a difference!
If you’d like to support the project, please consider making a donation or giving it a 🌟 star on GitHub.
Feel free to report any issues or share your ideas—your feedback is invaluable!
You can install it using npm or yarn:
npm install vanilla-calendar-pro
# or
yarn add vanilla-calendar-pro
Here's a simple example of using it in your HTML:
<html>
<head>
</head>
<body>
<div id="calendar"></div>
<!-- or -->
<!-- <input type="text" id="calendar-input"> -->
</body>
</html>
To add the necessary styles and scripts, you can use the following code:
import { Calendar } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/styles/index.css';
// Initialize the calendar
const calendar = new Calendar('#calendar');
calendar.init();
// or
// const calendarWithInput = new Calendar('#calendar-input', { inputMode: true });
// calendarWithInput.init();
// Only layout calendar
import 'vanilla-calendar-pro/styles/layout.css';
// Themes
import 'vanilla-calendar-pro/styles/themes/light.css';
import 'vanilla-calendar-pro/styles/themes/dark.css';
// ...and others
The calendar can automatically switch between a light or dark theme depending on the user's system settings, or track a custom HTML attribute that specifies the desired theme.
index.css file contains all the styles from the layout.css file, as well as the light and dark theme styles.layout.css file contains the essential structural styles for the calendar.themes/light.min.css theme provides a light color scheme.themes/dark.min.css theme offers a dark color scheme.If you want to apply a specific theme, it is recommended to import layout.css along with your preferred theme instead of index.css.
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.
The calendar contains custom layouts for each calendar type, which allow you to change the calendar structure to suit your needs.
Each layout contains its own set of components that can be moved or removed from it if necessary. By default, a layout contains all the components available to it.
Components are identified by tags containing the # character, and they must contain a slash at the end of the tag.
Here is an example of the default layout:
new Calendar('#calendar', {
layouts: {
default: `
<div class="vc-header" data-vc="header" role="toolbar" aria-label="Calendar Navigation">
<#ArrowPrev [month] />
<div class="vc-header__content" data-vc-header="content">
<#Month />
<#Year />
</div>
<#ArrowNext [month] />
</div>
<div class="vc-wrapper" data-vc="wrapper">
<#WeekNumbers />
<div class="vc-content" data-vc="content">
<#Week />
<#Dates />
<#DateRangeTooltip />
</div>
</div>
<#ControlTime />
`
}
});
For detailed instructions on how to use the calendar as a component for various libraries, please visit the website with detailed documentation and examples.
For detailed information on the available parameters and settings, please refer to the API reference.
This project is tested with BrowserStack.
MIT License
Yury Uvarov (uvarov.frontend@gmail.com)
FAQs
The Vanilla Calendar Pro is a versatile JavaScript date and time picker component with TypeScript support, making it compatible with any JavaScript frameworks and libraries. It is designed to be lightweight, easy to use, and feature-rich, without relying
We found that vanilla-calendar-pro demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.