v2.8.4
💢 Пример использования

biletiki.store — пример сайта для поиска авиабилетов и отелей с помощью vanilla-calendar.

Дополнительно

Действия

Действия в VanillaCalendar представляют собой обработчики событий, которые позволяют получать и обрабатывать различные данные взаимодействия с календарем.

Обратите внимание, что нумерация месяцев начинаются с 0, поэтому декабрь — это 11-й месяц. Это связано с работой стандартного метода .getMonth().

actions.clickDay()

Type: Function

Default: null

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

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

Этот метод срабатывает после нажатия на день в календаре. Вы можете получить следующие параметры:

  • e - событие мыши;
  • dates - массив выбранных дат.

Важно знать, что каждый HTML-элемент дня, на который нажали, содержит data-атрибут, внутри которого находится полная дата в формате YYYY-MM-DD. Если вам нужно получить день, месяц, год отдельно, то вы можете использовать стандартные методы JS. В качестве примера: new Date('2022-11-07').getDate() вернет 7.

actions.clickWeekNumber()

Type: Function

Default: null

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

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

Этот метод срабатывает после нажатия на номер недели в календаре, но для его работы необходим параметр settings.visibility.weekNumbers со значением true. Вы можете получить следующие параметры:

  • e - событие мыши;
  • number - номер недели;
  • days - массив дней (html-элементов);
  • year - год недели.

actions.clickMonth()

Type: Function

Default: null

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

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

Этот метод срабатывает после выбора месяца в календаре. Вы можете получить следующие параметры:

  • e - событие мыши;
  • month - номер выбранного месяца.

actions.clickYear()

Type: Function

Default: null

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

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

Этот метод срабатывает после выбора года в календаре. Вы можете получить следующие параметры:

  • e - событие мыши;
  • year - выбранный год.

actions.clickArrow()

Type: Function

Default: null

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

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

Этот метод срабатывает после клика на стрелочку в календаре. Вы можете получить следующие параметры:

  • e - событие мыши;
  • year - выбранный год;
  • month - номер выбранного месяца.

actions.changeTime()

Type: Function

Default: null

Options: changeTime(e, time, hours, minutes, keeping) => void | null

js
new VanillaCalendar('#calendar', {
  actions: {
    changeTime(e, time, hours, minutes, keeping) {},
  },
});
js
new VanillaCalendar('#calendar', {
  actions: {
    changeTime(e, time, hours, minutes, keeping) {},
  },
});

Этот метод срабатывает после изменения времени в календаре. Вы можете получить следующие параметры:

  • e - событие change;
  • time - выбранное время;
  • hours - выбранный час;
  • minutes - выбранные минуты;
  • keeping - выбранный маркер AM/PM для 12-часового формата времени.

actions.changeToInput()

Type: Function

Default: null

Options: changeToInput(e, calendar, dates, time, hours, minutes, keeping) => void | null

js
new VanillaCalendar('#calendar', {
  actions: {
    changeToInput(e, calendar, dates, time, hours, minutes, keeping) {},
  },
});
js
new VanillaCalendar('#calendar', {
  actions: {
    changeToInput(e, calendar, dates, time, hours, minutes, keeping) {},
  },
});

Для работы этого метода необходим параметр input с значением true. Этот метод срабатывает после нажатия на день в календаре или изменения времени любым способом. Вы можете получить следующие параметры:

  • e - событие;
  • calendar - объект, содержащий HTMLInputElement, HTMLElement и методы show(), hide();
  • dates - массив выбранных дат;
  • time - выбранное время;
  • hours - выбранный час;
  • minutes - выбранные минуты;
  • keeping - выбранный маркер AM/PM.

actions.getDays()

Type: Function

Default: null

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

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

Этот метод срабатывает при инициализации календаря и при любых изменениях. Он предоставляет доступ к информации о каждом дне и его HTML-элементе. Вы можете получить следующие параметры:

  • day - номер дня;
  • date - полная дата в формате YYYY-MM-DD;
  • HTMLElement - родительский (обертка) HTML-элемент дня;
  • HTMLButtonElement - дочерний (кнопка) HTML-элемент дня.

actions.hideCalendar()

Type: Function

Default: null

Options: hideCalendar(HTMLInputElement, HTMLElement) => void | null

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

Этот метод срабатывает при скрытии календаря, но только если для параметра input установлено значение true.

  • HTMLInputElement - представляет корневой элемент HTML, который является полем ввода;
  • HTMLElement - корневой HTML-элемент календаря.

actions.showCalendar()

Type: Function

Default: null

Options: showCalendar(HTMLInputElement, HTMLElement) => void | null

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

Этот метод срабатывает при отображении календаря пользователю, но только если для параметра input установлено значение true.

  • HTMLInputElement - представляет корневой элемент HTML, который является полем ввода;
  • HTMLElement - корневой HTML-элемент календаря.