Creating an Instance

new Calendar() - creates an instance of Vanilla Calendar Pro, which is an encapsulation of the calendar, its settings, and methods.

The Calendar instance takes two parameters. The first required parameter can be a CSS selector or HTML element.

The CSS selector or HTML element can represent a wrapper for the calendar, in which the calendar will be initialized, or an «Input».

A calendar wrapper is a <div> tag inside which the calendar itself will be initialized.

Initialization in a calendar wrapper:

<div id="calendar"></div>

new Calendar('#calendar');
// or
const calendarEl = document.querySelector('#calendar');
new Calendar(calendarEl);

«Input» in the context of this calendar does not necessarily mean an <input> tag; it can be any HTML element, such as a <div>.

When clicking on the «Input», a popup with the calendar will appear.

Initialization in an «Input»:

<input type="text" id="input">
<!-- or -->
<div id="input"></div>

new Calendar('#input', { inputMode: true });
// or
const calendarInput = document.querySelector('#input');
new Calendar(calendarInput, {
  inputMode: true,
});

The second optional parameter is an object defining the settings and actions of the calendar.

new Calendar('#calendar', {
  // Settings
});

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();

Extensions are fixed at construction. Register modules you will enable later through set() or update(). Those methods still change the existing feature options; they cannot add or remove modules. Reusing the same options or extensions array is supported; each calendar has independent state. Enabling a feature without its extension throws a descriptive error at init(), set() or update(); inactive settings and callbacks do not require a module.

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.