API Reference

Every prop, callback and exported type of the <Calendar> component.

Data props

PropTypeDefaultDescription
events bindableCalendarEvent[][]The event list; edits are written back.
date bindableDatenew Date()Focused date.
view bindableCalendarView'month'Active view.
sourcesCalendarSource[][]Calendar groups: color, visibility, editability.
resourcesResource[][]Columns of the resources view; events link via resourceId.
timeZonestringlocalIANA display time zone; edits convert back to real instants.
validRange{ start?, end? }Days outside are read-only and unreachable.
eventOverlapbooleantruefalse rejects overlapping drops/creates (timed events).

Display props

PropTypeDefaultDescription
localestring'en'BCP-47 tag; drives all formats & built-in strings.
messagesPartial<CalendarMessages>Override UI strings.
firstDayOfWeek0–6from locale0 = Sunday.
weekendsbooleantrueShow Sat/Sun columns.
weekNumbersbooleanfalseISO week numbers.
fixedWeeksbooleanfalseMonth view always 6 rows.
dayMaxEventsnumber4Rows per month cell incl. “+N more”.
viewsCalendarView[]all fiveToolbar view buttons.
headerbooleantrueRender the built-in toolbar.
theme'light' | 'dark' | 'auto''light'Color scheme.
agendaDaysnumber30Agenda window length.
hour12booleanfrom localeClock format.
classstringExtra classes on the root.

Time-grid props

PropTypeDefault
dayStartHour / dayEndHournumber0 / 24
slotDuration / snapDurationnumber (minutes)30 / 15
hourHeightnumber (px)48
scrollToHournumber7
businessHoursboolean | BusinessHoursnull
nowIndicatorbooleantrue

Interaction props & callbacks

PropTypeDescription
editablebooleanEnable drag & resize.
selectablebooleanEnable drag-selection.
eventDetailsboolean = trueBuilt-in details popover on event click (skipped when onEventClick is set).
quickCreateboolean = trueBuilt-in quick-create popover on empty click/selection (needs selectable or editable; skipped when onSelect/onDateClick are set).
onEventClick(instance, e) => voidEvent activated.
onDateClick(date, allDay) => voidEmpty cell / slot clicked.
onSelect(sel: RangeSelection) => voidDrag-selection finished.
onEventChange(info: EventChangeInfo) => voidDrag/resize landed; info.revert() rolls back.
onEventCreate(event) => voidQuick-create added an event to the bound array.
onEventDelete(event, occurrence?) => voidAn event was removed; occurrence set when one instance of a series was deleted.
onSeriesDetach({ series, detached, occurrence }) => void“This event”: an occurrence was split into a standalone event.
onSeriesSplit({ truncated, created, occurrence }) => void“This and following”: the series was split at an occurrence.
onRangeChange(start, end) => voidVisible range changed (incl. mount) — fetch events here.
onViewChange(view) => voidView switched.
onDateChange(date) => voidFocused date moved.
eventContentSnippet<[EventInstance]>Custom event body.
toolbarEndSnippetExtra toolbar content.

Exported types

CalendarEvent · CalendarSource · CalendarView · EventInstance · EventChangeInfo · RangeSelection · RecurrenceRule · BusinessHours · CalendarMessages · PaletteColor · Weekday

Exported utilities

ExportDescription
MiniCalendarStandalone month picker component.
parseRRule / expandRecurrenceRecurrence parsing & expansion.
detachOccurrence / excludeOccurrence / splitSeriesPure series-edit helpers (“this event” / “this and following”).
parseICS / toICSiCalendar (.ics) import & export.
serializeRRuleRecurrenceRule → RRULE string.
toZoned / fromZonedDisplay-time-zone conversion helpers.
expandEventsEvents → concrete instances for a range.
layoutDay / layoutWeekRowThe pure layout algorithms.
en / zhCN / messagesForLocale / localeFirstDayi18n helpers.
addDays, startOfWeek, monthGrid, …Zero-dependency date helpers.