v2.9.6
💢 Пример использования

biletiki.store — пример сайта для поиска авиабилетов и отелей с помощью vanilla-calendar.

Основное

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

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

Простой вызов функции (без использования оператора new) вернет строку, а не объект VanillaCalendar.

Если вы подключили VanillaCalendar с помощью тега <script>, объект доступен как глобальная переменная window.VanillaCalendar.

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

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

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

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

html
<div id="calendar"></div>
html
<div id="calendar"></div>
js
new VanillaCalendar('#calendar');
// or
const calendarEl = document.querySelector('#calendar');
new VanillaCalendar(calendarEl);
js
new VanillaCalendar('#calendar');
// or
const calendarEl = document.querySelector('#calendar');
new VanillaCalendar(calendarEl);

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

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

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

html
<input type="text" id="input">
<!-- or -->
<div id="input"></div>
html
<input type="text" id="input">
<!-- or -->
<div id="input"></div>
js
new VanillaCalendar('#input', { input: true });
// or
const calendarInput = document.querySelector('#input');
new VanillaCalendar(calendarInput, {
  input: true,
});
js
new VanillaCalendar('#input', { input: true });
// or
const calendarInput = document.querySelector('#input');
new VanillaCalendar(calendarInput, {
  input: true,
});

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

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