Create instance
new VanillaCalendar() - creates an instance of VanillaCalendar, which is the calendar itself, its parameters and methods.
The calendar can only be created by calling the VanillaCalendar function as a constructor. A normal function call (that is, without using the new operator) will return a string instead of a VanillaCalendar object.
If you loaded VanillaCalendar from a <script> tag, the object is available in the global variable window.VanillaCalendar.
The VanillaCalendar instance takes two parameters. The first required parameter can be a CSS selector or HTML element.
The CSS selector or HTML element can either be a calendar wrapper that will initialize the calendar or an «Input».
The calendar wrapper is a <div> tag that initializes the calendar itself.
Initialize into a calendar wrapper:
<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» in the context of this calendar is not necessarily an <input> tag, it can be any tag, such as <div>.
When you click on «Input», a pop-up with a calendar will appear.
Initialize in "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 settings and methods of the calendar.
new VanillaCalendar('#calendar', {
// Settings
});new VanillaCalendar('#calendar', {
// Settings
});