Custom CSS classes added to calendar items for avoiding styling conflicts.
Optional
constraints?: ConstraintsPrevent the user from navigating the calendar outside a certain date range (e.g. when
configuring a date picker) by specifying either the start, end, or both. It's possible to
change these dynamically after initialization, per the Clndr
instance's API functions.
If supplying an events array, dateParameter
configures which key(s) to look for dates in the
events provided per the events
option. Only parts of this object may be provided, in case of
exclusively configuring single-day or multi-day events only.
Optional
daysAn array of day abbreviation labels used in the calendar header. If providing a date-fns locale
per the locale
option, the days of the week will be guessed.
The view that should be rendered initially; Only relevant when configuring multiple views to allow switching between views.
An array of calendar event objects.
Optional
extras?: unknownAny other data variables you want access to in your template. Use this option if you would like to pass in date-fns functions to your template.
Optional
formatCallback function that formats the day in the header. Default is as specified in the example
using date-fns' format
. The function is passed a Date
object representing the day, as well
as a date-fns locale, if provided per the locale
option.
Optional
locale: LocaleWhether inactive
dates (dates considered outside the boundaries defined by the constraints
option) should be selectable, if the trackSelectedDate
option is activated.
Optional
locale?: LocaleA date-fns locale to use when formatting date strings (the month name passed to the template, the day abbreviations in the calendar header).
Handlers for interaction events. this
is set to the calendar instance in all callbacks.
Customization of the calendar's pagination. That is, if the calendar should, for example, render more than one month, or a certain amount of days at once. Pagination may be configured individual to each view when using multiple views.
Optional
render?: neverOptional
selectedA date that should be selected (that is its element is supposed to receive the
classes.selected
class) at the time the calendar is initialized.
Whether to show the items of pages adjacent to the current page. Currently, only relevant for
the month
view where it allows rendering days of months adjacent to the current month for
achieving a fully populated grid of days.
Optional
startDetermines the point in time that should be within the view rendered initially. The value may
be either a Date
object, a string or number to be passed to the Date
constructor. If not
provided, today's date is used.
The target classnames that the calendar will look for to bind events. The defaults are as per the example.
{
item: 'item',
empty: 'empty',
nextButton: 'clndr-next-button',
todayButton: 'clndr-today-button',
previousButton: 'clndr-previous-button',
nextYearButton: 'clndr-next-year-button',
previousYearButton: 'clndr-previous-year-button',
switchWeekButton: 'clndr-switch-week-button',
switchMonthButton: 'clndr-switch-month-button',
switchYearButton: 'clndr-switch-year-button',
switchDecadeButton: 'clndr-switch-decade-button',
}
Whether the last clicked day should be tracked, that is applying the classes.selected
class
to the day that was clicked last. If trackSelectedDate
is true, "selected" class will always
be applied only to the most recently clicked date; otherwise selectedDate
will not change.
Use the "touchstart" event instead of "click" for binding the relevant on
handlers.
Whether clicking the item of the preceding or following page navigates to that page. Currently, only relevant for the
month
view where days of adjacent months may be rendered on the page of the current month according to theshowAdjacent
option.