TypeScript

React Scheduler Pro is written in TypeScript and exports all types for full type safety.

Importing Types

All types are exported from the main package:

import {
  Scheduler,
  type SchedulerProps,
  type fieldsType,
  type view,
  type days,
  type DayHours,
  type onNavigateType,
  type onViewType,
  type onSlotType,
  type onClickEventType,
  type onDoubleClickEventType,
  type onEditEventType,
  type onDeleteEventType,
  type eventItemType,
  type eventFormContextType,
  type slotGetterType,
  type resourceType,
} from 'react-scheduler-pro';

Type Reference

`SchedulerProps`

The main component props interface:

interface SchedulerProps {
  events: any[] | null;
  fields: fieldsType;

  // Optional
  resources?: any[] | null;
  resourceFields?: { id: string; title: string; backgroundColor?: string };

  view?: view;
  views?: view[];
  selectedDate?: Date;

  schedulerHeight?: number;
  startHour?: DayHours;
  endHour?: DayHours;
  step?: number;
  hourFormat?: 12 | 24;

  locale?: Locale;
  timezone?: string;
  weekStartsOn?: days;

  message?: {
    today: string;
    month: string;
    week: string;
    day: string;
    workweek: string;
    more: string;
  };

  // Drag & Drop
  draggable?: boolean;
  resizable?: boolean;
  onEventDrop?: (props: onEventDropType) => void;
  onEventResize?: (props: onEventResizeType) => void;

  // Callbacks
  onNavigate?: (props: onNavigateType) => void;
  onView?: (props: onViewType) => void;
  onSlot?: (props: onSlotType) => void;
  onClickEvent?: (props: onClickEventType) => void;
  onDoubleClickEvent?: (props: onDoubleClickEventType) => void;
  onEditEvent?: (props: onEditEventType) => void;
  onDeleteEvent?: (props: onDeleteEventType) => void;

  // Templates
  eventTemplate?: (props: eventItemType) => JSX.Element | null;
  resourceTemplate?: (props: resourceType) => JSX.Element | null;
  eventPopoverTemplate?: (props: eventPopoverType) => JSX.Element | null;
  eventFormContext?: (props: eventFormContextType) => JSX.Element | null;

  slotPropGetter?: (props: slotGetterType) => {
    styles?: any;
    classnames?: string;
  };
}

`fieldsType`

Maps your event object properties to what the scheduler expects:

type fieldsType = {
  id: string; // e.g. '_id'
  subject: string; // e.g. 'title'
  start: string; // e.g. 'startDate'
  end: string; // e.g. 'endDate'
  backgroundColor?: string;
  resourceId?: string;
  allDay?: string;
};

`view`

type view = 'day' | 'week' | 'month' | 'workweek' | string;

`days`

type days = 0 | 1 | 2 | 3 | 4 | 5 | 6;

`DayHours`

type DayHours = 0 | 1 | 2 | ... | 23 | 24;

Callback Types

type onNavigateType = { date: Date; start: Date; end: Date; view: view };
type onViewType = { view: view };
type onSlotType = { start: Date; end: Date; resource: any };
type onClickEventType = { event: any; resource: any };
type onDoubleClickEventType = { event: any; resource: any };
type onEditEventType = { event: any; resource: any };
type onDeleteEventType = { event: any; resource: any };
type onEventDropType = {
  event: any;
  start: Date;
  end: Date;
  resource?: any;
  originalEvent: any;
};
type onEventResizeType = {
  event: any;
  start: Date;
  end: Date;
  originalEvent: any;
};

Typed Event Example

// Define your event shape
interface MyEvent {
  _id: string;
  title: string;
  startDate: Date;
  endDate: Date;
  color: string;
  roomId?: number;
}

const events: MyEvent[] = [
  {
    _id: '1',
    title: 'Team Meeting',
    startDate: new Date(2026, 2, 19, 10, 0),
    endDate: new Date(2026, 2, 19, 11, 0),
    color: '#0079ff',
    roomId: 1,
  },
];

// Map your fields
const fields: fieldsType = {
  id: '_id',
  subject: 'title',
  start: 'startDate',
  end: 'endDate',
  backgroundColor: 'color',
  resourceId: 'roomId',
};

<Scheduler events={events} fields={fields} />;