biletiki.store — пример сайта для поиска авиабилетов и отелей с помощью vanilla-calendar.
Создание экземпляра
new VanillaCalendar() - создает экземпляр VanillaCalendar, представляющий собой инкапсуляцию календаря, его настройки и методы.
Простой вызов функции (без использования оператора new) вернет строку, а не объект VanillaCalendar.
Если вы подключили VanillaCalendar с помощью тега <script>, объект доступен как глобальная переменная window.VanillaCalendar.
Экземпляр VanillaCalendar, принимает два параметра. Первым обязательный параметр может быть CSS-селектором или HTML-элементом.
CSS-селектор или HTML-элемент может представлять собой оболочку для календаря, в которой будет произведена инициализация календаря, или «Input».
Оболочка для календаря - это тег <div>, внутри которого будет инициализирован сам календарь.
Инициализация в оболочке календаря:
<div id="calendar"></div><div id="calendar"></div>new VanillaCalendar('#calendar');
// or
const calendarEl = document.querySelector('#calendar');
new VanillaCalendar(calendarEl);new VanillaCalendar('#calendar');
// or
const calendarEl = document.querySelector('#calendar');
new VanillaCalendar(calendarEl);«Input» в контексте этого календаря не обязательно означает тег <input>, это может быть любой HTML-элемент, например, <div>.
При клике на «Input» появится всплывающее окно с календарем.
Инициализация в «Input»:
<input type="text" id="input">
<!-- or -->
<div id="input"></div><input type="text" id="input">
<!-- or -->
<div id="input"></div>new VanillaCalendar('#input', { input: true });
// or
const calendarInput = document.querySelector('#input');
new VanillaCalendar(calendarInput, {
input: true,
});new VanillaCalendar('#input', { input: true });
// or
const calendarInput = document.querySelector('#input');
new VanillaCalendar(calendarInput, {
input: true,
});Второй необязательный параметр — это объект, определяющий настройки и методы календаря.
new VanillaCalendar('#calendar', {
// Settings
});new VanillaCalendar('#calendar', {
// Settings
});