biletiki.store — a website example for searching for flight tickets and hotels using vanilla-calendar.
Creating an Instance
new VanillaCalendar() creates an instance of VanillaCalendar, which encapsulates the calendar, its settings, and methods.
A simple function call (without using the new operator) will return a string, not a VanillaCalendar object.
If you've included VanillaCalendar using a <script> tag, the object is available as a global variable window.VanillaCalendar.
The VanillaCalendar instance takes two parameters. The first one is mandatory and can be either a CSS selector or an HTML element.
The CSS selector or HTML element can represent a container for the calendar, where the calendar will be initialized, or an «Input».
A calendar container is a <div> element inside which the calendar itself will be initialized.
Initialization within a calendar container:
<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);An «Input», in the context of this calendar, does not necessarily mean an <input> element; it can be any HTML element, such as a <div>.
Clicking on the «Input» will open a popup with the calendar.
Initialization within an «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,
});The second optional parameter is an object that defines the calendar's settings and methods.
new VanillaCalendar('#calendar', {
// Settings
});new VanillaCalendar('#calendar', {
// Settings
});