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';| 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. | |
| children? | ReactNode | A React node used to render the scheduler content. |
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
| Name | Properties | Description |
|---|---|---|
| Scheduler.Root | Scheduler.RootProps | A component that renders the root layout. |
Additional properties are added to the component's root element.