Copyright © 2023 MIT License. | Design and development by Yury Uvarov.
Main

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:

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» 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":

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

The second optional parameter is an object that defines the settings and methods of the calendar.

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