Installation and Usage
Vanilla Calendar Pro is easily integrated into any project. There are several installation methods, depending on how you prefer to manage dependencies and build your project.
Installation via Package Manager
The most common way to install Vanilla Calendar Pro is by using a package manager. This method is ideal for projects using Node.js and modern build tools.
- Install the package:
npm install vanilla-calendar-pro
# or
yarn add vanilla-calendar-pro
# or
pnpm add vanilla-calendar-pro- Create an HTML element in the body of your document with an arbitrary CSS selector:
<html>
<head>
</head>
<body>
<div id="calendar"></div>
</body>
</html>#calendar as the CSS selector, but you can create and use any other selector.- Import the script, create a calendar instance, and initialize it in your JavaScript or TypeScript file.
import { Calendar } from 'vanilla-calendar-pro';
const calendar = new Calendar('#calendar', {
// Your settings
});
calendar.init();- Import the styles in the same file. The
index.cssfile contains the layout grid for the calendar, as well as light and dark themes.
import 'vanilla-calendar-pro/styles/index.css';You also have the option to include the layout and theme styles separately, like this:
import 'vanilla-calendar-pro/styles/layout.css'; // Only the skeleton
import 'vanilla-calendar-pro/styles/themes/light.css'; // Light theme
import 'vanilla-calendar-pro/styles/themes/dark.css'; // Dark theme
// or any other custom theme...- Full example of simple initialization without any custom settings:
Local or CDN
If you need to quickly integrate Vanilla Calendar Pro without using build tools or package managers, you can include it via CDN or download the archive with the latest version and include it locally.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/styles/index.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vanilla-calendar-pro/index.js" defer></script>
</head>
<body style="display: flex; align-items: start">
<div id="calendar"></div>
<script>
document.addEventListener('DOMContentLoaded', () => {
// Destructure the Calendar constructor
const { Calendar } = window.VanillaCalendarPro;
// Create a calendar instance and initialize it.
const calendar = new Calendar('#calendar');
calendar.init();
});
</script>
</body>
</html>extensions
motion provides animations and gestures. time provides the 12/24-hour time editor. annotations provides date popup content, modifiers and range tooltips. weeks provides the weekly view, collapse, week numbers and weekday/week-number callbacks. months displays and navigates several months together. ESM bundlers can remove extensions that you do not import and register.
import { Calendar, motion, time, annotations } from 'vanilla-calendar-pro';
import 'vanilla-calendar-pro/styles/index.css';
const calendar = new Calendar('#calendar', {
extensions: [motion, time, annotations],
animation: true,
selectionTimeMode: 24,
popups: { '2026-09-21': { html: 'Event' } },
});
calendar.init();Input calendars, date/range selection and month/year pickers remain in the core. Weekday headings do not require an extension. The full classic <script> / CommonJS distribution includes all five extensions automatically. CSS imports stay the same.
Modular CSS
Existing styles/index.css, styles/layout.css and styles/themes/*.css imports remain complete and compatible. To reduce CSS, choose the parts you use. JavaScript extension registration does not load CSS automatically.
Optional CSS parts are documented in the styles reference. Existing full stylesheet imports remain supported; examples use only the required parts.