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