Type Alias DefaultOptions

Type declaration

• adjacentItemsChangePage: boolean

  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 the showAdjacent option.

• classes: {
      [key in ItemStatus]: string
  }

  Custom CSS classes added to calendar items for avoiding styling conflicts.

  Example

  In this example a my- prefix is added to all classes:

  new Clndr(container, {
    render: /*...*/,
    classes: {
      past: 'my-past',
      now: 'my-now',
      event: 'my-event',
      inactive: 'my-inactive',
      previous: 'my-previous',
      next: 'my-next',
      adjacent: 'my-adjacent',
    }
  });
  Copy

• Optionalconstraints?: Constraints

  Prevent 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.

  Example

  constraints: {
    start: '2000-01-01',
    end: '2024-12-31',
  },
  Copy

• dateParameter: DateParameterDefinition

  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.

  Example

  dateParameter: {
    date: 'my-date',
    start: 'my-start-date',
    end: 'my-end-date',
  },
  Copy

• OptionaldaysOfTheWeek?: DaysOfTheWeek

  An 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.

  Example

  ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']
  Copy

• defaultView: View

  The view that should be rendered initially; Only relevant when configuring multiple views to allow switching between views.

  Example

  'month'
  Copy

• events: ClndrEvent[]

  An array of calendar event objects.

  Example

  events: [
    {
      title: 'This is an event',
      date: '2000-08-20'
    },
    /*...*/
  ],
  Copy

• Optionalextras?: unknown

  Any 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.

• OptionalformatWeekdayHeader?: ((day: Date, locale?: Locale) => string)

  Callback 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.

  Example

  formatWeekdayHeader: (day, locale) => {
    return format(day, 'cccccc', {locale}).charAt(0);
  },
  Copy

  • • (day, locale?): string

    • Parameters

      • day: Date
      • Optionallocale: Locale

      Returns string

• ignoreInactiveDaysInSelection: boolean

  Whether inactive dates (dates considered outside the boundaries defined by the constraints option) should be selectable, if the trackSelectedDate option is activated.

• Optionallocale?: Locale

  A date-fns locale to use when formatting date strings (the month name passed to the template, the day abbreviations in the calendar header).

• on: InteractionEvents

  Handlers for interaction events. this is set to the calendar instance in all callbacks.

• pagination: {
      [key in View]?: Pagination
  }

  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.

  Example

  {
    month: {
      // Render two months at the same time.
      size: 2,
  
      // Navigated forward/backward ny one month when paging the calendar.
      step: 1,
    },
    year: {
      size: 1,
      step: 1,
    },
  
  Copy

• Optionalrender?: never

• OptionalselectedDate?: Date | string | number

  A date that should be selected (that is its element is supposed to receive the classes.selected class) at the time the calendar is initialized.

• showAdjacent: boolean

  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.

• OptionalstartOn?: Date | string | number

  Determines 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.

  Example

  '1992-10'
  Copy

• targets: {
      [key in TargetOption]: string
  }

  The target classnames that the calendar will look for to bind events. The defaults are as per the example.

  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',
  }
  Copy

• trackSelectedDate: boolean

  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.

• useTouchEvents: boolean

  Use the "touchstart" event instead of "click" for binding the relevant on handlers.