Props Reference

The <Calendar> component accepts all fields from CalendarConfig, plus className.

All props

Prop	Type	Default	Description
events	CalendarEvent[]	required	Events to display
defaultView	CalendarView	"month"	Initial view (uncontrolled)
defaultDate	DateString	today	Initial date (uncontrolled)
view	CalendarView	—	Controlled view
date	DateString	—	Controlled date
locale	Partial<CalendarLocale>	{ locale: "en-US", weekStartsOn: 0 }	Locale settings
slots	Partial<CalendarSlots>	—	Custom component overrides
enableDnD	boolean	false	Enable drag and drop
dayStartHour	number	0	Hour the time grid starts (0-23)
dayEndHour	number	24	Hour the time grid ends (0-24)
snapDuration	number	15	Snap increment in minutes for drag, resize, and slot selection
hiddenDays	number[]	[]	Days of the week to hide (0=Sunday … 6=Saturday)
validRange	{ start?: DateString; end?: DateString }	—	Restrict navigable date range; prev/next buttons are disabled at bounds
highlightedDates	DateString[]	[]	Dates to visually highlight across all views
showWeekNumbers	boolean	false	Show ISO week numbers in month view
longPressDelay	number	0	Long press delay in ms for touch drag (avoids interfering with scroll)
slotClickTime	string	"09:00:00"	Default time used when clicking an empty day in month view
resources	Resource[]	[]	Resources for resource views (day/week views gain one column per resource)
flexibleSlotTimeLimits	boolean	false	Auto-expand time grid when events fall outside dayStartHour/dayEndHour
customButtons	CustomButton[]	[]	Custom buttons injected into the toolbar
displayTimeZone	string	browser zone	IANA zone in which times are rendered. See Timezones.
className	string	—	Additional CSS classes

Callbacks

Callback	Signature	Description
onEventClick	(event: CalendarEvent) => void	Fired when an event is clicked
onSlotClick	(dateTime: DateTimeString, extra?: { resourceId?: string }) => void	Fired when an empty time slot is clicked. extra.resourceId set in resource views.
onEventDrop	(event: CalendarEvent, newStart: DateTimeString, newEnd: DateTimeString, extra?: EventDropExtra) => void	Fired when an event is dropped after dragging. extra.resourceId set in resource views.
onEventResize	(event: CalendarEvent, newStart: DateTimeString, newEnd: DateTimeString) => void	Fired when an event is resized (week/day view)
onSlotSelect	(start: DateTimeString, end: DateTimeString, extra?: { resourceId?: string }) => void	Fired when a time range is selected by dragging. extra.resourceId set in resource views.
onDateChange	(date: DateString) => void	Fired when the visible date changes (navigation)
onViewChange	(view: CalendarView) => void	Fired when the view changes
dragConstraint	(event, newStart, newEnd) => boolean	Return false to prevent a drop
resizeConstraint	(event, newStart, newEnd) => boolean	Return false to prevent a resize
selectConstraint	(start, end) => boolean	Return false to prevent a slot selection

Type definitions

CalendarEvent

interface CalendarEvent {
  id: string;
  title: string;
  start: DateTimeString;   // "2026-03-13T09:00:00"
  end: DateTimeString;     // "2026-03-13T10:00:00"
  allDay?: boolean;
  color?: string;
  timeZone?: string;             // IANA zone (RFC 5545 TZID). See Timezones.
  recurrence?: RecurrenceRule;   // Recurring event rule
  exDates?: DateString[];        // Dates to exclude from recurrence
  recurringEventId?: string;     // Set on expanded instances (points to parent)
  originalDate?: DateString;     // Original date of this recurring instance
  [key: string]: unknown;        // Custom metadata
}

RecurrenceRule

See Recurrence for full documentation.

interface RecurrenceRule {
  freq: "daily" | "weekly" | "monthly" | "yearly";
  interval?: number;
  byDay?: RecurrenceDay[];    // "MO" | "TU" | "WE" | "TH" | "FR" | "SA" | "SU"
  byMonthDay?: number[];
  bySetPos?: number[];
  count?: number;
  until?: string;
}

CalendarView

type CalendarView = "month" | "week" | "day" | "agenda" | "year";

CalendarLocale

interface CalendarLocale {
  locale: string;          // BCP 47: "en-US", "es-ES", "ja-JP"
  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
  labels?: Partial<CalendarLabels>;
}

CalendarLabels

interface CalendarLabels {
  today: string;
  month: string;
  week: string;
  day: string;
  agenda: string;
  allDay: string;
  noEvents: string;
  more: (count: number) => string;
}

DateString / DateTimeString

type DateString = string;      // "2026-03-13" (YYYY-MM-DD)
type DateTimeString = string;  // "2026-03-13T09:00:00" (YYYY-MM-DDTHH:mm:ss)

CalendarSlots

See the Slots API page for detailed prop types.

interface CalendarSlots {
  toolbar?: ComponentType<ToolbarSlotProps>;
  event?: ComponentType<EventSlotProps>;
  dayCell?: ComponentType<DayCellSlotProps>;
  timeEvent?: ComponentType<TimeEventSlotProps>;
  allDayEvent?: ComponentType<AllDayEventSlotProps>;
  popover?: ComponentType<PopoverSlotProps>;
  agendaEvent?: ComponentType<AgendaEventSlotProps>;
  resourceHeader?: ComponentType<ResourceHeaderSlotProps>;
}