React Scheduler API

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

import Scheduler from "devextreme-react/scheduler"

Type: SchedulerTypes.default

DevExtreme widgets are integrated with many popular libraries and frameworks. See the Installation section (for JavaScript libraries) or the Prerequisites and Installation section (for ASP.NET MVC framework) to find details on setting up DevExtreme with a particular library or framework.

The following code shows how to create the Scheduler widget using every supported library and framework. For more details on working with widgets in these libraries and frameworks, see the Widget Basics topic for jQuery, Angular, AngularJS, Knockout or ASP.NET MVC.

jQuery

JavaScript

HTML

$(function () {
    $("#scheduler").dxScheduler({
        dataSource: [{
            text: "Meeting customers",
            startDate: new Date(2015, 4, 10, 11, 0),
            endDate: new Date(2015, 4, 10, 13, 0)
        }, {
            text: "Summing up the results",
            startDate: new Date(2015, 4, 11, 12, 0),
            endDate: new Date(2015, 4, 11, 13, 0)
        },
        // ...
        ],
        currentDate: new Date(2015, 4, 10),
        startDayHour: 8,
        endDayHour: 19
    });
});

<div id="scheduler">

Angular

HTML

TypeScript

<dx-scheduler
    [dataSource]="schedulerData"
    [currentDate]="new Date(2015, 4, 10)"
    [startDayHour]="8"
    [endDayHour]="19">
</dx-scheduler>

import { DxSchedulerModule } from "devextreme-angular"
// ...
export class AppComponent {
    schedulerData = [{
            text: "Meeting customers",
            startDate: new Date(2015, 4, 10, 11, 0),
            endDate: new Date(2015, 4, 10, 13, 0)
        }, {
            text: "Summing up the results",
            startDate: new Date(2015, 4, 11, 12, 0),
            endDate: new Date(2015, 4, 11, 13, 0)
        },
        // ...
    ];
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})

AngularJS

HTML

<div dx-scheduler="{
    dataSource: [{
        text: 'Meeting customers',
        startDate: new Date(2015, 4, 10, 11, 0),
        endDate: new Date(2015, 4, 10, 13, 0)
    }, {
        text: 'Summing up the results',
        startDate: new Date(2015, 4, 11, 12, 0),
        endDate: new Date(2015, 4, 11, 13, 0)
    },
    // ...
    ],
    currentDate: new Date(2015, 4, 10),
    startDayHour: 8,
    endDayHour: 19
}">
</div>

Knockout

HTML

<div data-bind="dxScheduler: {
    dataSource: [{
        text: 'Meeting customers',
        startDate: new Date(2015, 4, 10, 11, 0),
        endDate: new Date(2015, 4, 10, 13, 0)
    }, {
        text: 'Summing up the results',
        startDate: new Date(2015, 4, 11, 12, 0),
        endDate: new Date(2015, 4, 11, 13, 0)
    },
    // ...
    ],
    currentDate: new Date(2015, 4, 10),
    startDayHour: 8,
    endDayHour: 19
}">
</div>

ASP.NET MVC Controls

Razor C#

Razor VB

@(Html.DevExtreme().Scheduler()
    .ID("scheduler")
    .DataSource(new object[] {
        new {
            text = "Meeting customers",
            startDate = new DateTime(2015, 5, 10, 11, 0, 0),
            endDate = new DateTime(2015, 5, 10, 13, 0, 0)
        },
        new {
            text = "Summing up the results",
            startDate = new DateTime(2015, 5, 11, 12, 0, 0),
            endDate = new DateTime(2015, 5, 11, 13, 0, 0)
        },
        // ...
    })
    .CurrentDate(new DateTime(2015, 5, 10))
    .StartDayHour(8)
    .EndDayHour(19)
)

@(Html.DevExtreme().Scheduler() _
    .ID("scheduler") _
    .DataSource({
        New With {
            .text = "Meeting customers",
            .startDate = new DateTime(2015, 5, 10, 11, 0, 0),
            .endDate = new DateTime(2015, 5, 10, 13, 0, 0)
        },
        New With {
            .text = "Summing up the results",
            .startDate = new DateTime(2015, 5, 11, 12, 0, 0),
            .endDate = new DateTime(2015, 5, 11, 13, 0, 0)
        }
    }) _
    .CurrentDate(New DateTime(2015, 5, 10)) _
    .StartDayHour(8) _
    .EndDayHour(19)
)

Props

An object defining configuration options for the widget.

