v3.0.3
  • Sponsor

    • Actions

    onClickDate()

    Type: Function

    Default: null

    Options: onClickDate(self, event) => void | null

    ts
    new Calendar('#calendar', {
  onClickDate(self, event) {},
});

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

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

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

    onClickWeekDay()

    Type: Function

    Default: null

    Options: onClickWeekDay(self, day, dateEls, event) => void | null

    ts
    new Calendar('#calendar', {
  onClickWeekDay(self, day, dateEls, event) {},
});

    This method is triggered after clicking on a weekday in the calendar. You can get the following parameters:

    • self - reference to the initialized calendar;
    • day - week day;
    • dateEls - array of days (html elements);
    • event - mouse event.

    onClickWeekNumber()

    Type: Function

    Default: null

    Options: onClickWeekNumber(self, number, year, dateEls, event) => void | null

    ts
    new Calendar('#calendar', {
  onClickWeekNumber(self, number, year, dateEls, event) {},
});

    This method is triggered after clicking on a week number in the calendar, but for it to work, the enableWeekNumbers parameter must be set to true. You can get the following parameters:

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

    onClickTitle()

    Type: Function

    Default: null

    Options: onClickTitle(self, event) => void | null

    ts
    new Calendar('#calendar', {
  onClickTitle(self, event) {},
});

    This method is triggered after clicking on the month or year title in the calendar. You can get the following parameters:

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

    onClickMonth()

    Type: Function

    Default: null

    Options: onClickMonth(self, event) => void | null

    ts
    new Calendar('#calendar', {
  onClickMonth(self, event) {},
});

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

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

    onClickYear()

    Type: Function

    Default: null

    Options: onClickYear(self, event) => void | null

    ts
    new Calendar('#calendar', {
  onClickYear(self, event) {},
});

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

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

    onClickArrow()

    Type: Function

    Default: null

    Options: onClickArrow(self, event) => void | null

    ts
    new Calendar('#calendar', {
  onClickArrow(self, event) {},
});

    This method is triggered after clicking on an arrow in the calendar. You can get the following parameters:

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

    onChangeTime()

    Type: Function

    Default: null

    Options: onChangeTime(self, event, isError) => void | null

    ts
    new Calendar('#calendar', {
  onChangeTime(self, event) {},
});

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

    • self - reference to the initialized calendar;
    • event - change event;
    • isError - returns true if the user entered an incorrect time.

    onChangeToInput()

    Type: Function

    Default: null

    Options: onChangeToInput(self, event) => void | null

    ts
    new Calendar('#calendar', {
  onChangeToInput(self, event) {},
});

    For this method to work, the inputMode parameter must be set to true. This method is triggered after clicking on a day in the calendar or changing the time in any way. You can get the following parameters:

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

    onCreateDateRangeTooltip()

    Type: Function

    Default: null

    Options: onCreateDateRangeTooltip(self, dateEl, tooltipEl, dateElBCR, mainElBCR) => void | null

    ts
    new Calendar('#calendar', {
  onCreateDateRangeTooltip(self, dateEl, tooltipEl, dateElBCR, mainElBCR) {},
});

    Allows creating a tooltip for a date range. Triggers on clicking and hovering over a day if the selectionDatesMode parameter is set to 'multiple-ranged'. You can get the following parameters:

    • self - reference to the initialized calendar.
    • dateEl - HTML date element;
    • tooltipEl - HTML tooltip element;
    • dateElBCR - object with information about the position and size of the HTML date element;
    • mainElBCR - object with information about the position and size of the main HTML calendar element.

    onCreateDateEls()

    Type: Function

    Default: null

    Options: onCreateDateEls(self, dateEl) => void | null

    ts
    new Calendar('#calendar', {
  onCreateDateEls(self, dateEl) {},
});

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

    • self - reference to the initialized calendar;
    • dateEl - HTML date element.

    onCreateMonthEls()

    Type: Function

    Default: null

    Options: onCreateMonthEls(self, monthEl) => void | null

    ts
    new Calendar('#calendar', {
  onCreateMonthEls(self, monthEl) {},
});

    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 title or during initialization with the parameter type = 'month'. It provides access to information about each month. You can get the following parameters:

    • self - reference to the initialized calendar;
    • monthEl - HTML month element.

    onCreateYearEls()

    Type: Function

    Default: null

    Options: onCreateYearEls(self, yearEl) => void | null

    ts
    new Calendar('#calendar', {
  onCreateYearEls(self, yearEl) {},
});

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

    • self - reference to the initialized calendar;
    • yearEl - HTML year element.

    onInit()

    Type: Function

    Default: null

    Options: onInit(self) => void | null

    ts
    new Calendar('#calendar', {
  onInit(self) {},
});

    This method is triggered during calendar initialization. If the inputMode parameter is set to true, the method will execute on the first display of the calendar, as this is when the calendar is initialized.

    • self - reference to the initialized calendar.

    onUpdate()

    Type: Function

    Default: null

    Options: onUpdate(self) => void | null

    ts
    new Calendar('#calendar', {
  onUpdate(self) {},
});

    This method is triggered when the calendar is updated/reset using the .update() method.

    • self - reference to the initialized calendar.

    onDestroy()

    Type: Function

    Default: null

    Options: onDestroy(self) => void | null

    ts
    new Calendar('#calendar', {
  onDestroy(self) {},
});

    This method is triggered when the calendar is destroyed.

    • self - reference to the initialized calendar.

    onShow()

    Type: Function

    Default: null

    Options: onShow(self) => void | null

    ts
    new Calendar('#calendar', {
  onShow(self) {},
});

    This method is triggered when the calendar is displayed to the user, but only if the inputMode parameter is set to true.

    • self - reference to the initialized calendar.

    onHide()

    Type: Function

    Default: null

    Options: onHide(self) => void | null

    ts
    new Calendar('#calendar', {
  onHide(self) {},
});

    This method is triggered when the calendar is hidden, but only if the inputMode parameter is set to true.

    • self - reference to the initialized calendar.