v2.9.10
Copyright © 2023 MIT License. | Design and development by Yury Uvarov.
💢 Usage example

biletiki.store — a website example for searching for flight tickets and hotels using vanilla-calendar.

Additionally

Actions

Actions in VanillaCalendar are event handlers that allow you to receive and process various interaction data with the calendar.

Starting from version 2.9.0, all methods contain self - a link to the initialized calendar. This allows you to obtain the maximum amount of data. self contains all the read-only parameters and more.

Note that month numbering starts from 0, so December is the 11th month. This is related to the behavior of the standard JavaScript method .getMonth().

actions.clickDay()

Type: Function

Default: null

Options: clickDay(e, self) => void | null

js
new VanillaCalendar('#calendar', {
  actions: {
    clickDay(e, self) {},
  },
});
js
new VanillaCalendar('#calendar', {
  actions: {
    clickDay(e, self) {},
  },
});

This method triggers after clicking on a day in the calendar. You can get the following parameters:

  • e - the mouse event;
  • self - reference to the initialized calendar.

It's important to know that each HTML element of the day you clicked on contains a data attribute that holds the full date in the YYYY-MM-DD format. If you need to get the day, month, and year separately, you can use standard JavaScript methods. For example, new Date('2022-11-07').getDate() will return 7.

actions.clickWeekNumber()

Type: Function

Default: null

Options: clickWeekNumber(e, number, days, year, self) => void | null

js
new VanillaCalendar('#calendar', {
  actions: {
    clickWeekNumber(e, number, days, year, self) {},
  },
});
js
new VanillaCalendar('#calendar', {
  actions: {
    clickWeekNumber(e, number, days, year, self) {},
  },
});

This method triggers after clicking on the week number in the calendar, but it requires the settings.visibility.weekNumbers parameter to be set to true. You can get the following parameters:

  • e - the mouse event;
  • number - the week number;
  • days - an array of days (HTML elements);
  • year - the year of the week.
  • self - reference to the initialized calendar.

actions.clickMonth()

Type: Function

Default: null

Options: clickMonth(e, self) => void | null

js
new VanillaCalendar('#calendar', {
  actions: {
    clickMonth(e, self) {},
  },
});
js
new VanillaCalendar('#calendar', {
  actions: {
    clickMonth(e, self) {},
  },
});

This method triggers after selecting a month in the calendar. You can get the following parameters:

  • e - the mouse event;
  • self - reference to the initialized calendar.

actions.clickYear()

Type: Function

Default: null

Options: clickYear(e, self) => void | null

js
new VanillaCalendar('#calendar', {
  actions: {
    clickYear(e, self) {},
  },
});
js
new VanillaCalendar('#calendar', {
  actions: {
    clickYear(e, self) {},
  },
});

This method triggers after selecting a year in the calendar. You can get the following parameters:

  • e - the mouse event;
  • self - reference to the initialized calendar.

actions.clickArrow()

Type: Function

Default: null

Options: clickArrow(e, self) => void | null

js
new VanillaCalendar('#calendar', {
  actions: {
    clickArrow(e, self) {},
  },
});
js
new VanillaCalendar('#calendar', {
  actions: {
    clickArrow(e, self) {},
  },
});

This method triggers after clicking the arrow in the calendar. You can get the following parameters:

  • e - the mouse event;
  • self - reference to the initialized calendar.

actions.changeTime()

Type: Function

Default: null

Options: changeTime(e, self) => void | null

js
new VanillaCalendar('#calendar', {
  actions: {
    changeTime(e, self) {},
  },
});
js
new VanillaCalendar('#calendar', {
  actions: {
    changeTime(e, self) {},
  },
});

This method triggers after changing the time in the calendar. You can get the following parameters:

  • e - the change event;
  • self - reference to the initialized calendar.

actions.changeToInput()

Type: Function

Default: null

Options: changeToInput(e, self) => void | null

js
new VanillaCalendar('#calendar', {
  actions: {
    changeToInput(e, self) {},
  },
});
js
new VanillaCalendar('#calendar', {
  actions: {
    changeToInput(e, self) {},
  },
});

To use this method, you need the input parameter set to true. This method triggers after clicking on a day in the calendar or changing the time in any way. You can get the following parameters:

  • e - the event;
  • self - reference to the initialized calendar.

actions.getDays()

Type: Function

Default: null

