Overview

The Scheduler is a widget that represents scheduled data and allows a user to manage it.

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 displayed by default using the currentDate option.

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)
    });
});

Each data source object represents an appointment to be scheduled and has a special structure. This structure should be similar to the Default Appointment Template. Note that 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.

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"
    });
});    
See Also