React Scheduler - Overview

The Scheduler is a UI component that represents scheduled data and allows a user to manage it. The following image is an element map. You can click the desired element to navigate to its dedicated article.

DevExtreme HTML5 JavaScript Scheduler

View Switcher Resource Headers All-Day Panel Appointment Tooltip Appointment Appointment Appointment Appointment Current Time Indicator Timetable Timetable Drop-Down List Cell Overflow Indicator

View Demo

The following code adds the Scheduler UI component to your page. The simplest configuration requires only a dataSource to be specified. In addition, you can define a date that should be initially displayed in the date navigator using the currentDate property.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import Scheduler from 'devextreme-react/scheduler';
  •  
  • const data = [{
  • text: "Website Re-Design Plan",
  • startDate: new Date("2016-04-25T09:30:00.000Z"),
  • endDate: new Date("2016-04-25T11:30:00.000Z")
  • }, {
  • text: "Book Flights to San Fran for Sales Trip",
  • startDate: new Date("2016-04-25T12:00:00.000Z"),
  • endDate: new Date("2016-04-25T13:00:00.000Z")
  • },
  • // ...
  • ];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Scheduler
  • dataSource={data}
  • defaultCurrentDate={new Date(2016, 4, 25)} />
  • );
  • }
  • }
  • export default App;

Each data source object represents an appointment to be scheduled and has a special structure. This structure should be similar to that described in the dataSource property. The fields listed below should be present in every appointment.

  • text
    The subject of an appointment.

  • startDate
    The start date of an appointment (includes time if needed).

  • endDate
    The end date of an appointment (includes time if needed).

If your appointments have a different structure, specify:

  • textExpr
    The data field that provides subjects for appointments.

  • startDateExpr
    The data field that provides start dates for appointments.

  • endDateExpr
    The data field that provides end dates for appointments.

App.js
  • import React from 'react';
  •  
  • import 'devextreme/dist/css/dx.common.css';
  • import 'devextreme/dist/css/dx.light.css';
  •  
  • import Scheduler from 'devextreme-react/scheduler';
  •  
  • const data = [{
  • subject: 'Meet with a customer',
  • from: new Date("2016-04-10T11:00:00.000Z"),
  • to: new Date("2016-04-10T13:00:00.000Z")
  • }, {
  • subject: 'Discuss results',
  • from: new Date("2016-05-11T12:00:00.000Z"),
  • to: new Date("2016-04-11T13:00:00.000Z")
  • },
  • // ...
  • ];
  •  
  • class App extends React.Component {
  • render() {
  • return (
  • <Scheduler
  • dataSource={data}
  • textExpr="subject"
  • startDateExpr="from"
  • endDateExpr="to" />
  • );
  • }
  • }
  • export default App;
See Also