Name	Description
accessKey	Specifies the shortcut key that sets focus on the widget.
allDayExpr	Specifies the name of the data source item field whose value defines whether or not the corresponding appointment is an all-day appointment.
appointmentCollectorTemplate	Specifies an appointment collector's custom template.
appointmentTemplate	Specifies a custom template for appointments.
appointmentTooltipTemplate	Specifies a custom template for appointment tooltips.
cellDuration	Specifies cell duration in minutes.
crossScrollingEnabled	Specifies whether or not an end-user can scroll the view in both directions at the same time.
currentDate	Specifies a date displayed on the current scheduler view by default.
currentView	Specifies the currently displayed view. Accepts the view's name or type.
customizeDateNavigatorText	Customizes the date navigator's text.
dataCellTemplate	Specifies a custom template for table cells.
dataSource	Binds the widget to data.
dateCellTemplate	Specifies a custom template for day scale items.
dateSerializationFormat	Specifies the date-time values' serialization format. Use it only if you do not specify the dataSource at design time.
descriptionExpr	Specifies the name of the data source item field whose value holds the description of the corresponding appointment.
disabled	Specifies whether the widget responds to user interaction.
dropDownAppointmentTemplate	Specifies a custom template for appointments in the appointment collector's drop-down list.
editing	Specifies which editing operations an end-user can perform on appointments.
elementAttr	Specifies the attributes to be attached to the widget's root element.
endDateExpr	Specifies the name of the data source item field that defines the ending of an appointment.
endDateTimeZoneExpr	Specifies the name of the data source item field that defines the timezone of the appointment end date.
endDayHour	Specifies the last hour in the time scale. Cannot be greater than 24.
firstDayOfWeek	Specifies the first day of a week. Does not apply to the agenda view.
focusStateEnabled	Specifies whether the widget can be focused using keyboard navigation.
groupByDate	Specifies whether to group appointments by date first. Applies only if groupOrientation is "horizontal".
groups	Specifies the resource kinds by which the scheduler's appointments are grouped in a timetable.
height	Specifies the widget's height.
hint	Specifies text for a hint that appears when a user pauses on the widget.
indicatorUpdateInterval	Specifies the time interval between when the date-time indicator changes its position, in milliseconds.
max	The latest date the widget allows you to select.
maxAppointmentsPerCell	Specifies the limit of full-sized appointments displayed per cell. Applies to all views except "agenda".
min	The earliest date the widget allows you to select.
noDataText	The text or HTML markup displayed by the widget if the item collection is empty. Available for the Agenda view only.
onAppointmentAdded	A function that is executed after an appointment is added to the data source.
onAppointmentAdding	A function that is executed before an appointment is added to the data source.
onAppointmentClick	A function that is executed when an appointment is clicked or tapped.
onAppointmentContextMenu	A function that is executed when a user attempts to open the browser's context menu for an appointment. Allows you to replace this context menu with a custom context menu.
onAppointmentDblClick	A function that is executed when an appointment is double-clicked or double-tapped.
onAppointmentDeleted	A function that is executed after an appointment is deleted from the data source.
onAppointmentDeleting	A function that is executed before an appointment is deleted from the data source.
onAppointmentFormOpening	A function that is executed before an appointment details form is opened.
onAppointmentRendered	A function that is executed when an appointment is rendered.
onAppointmentUpdated	A function that is executed after an appointment is updated in the data source.
onAppointmentUpdating	A function that is executed before an appointment is updated in the data source.
onCellClick	A function that is executed when a view cell is clicked.
onCellContextMenu	A function that is executed when a user attempts to open the browser's context menu for a cell. Allows you to replace this context menu with a custom context menu.
onContentReady	A function that is executed when the widget's content is ready and each time the content is changed.
onDisposing	A function that is executed before the widget is disposed of.
onInitialized	A function used in JavaScript frameworks to save the widget instance.
onOptionChanged	A function that is executed after a widget option is changed.
recurrenceEditMode	Specifies the edit mode for recurring appointments.
recurrenceExceptionExpr	Specifies the name of the data source item field that defines exceptions for the current recurring appointment.
recurrenceRuleExpr	Specifies the name of the data source item field that defines a recurrence rule for generating recurring appointments.
remoteFiltering	Specifies whether filtering is performed on the server or client side.
resourceCellTemplate	Specifies a custom template for resource headers.
resources	Specifies an array of resources available in the scheduler.
rtlEnabled	Switches the widget to a right-to-left representation.
selectedCellData	Currently selected cells' data.
shadeUntilCurrentTime	Specifies whether to apply shading to cover the timetable up to the current time.
showAllDayPanel	Specifies the "All-day" panel's visibility. Setting this option to false hides the panel along with the all-day appointments.
showCurrentTimeIndicator	Specifies the current date-time indicator's visibility.
startDateExpr	Specifies the name of the data source item field that defines the start of an appointment.
startDateTimeZoneExpr	Specifies the name of the data source item field that defines the timezone of the appointment start date.
startDayHour	Specifies the first hour in the time scale.
tabIndex	Specifies the number of the element when the Tab key is used for navigating.
textExpr	Specifies the name of the data source item field that holds the subject of an appointment.
timeCellTemplate	Specifies a custom template for time scale items.
timeZone	Specifies the timezone of the widget.
useDropDownViewSwitcher	Specifies whether a user can switch views using tabs or a drop-down menu.
views	Configures individual views.
visible	Specifies whether the widget is visible.
width	Specifies the widget's width.

