Создание экземпляра

new Calendar() - создает экземпляр Vanilla Calendar Pro, представляющий собой инкапсуляцию календаря, его настройки и методы.

Экземпляр Calendar, принимает два параметра. Первым обязательный параметр может быть CSS-селектором или HTML-элементом.

CSS-селектор или HTML-элемент может представлять собой оболочку для календаря, в которой будет произведена инициализация календаря, или «Input».

Оболочка для календаря - это тег <div>, внутри которого будет инициализирован сам календарь.

Инициализация в оболочке календаря:

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

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

«Input» в контексте этого календаря не обязательно означает тег <input>, это может быть любой HTML-элемент, например, <div>.

При клике на «Input» появится всплывающее окно с календарем.

Инициализация в «Input»:

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

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

Второй необязательный параметр — это объект, определяющий настройки и действия календаря.

new Calendar('#calendar', {
  // Настройки
});

extensions

motion предоставляет анимации и жесты. time отвечает за выбор времени в формате 12/24 часа. annotations добавляет попапы, модификаторы дат и тултип диапазона. weeks предоставляет недельный вид, сворачивание, номера недель и обработчики кликов по дням и номерам недель. months отображает несколько месяцев и управляет их навигацией. Сборщик ESM может удалить расширения, которые вы не импортируете и не подключаете.

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

Состав расширений задаётся при создании экземпляра. Заранее зарегистрируйте модули, которые будете включать через set() или update(). Эти методы по-прежнему меняют существующие опции, но не добавляют и не удаляют модули. Один объект настроек или массив расширений можно использовать для нескольких календарей: состояние каждого экземпляра независимо. Включение функции без модуля вызывает понятную ошибку в init(), set() или update(); неактивные настройки и обработчики модуля не требуют.

Календарь в инпуте, выбор дат и диапазонов, выбор месяца и года остаются в ядре. Обычные заголовки дней недели не требуют расширения. Полная сборка для обычного <script> / CommonJS автоматически включает все пять расширений. Импорты CSS не меняются.