Scheduler Reference

The Scheduler is a root container component designed to process and display the specified data. The Scheduler's functionality (data visualization and processing) is implemented in several plugins specified as child components.


Use the following statement to import a plugin with embedded theme components:

import { Scheduler } from '@devexpress/dx-react-scheduler-material-ui';

You can import the themeless plugin if you want to use custom components:

import { Scheduler } from '@devexpress/dx-react-scheduler';

User reference


Name Type Default Description
data Array<AppointmentModel> An array of appointment data objects.
height number | auto auto The scheduler's height. If the value is auto, the height equals that of the container component.
locale string | Array<string> 'en-US' The locale according to which dates should be formatted.
firstDayOfWeek number 0 A number between 0 (Sunday) and 6 (Saturday) that specifies the first day of the week.
rootComponent ComponentType<Scheduler.RootProps> A component that renders the root layout.



Describes an appointment data object. If you use another data structure, map it to this structure as shown in this demo.

Field Type Description
startDate SchedulerDateTime The start date.
endDate? SchedulerDateTime The end date.
title? string The title.
allDay? boolean The all day flag.
id? number | string The identifier.
rRule? string Specifies the appointment recurrence rule. Follows the iCalendar RRULE format.
exDate? string Specifies dates excluded from recurrence. Uses the iCalendar EXDATE format.
[propertyName: string] any Any other properties.


Field Type Description
parentRect () => ClientRect | DOMRect A function that returns the rect of the parent element.
getCellRects Array<() => ClientRect | DOMRect> An array of the cell rect functions.


Field Type Description
topBoundary number The position of the scrollable area's top boundary.
bottomBoundary number The position of the scrollable area's bottom boundary.
changeVerticalScroll (value: number) => void A function that is called when the vertical scroll position is changed.
leftBoundary? number The position of the scrollable area's left boundary.
rightBoundary? number The position of the scrollable area's right boundary.
changeHorizontalScroll? (value: number) => void A function that is called when the horizontal scroll position is changed.


Describes properties passed to a component that renders the root layout.

Field Type Description
height number | auto The Scheduler's height.
children? ReactNode A React node used to render the root layout.


The type of date-time values in the Scheduler.

Type: Date | string | number


A function that formats dates according to the set locale.

Type: (nextDate: Date | string | number | undefined, nextOptions: Intl.DateTimeFormatOptions) => string

Plugin Components

Name Properties Description
Scheduler.Root Scheduler.RootProps A component that renders the root layout.

Additional properties are added to the component's root element.