Methods

This section describes methods used to manipulate the widget.

Name	Description
addAppointment(appointment)	Adds an appointment.
beginUpdate()	Prevents the widget from refreshing until the endUpdate() method is called.
defaultOptions(rule)	Specifies the device-dependent default configuration options for this component.
deleteAppointment(appointment)	Deletes an appointment from the timetable and its object from the data source.
dispose()	Disposes of all the resources allocated to the Scheduler instance.
element()	Gets the root widget element.
endUpdate()	Refreshes the widget after a call of the beginUpdate() method.
focus()	Sets focus on the widget.
getDataSource()	Gets the DataSource instance.
getEndViewDate()	Gets the current view's end date.
getInstance(element)	Gets the instance of a widget found using its DOM node.
getStartViewDate()	Gets the current view's start date.
hideAppointmentPopup(saveChanges)	Hides an appointment details form.
hideAppointmentTooltip()	Hides an appointment tooltip.
instance()	Gets the widget's instance. Use it to access other methods of the widget.
off(eventName)	Detaches all event handlers from a single event.
off(eventName, eventHandler)	Detaches a particular event handler from a single event.
on(eventName, eventHandler)	Subscribes to an event.
on(events)	Subscribes to events.
option()	Gets all widget options.
option(optionName)	Gets the value of a single option.
option(optionName, optionValue)	Updates the value of a single option.
option(options)	Updates the values of several options.
registerKeyHandler(key, handler)	Registers a handler to be executed when a user presses a specific key.
repaint()	Repaints the widget without reloading data. Call it to update the widget's markup.
scrollToTime(hours, minutes, date)	Scrolls the current view to a specific day and time.
showAppointmentPopup(appointmentData, createNewAppointment, currentAppointmentData)	Shows the appointment details form.
showAppointmentTooltip(appointmentData, target, currentAppointmentData)	Shows a tooltip for a target element.
updateAppointment(target, appointment)	Updates an appointment.

Events

This section describes events fired by this widget.

Name	Description
appointmentAdded	Raised after an appointment is added to the data source.
appointmentAdding	Raised before an appointment is added to the data source.
appointmentClick	Raised when an appointment is clicked or tapped.
appointmentContextMenu	Raised when a user attempts to open the browser's context menu for an appointment.
appointmentDblClick	Raised when an appointment is double-clicked or double-tapped.
appointmentDeleted	Raised after an appointment is deleted from the data source.
appointmentDeleting	Raised before an appointment is deleted from the data source.
appointmentFormOpening	Raised before an appointment details form is opened.
appointmentRendered	Raised when an appointment is rendered.
appointmentUpdated	Raised after an appointment is updated in the data source.
appointmentUpdating	Raised before an appointment is updated in the data source.
cellClick	Raised when a view cell is clicked.
cellContextMenu	Raised when a user attempts to open the browser's context menu for a cell.
contentReady	Raised when the widget's content is ready.
disposing	Raised before the widget is disposed of.
initialized	Raised only once, after the widget is initialized.
optionChanged	Raised after a widget option is changed.

Default Appointment Template

This section lists the fields that are used in a default template for scheduler appointments.

Type:

Object

By default, a predefined appointment template is applied to display scheduler appointments. This template is based on certain fields of the data source provided for the widget. Below is the list of these fields. If the default appointment template is not appropriate for your task, implement a custom appointment template based on these or other fields of your data source.

Default Tooltip Template

This section lists the fields that are used in a default template for scheduler appointment tooltips.

Type:

Object

By default, a predefined appointment tooltip template is applied to display appointment toolips. This template is based on certain fields of the data source provided for the widget. Below is the list of these fields. If the default tooltip template is not appropriate for your task, implement a custom template based on these or other fields of your data source.

React Scheduler API

jQuery

Angular

AngularJS

Knockout

ASP.NET MVC Controls

See Also

Props

Methods

Events

See Also

Default Appointment Template

See Also

Default Tooltip Template

See Also