Options: getDays(day, date, HTMLElement, HTMLButtonElement, self) => void | null

js
new VanillaCalendar('#calendar', {
  actions: {
    getDays(day, date, HTMLElement, HTMLButtonElement, self) {},
  },
});
js
new VanillaCalendar('#calendar', {
  actions: {
    getDays(day, date, HTMLElement, HTMLButtonElement, self) {},
  },
});

This method triggers during the calendar initialization and any changes. It provides access to information about each day and its HTML element. You can get the following parameters:

  • day - the day number;
  • date - the full date in the YYYY-MM-DD format;
  • HTMLElement - the parent (wrapper) HTML element of the day;
  • HTMLButtonElement - the child (button) HTML element of the day.
  • self - reference to the initialized calendar.

actions.getMonths()

Type: Function

Default: null

Options: getMonths(month: number, HTMLElement: HTMLElement, self: IVanillaCalendar) => void | null

js
new VanillaCalendar('#calendar', {
  actions: {
    getMonths(month, HTMLElement, self) {},
  },
});
js
new VanillaCalendar('#calendar', {
  actions: {
    getMonths(month, HTMLElement, self) {},
  },
});

This method is triggered when the calendar type is set to 'month'. The calendar type also becomes 'month' when the user clicks on the month header or during initialization with the type = 'month' parameter. It provides access to information about each month and its HTML element. You can retrieve the following parameters:

  • month - month number (starts at 0);
  • HTMLElement - HTML element of the month;
  • self - reference to the initialized calendar.

actions.getYears()

Type: Function

Default: null

Options: getYears(year: number, HTMLElement: HTMLElement, self: IVanillaCalendar) => void | null

js
new VanillaCalendar('#calendar', {
  actions: {
    getYears(year, HTMLElement, self) {},
  },
});
js
new VanillaCalendar('#calendar', {
  actions: {
    getYears(year, HTMLElement, self) {},
  },
});

This method is triggered when the calendar type is set to 'year'. The calendar type becomes 'year' when the user clicks on the year header or during initialization with the type = 'year' parameter. It provides access to information about each year and its HTML element. You can retrieve the following parameters:

  • year - year number;
  • HTMLElement - HTML element of the year;
  • self - reference to the initialized calendar.

actions.hideCalendar()

Type: Function

Default: null

Options: hideCalendar(self) => void | null

js
new VanillaCalendar('#calendar', {
  actions: {
    hideCalendar(self) {},
  },
});
js
new VanillaCalendar('#calendar', {
  actions: {
    hideCalendar(self) {},
  },
});

This method triggers when the calendar is hiding, but only if the input parameter is set to true.

  • self - reference to the initialized calendar.

actions.showCalendar()

Type: Function

Default: null

Options: showCalendar(self) => void | null

js
new VanillaCalendar('#calendar', {
  actions: {
    showCalendar(self) {},
  },
});
js
new VanillaCalendar('#calendar', {
  actions: {
    showCalendar(self) {},
  },
});

This method triggers when displaying the calendar to the user, but only if the input parameter is set to true.

  • self - reference to the initialized calendar.

actions.initCalendar()

Type: Function

Default: null

Options: initCalendar(self) => void | null

js
new VanillaCalendar('#calendar', {
  actions: {
    initCalendar(self) {},
  },
});
js
new VanillaCalendar('#calendar', {
  actions: {
    initCalendar(self) {},
  },
});

This method is triggered during the initialization of the calendar. If the value true is set for the input parameter, the method will execute upon the first display of the calendar, as the calendar is initialized at that moment.

  • self - reference to the initialized calendar.

actions.updateCalendar()

Type: Function

Default: null

Options: updateCalendar(self) => void | null

js
new VanillaCalendar('#calendar', {
  actions: {
    updateCalendar(self) {},
  },
});
js
new VanillaCalendar('#calendar', {
  actions: {
    updateCalendar(self) {},
  },
});

This method is triggered when the calendar is updated/reset.

  • self - reference to the initialized calendar.

actions.destroyCalendar()

Type: Function

Default: null

Options: destroyCalendar(self) => void | null

js
new VanillaCalendar('#calendar', {
  actions: {
    destroyCalendar(self) {},
  },
});
js
new VanillaCalendar('#calendar', {
  actions: {
    destroyCalendar(self) {},
  },
});

This method is triggered upon destruction of the calendar.

  • self - reference to the initialized calendar.