Calendar controls

Add some additional controls, to programmatically change the calendar view and set the date.

Install

npm i @schedule-x/calendar-controls

API

`setView(viewName: string)`

Change the calendar view.

`setDate(date: string)`

Set the date of the calendar. Format: YYYY-MM-DD.

`setFirstDayOfWeek(firstDayOfWeek: WeekDay): void`

Set the first day of the week for the calendar. Value must be between 0 and 6 where 0 is Sunday, 1 is Monday etc.

`setLocale(locale: string): void`

Set the locale of the calendar.

`setViews(views: [View, ...View]): void`

Set the available views for the calendar. The views to be set must include the currently active view name. At least one view must be passed into this function.

`setDayBoundaries(dayBoundaries: DayBoundariesExternal): void`

Set the day boundaries of the calendar.

`setWeekOptions(weekOptions: WeekOptions): void`

Set the week options of the calendar.

`setCalendars(calendars: Record<string, CalendarType>): void`

Set the available calendars to be displayed in the calendar.

`setMinDate(minDate: string|undefined): void`

Set the min date for the calendar navigation.

`setMaxDate(maxDate: string|undefined): void`

Set the max date for the calendar navigation.

`setMonthGridOptions(monthGridOptions: MonthGridOptions): void`

Set the month grid options of the calendar.

`getView(): string`

Get the name of the current view.

`getDate(): string`

Get the currently selected date of the calendar.

`getRange(): { start: string, end: string }`

Get the currently visible time range of the calendar.

`getFirstDayOfWeek(): WeekDay`

Get the currently configured first day of week of the calendar.

`getLocale(): string`

Get the current locale of the calendar.

`getViews(): View[]`

Get the currently available views of the calendar.

`getDayBoundaries(): DayBoundariesExternal`

Get the day boundaries of the calendar.

`getWeekOptions(): WeekOptions`

Get the week options of the calendar.

`getCalendars(): Record<string, CalendarType>`

Get the calendars of the calendar.

`getMinDate(): string|undefined`

Get the current min date for the calendar navigation.

`getMaxDate(): string|undefined`

Get the current max date for the calendar navigation.

`getMonthGridOptions(): MonthGridOptions`

Get the current month grid options of the calendar.

Examples

import { createCalendarControlsPlugin } from '@schedule-x/calendar-controls'
 
const calendarControls = createCalendarControlsPlugin()
 
const calendar = createCalendar(
  { /** config */ },
  [calendarControls]
)
calendar.render(/** your calendar element */)
 
// Programmatically change the calendar view
calendarControls.setView('week')
 
// Programmatically set the date
calendarControls.setDate('2025-01-01')

Events Service Event Recurrence