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

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

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

Действия

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

Начиная с версии 2.9.0 все методы содержат self — ссылку на инициализированный календарь. Это позволяет получить максимальное количество данных. self содержит все параметры для чтения и многое другое.

Обратите внимание, что нумерация месяцев начинаются с 0, поэтому декабрь — это 11-й месяц. Это связано с работой стандартного метода .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) {},
  },
});

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

  • e - событие мыши;
  • self - ссылка на инициализированный календарь.

Важно знать, что каждый 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, 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) {},
  },
});

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

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

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

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

  • e - событие мыши;
  • self - ссылка на инициализированный календарь.

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

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

  • e - событие мыши;
  • self - ссылка на инициализированный календарь.

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

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

  • e - событие мыши;
  • self - ссылка на инициализированный календарь.

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

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

  • e - событие change;
  • self - ссылка на инициализированный календарь.

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

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

  • e - событие;
  • self - ссылка на инициализированный календарь.

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

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

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

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

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

  • month - номер месяца (начинается с 0);
  • HTMLElement - HTML-элемент месяца;
  • self - ссылка на инициализированный календарь.

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

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

  • year - номер года;
  • HTMLElement - HTML-элемент года;
  • self - ссылка на инициализированный календарь.

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

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

  • self - ссылка на инициализированный календарь.

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

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

  • self - ссылка на инициализированный календарь.

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

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

  • self - ссылка на инициализированный календарь.

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

Этот метод срабатывает при обновлении/сбросе календаря.

  • self - ссылка на инициализированный календарь.

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

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

  • self - ссылка на инициализированный календарь.