DevExtreme React - Overview

The Scheduler is a widget 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 widget 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 option.

jQuery
JavaScript
$(function() {
    $("#schedulerContainer").dxScheduler({
        dataSource: [{
            text: "Website Re-Design Plan",
            startDate: new Date(2016, 4, 25, 9, 30),
            endDate: new Date(2016, 4, 25, 11, 30)
        }, {
            text: "Book Flights to San Fran for Sales Trip",
            startDate: new Date(2016, 4, 25, 12, 0),
            endDate: new Date(2016, 4, 25, 13, 0)
        }, 
        // ...
        ],
        currentDate: new Date(2016, 4, 25)
    });
});
Angular
HTML
TypeScript
<dx-scheduler
    [dataSource]="appointments"
    [currentDate]="currentDate">
</dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent  {
    appointments = [{
        text: "Website Re-Design Plan",
        startDate: new Date(2016, 4, 25, 1, 30),
        endDate: new Date(2016, 4, 25, 3, 30)
    }, {
        text: "Book Flights to San Fran for Sales Trip",
        startDate: new Date(2016, 4, 25, 9, 0),
        endDate: new Date(2016, 4, 25, 10, 0)
    }, 
    // ...
    ];
    currentDate = new Date(2016, 4, 25);
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})

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 option. 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.

jQuery
JavaScript
$(function() {
    $("#schedulerContainer").dxScheduler({
        dataSource: [{ 
            subject: 'Meet with a customer', 
            from: new Date(2016, 4, 10, 11, 0), 
            to: new Date(2016, 4, 10, 13, 0) 
        }, { 
            subject: 'Discuss results', 
            from: new Date(2016, 5, 11, 12, 0), 
            to: new Date(2016, 4, 11, 13, 0) 
        }, 
        // ...
        ],
        textExpr: "subject",
        startDateExpr: "from",
        endDateExpr: "to"
    });
});
Angular
HTML
TypeScript
<dx-scheduler
    [dataSource]="appointments"
    textExpr="subject"
    startDateExpr="from"
    endDateExpr="to"
    [currentDate]="currentDate">
</dx-scheduler>
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent  {
    appointments = [{ 
        subject: 'Meet with a customer', 
        from: new Date(2016, 4, 25, 1, 0), 
        to: new Date(2016, 4, 25, 3, 0) 
    }, { 
        subject: 'Discuss results', 
        from: new Date(2016, 5, 25, 9, 0), 
        to: new Date(2016, 4, 25, 10, 0) 
    }, 
    // ...
    ];
    currentDate = new Date(2016, 4, 25);
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
See Also