Props Reference

Full list of props accepted by <ProScheduler /> (alias <Scheduler />).

Core

Prop	Type	Default	Description
`events`	`CalendarEvent[]`	`[]`	Array of events to display
`view`	`ViewType`	—	Controlled active view: `'month' \| 'week' \| 'day' \| 'agenda' \| 'resource'`
`date`	`Date`	—	Controlled focused date
`onViewChange`	`(view: ViewType) => void`	—	Called when the user switches views
`onDateChange`	`(date: Date) => void`	—	Called when the user navigates to a different date
`readOnly`	`boolean`	`false`	Disables all editing interactions (drag, resize, create, modal)
`isLoading`	`boolean`	`false`	Shows skeleton placeholders instead of the actual calendar
`className`	`string`	—	Extra class name applied to the root element

Event callbacks

Prop	Type	Description
`onEventCreate`	`(event: Partial<CalendarEvent>) => void`	Called when the user saves a new event from the modal
`onEventUpdate`	`(event: CalendarEvent) => void`	Called when the user saves edits to an existing event
`onEventDelete`	`(eventId: string) => void`	Called when the user deletes an event
`onEventClick`	`(event: CalendarEvent) => void`	Called when the user clicks an event (before the modal opens)
`onEventDrop`	`(event: CalendarEvent, start: Date, end: Date) => void`	Called after a drag-and-drop completes
`onEventResize`	`(event: CalendarEvent, start: Date, end: Date) => void`	Called after an event is resized

Multi-calendar

Prop	Type	Default	Description
`calendars`	`{ id: string; label: string; color?: string; active?: boolean }[]`	—	Calendar list shown in the sidebar. Events are filtered by `active` flag
`onCalendarToggle`	`(calendarId: string, active: boolean) => void`	—	Called when a calendar checkbox is toggled

Resources

Prop	Type	Description
`resources`	`Resource[]`	Columns displayed in the Resource view. Each resource has `id`, `label`, `color?`, `avatar?`
`eventTypes`	`EventType[]`	Predefined event type presets (id, label, color) shown in the event form

Internationalization

Prop	Type	Default	Description
`language`	`LanguageCode`	`'tr'`	UI language. Supported: `tr en fr de es it pt ar zh ja ko ru nl pl sv`
`onLanguageChange`	`(lang: LanguageCode) => void`	—	Called when the user selects a different language
`hideLanguageSwitcher`	`boolean`	`false`	Hides the language dropdown from the header while still respecting the `language` prop
`locale`	`Locale` (date-fns)	—	date-fns locale for date formatting. Import from `DATE_FNS_LOCALES[language]`
`translations`	`Partial<CalendarTranslations>`	—	Override individual translation strings on top of the selected language

Timezone

Prop	Type	Description
`timezone`	`string`	IANA timezone string (e.g. `"America/New_York"`, `"Europe/Istanbul"`)
`onTimezoneChange`	`(tz: string) => void`	Called when the user changes the timezone in the sidebar

Theme & display

Prop	Type	Default	Description
`isDarkMode`	`boolean`	—	Enables dark mode when `true`
`onThemeToggle`	`() => void`	—	Called when the dark mode toggle is clicked
`theme`	`CalendarTheme`	—	Custom colors and border radius (see Theming)
`hideViewSwitcher`	`boolean`	`false`	Hides the view buttons from the header
`hideFab`	`boolean`	`false`	Hides the mobile create-event FAB (shown below 768px). Also hidden when `readOnly` is true. See Mobile FAB
`compactShortEvents`	`boolean`	`true`	When `true`, short timed events hide time/description (Week < 60 min, Day < 45 min). Set `false` to always show details
`initialScrollHour`	`number`	`8`	Hour (0–23) the Week/Day views scroll to on mount
`reverseTime`	`boolean`	`false`	Reverses the time axis: 23:00 at top, 00:00 at bottom. Persisted in `localStorage`

Custom render props

Prop	Signature	Description
`renderEventForm`	`(props) => ReactNode`	Replace the default event modal. See Render Props
`renderHeader`	`(props) => ReactNode`	Replace the entire header bar
`renderMiniCalendar`	`(props) => ReactNode`	Replace the sidebar mini-calendar
`renderEmptyState`	`(props) => ReactNode`	Replace the Agenda view empty state

Extension points

Prop	Type	Description
`customViews`	`CustomView[]`	Extra views added to the header switcher and sidebar. See Custom Views
`sidebarMenus`	`SidebarMenuItem[]`	Extra navigation items in the sidebar. See Sidebar Menus

CalendarTheme shape

interface CalendarTheme {
  colors?: {
    primary?:    string; // e.g. '#3b82f6'
    secondary?:  string;
    background?: string;
    foreground?: string;
    border?:     string;
    muted?:      string;
    accent?:     string;
  };
  fontFamily?:   string;
  borderRadius?: string; // e.g. '0.5rem'
}

Complete example

<ProScheduler
  // Core
  events={filteredEvents}
  view={view}
  onViewChange={setView}
  date={date}
  onDateChange={setDate}

  // Event callbacks
  onEventCreate={handleCreate}
  onEventUpdate={handleUpdate}
  onEventDelete={handleDelete}
  onEventDrop={handleDrop}
  onEventResize={handleResize}

  // Multi-calendar
  calendars={calendars}
  onCalendarToggle={handleCalendarToggle}

  // Resources
  resources={resources}
  eventTypes={eventTypes}

  // i18n
  language="en"
  onLanguageChange={setLanguage}
  locale={DATE_FNS_LOCALES['en']}

  // Timezone
  timezone="America/New_York"
  onTimezoneChange={setTimezone}

  // Theme
  isDarkMode={isDark}
  onThemeToggle={() => setIsDark(!isDark)}

  // Display
  initialScrollHour={9}
  readOnly={false}
  isLoading={isLoading}

  // Extensions
  customViews={myCustomViews}
  sidebarMenus={mySidebarMenus}
/>

Props Reference

On this page