![\"Vanilla](\"https://raw.githubusercontent.com/uvarov-frontend/vanilla-calendar-pro/main/.github/assets/preview-dark.png\")
\n \n \n \n
\n A flexible JavaScript date and time picker.
\n Zero dependencies. TypeScript support. At home in any framework.\n
\n ![\"npm](\"https://img.shields.io/npm/v/vanilla-calendar-pro?color=0891b2&labelColor=161b22\")
![\"Tests\"](\"https://github.com/uvarov-frontend/vanilla-calendar-pro/actions/workflows/ci.yml/badge.svg?branch=main\"){kind=icon}
\n ![\"Monthly](\"https://img.shields.io/npm/dm/vanilla-calendar-pro?color=0891b2&labelColor=161b22\")
\n Documentation & examples ·\n API reference ·\n Releases\n
\n\n## A calendar that fits your product\n\nFrom a simple date field to a booking flow, Vanilla Calendar Pro gives you control over what users can pick and how it looks.\n\n- **Zero dependencies.** Use it with plain JavaScript or your favorite framework. TypeScript definitions are included.\n- **Small by choice.** Import only the features and CSS you need; unused extensions stay out of your application bundle.\n- **Fast interactions.** Responsive navigation and selection, with efficient handling of large date lists and ranges.\n- **Flexible date selection.** Pick one date, several dates or a continuous range. Set initial selections and react to changes.\n- **The view you need.** Show a month, several months side by side or a compact week. Jump straight to a month or year.\n- **Time, too.** Add a 12- or 24-hour time picker, with configurable limits, steps and controls.\n- **Your availability rules.** Limit dates, disable weekdays, block individual dates or ranges, or enable only specific days.\n- **Any language and locale.** Localize labels, choose the first day of the week and define your own weekends and holidays.\n- **Week numbers.** Display week numbers and respond to clicks on a week or weekday.\n- **Light, dark or your own.** Follow the system theme, match your app's theme switcher or bring a custom theme.\n- **Your design.** Customize colors with CSS variables, replace classes and rearrange the calendar's HTML layout.\n- **Touch and motion.** Swipe between months, animate navigation and collapse to a week, with reduced-motion preferences respected.\n- **Accessible interaction.** Keyboard navigation, screen-reader labels and managed focus come built in.\n- **Inline or in an input.** Embed a calendar in the page or open it beside a field. Shadow DOM is supported for Web Components.\n- **Independent instances.** Put several calendars on one page, each with its own settings and selection.\n- **Context for every date.** Add date popups, range annotations and selection tooltips for events, availability or other details.\n\n[Explore the interactive examples →](https://vanilla-calendar.pro/docs/learn)\n\n## Get started\n\n```sh\nnpm install vanilla-calendar-pro\n# or: pnpm add vanilla-calendar-pro\n```\n\n```html\n\n```\n\n```js\nimport { Calendar } from 'vanilla-calendar-pro';\nimport 'vanilla-calendar-pro/styles/core.css';\n\nnew Calendar('#calendar', {\n selectionDatesMode: 'multiple-ranged',\n}).init();\n```\n\nTo open the calendar from an input, use the same imports with `inputMode: true`:\n\n```html\n\n```\n\n```js\nnew Calendar('#calendar-input', { inputMode: true }).init();\n```\n\n### Add the features you need\n\nFor example, add a time picker and swipe navigation to the same calendar:\n\n```js\nimport { Calendar, motion, time } from 'vanilla-calendar-pro';\nimport 'vanilla-calendar-pro/styles/core.css';\nimport 'vanilla-calendar-pro/styles/motion.css';\nimport 'vanilla-calendar-pro/styles/time.css';\n\nnew Calendar('#calendar', {\n extensions: [motion, time],\n animation: true,\n enableSwipe: true,\n selectionTimeMode: 24,\n}).init();\n```\n\nAlso available: **`annotations`** for date popups and range tooltips, **`weeks`** for week features, and **`months`** for multiple-month calendars. [See all extensions →](https://vanilla-calendar.pro/docs/learn/installation-and-usage#extensions)\n\n**Upgrading?** Existing options stay the same; ESM applications now need to import and register the extensions they use. Existing full CSS imports still work. [Migration details →](https://vanilla-calendar.pro/docs/reference/settings#extensions)\n\nPrefer a script tag? [Use the CDN or download the complete package →](https://vanilla-calendar.pro/docs/learn/installation-and-usage#local-or-cdn)\n\n## Make it look like your app\n\nUse the built-in light and dark themes, let the calendar follow your app's theme, or create your own with CSS variables and custom layouts.\n\n- **A simple start:** `styles/core.css` includes the core layout and both light/dark themes.\n- **Just the features you use:** add matching styles such as `styles/time.css` or `styles/weeks.css`.\n- **Complete styling:** `styles/index.css` includes every feature and both themes.\n- **Full control:** import layout and theme parts separately to keep only your chosen theme.\n\n[Themes and customization →](https://vanilla-calendar.pro/docs/learn/additional-features-themes) · [Styles reference →](https://vanilla-calendar.pro/docs/reference/styles)\n\n## Browser support\n\nChrome 57+ · Firefox 52+ · Edge 80+ · Opera 44+ · Safari 10.1+. Date handling is tested across timezones and daylight-saving changes.\n\n## Support the project\n\nThis project is tested with BrowserStack.\n\nFree and open source. If Vanilla Calendar Pro saves you time, a star or a coffee helps keep it growing.\n\n![\"Buy](\"https://raw.githubusercontent.com/uvarov-frontend/vanilla-calendar-pro/main/.github/assets/buy-me-a-coffee.svg\")
\n\nFound a bug or have an idea? [Open an issue](https://github.com/uvarov-frontend/vanilla-calendar-pro/issues).\n\n---\n\n[MIT License](https://github.com/uvarov-frontend/vanilla-calendar-pro/blob/main/LICENSE) · Made by [Yury Uvarov](https://github.com/uvarov-frontend).\n","readmeFilename":"README.md"}