Scheduler

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

Included in: dx.web.js, dx.viz-web.js, dx.all.js
Module: ui/scheduler
Export: default
Scheduler interactive configuration
Copy Code
Copy to Codepen
$("#scheduler").dxScheduler({
});

                    

You can create the widget using one of the following approaches.

  • jQuery

    HTML
    JavaScript
    <div id="scheduler">
    $(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
        });
    });
  • Angular

    HTML
    JavaScript
    <dx-scheduler
        [dataSource]="schedulerData"
        [currentDate]="new Date(2015, 4, 10)"
        [startDayHour]="8"
        [endDayHour]="19">
    </dx-scheduler>
    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)
            },
            // ...
        ];
    }
  • 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 Wrappers

    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 Object() {
            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)
    )

Note that DevExtreme widgets require you to link the jQuery library to your application. If you use the Knockout or AngularJS approach, the Knockout or AngularJS library is also required. For detailed information on linking these libraries to your project, refer to the topics in the Installation section.

See Also

View Demo Watch Video

Configuration

An object defining configuration options for the widget.

Name Description
accessKey

Specifies a shortcut key that sets focus on the widget element.

allDayExpr

Specifies the name of the data source item field whose value defines whether or not the corresponding appointment is an all-day appointment.

appointmentTemplate

The template to be used for rendering appointments.

appointmentTooltipTemplate

The template to be used for rendering an appointment tooltip.

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 view used in the scheduler by default.

dataCellTemplate

The template to be used for rendering table cells.

dataSource

A data source used to fetch data to be displayed by the widget.

dateCellTemplate

The template to be used for rendering date scale items.

dateSerializationFormat

Specifies the serialization format for date-time values.

descriptionExpr

Specifies the name of the data source item field whose value holds the description of the corresponding appointment.

disabled

A Boolean value specifying whether or not the widget can respond to user interaction.

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 an end hour in the scheduler view's time interval.

firstDayOfWeek

Specifies the first day of a week.

focusStateEnabled

Specifies whether or not the widget can be focused.

groups

Specifies the resource kinds by which the scheduler's appointments are grouped in a timetable.

height

Specifies the height of the widget.

hint

Specifies the text of the hint displayed for the widget.

max

The latest date the widget allows you to select.

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 handler for the appointmentAdded event.

onAppointmentAdding

A handler for the AppointmentAdding event.

onAppointmentClick

A handler for the appointmentClick event.

onAppointmentDblClick

A handler for the appointmentDblClick event.

onAppointmentDeleted

A handler for the appointmentDeleted event.

onAppointmentDeleting

A handler for the AppointmentDeleting event.

onAppointmentFormCreated

A handler for the appointmentFormCreated event.

onAppointmentRendered

A handler for the appointmentRendered event.

onAppointmentUpdated

A handler for the appointmentUpdated event.

onAppointmentUpdating

A handler for the AppointmentUpdating event.

onCellClick

A handler for the cellClick event.

onContentReady

A handler for the contentReady event.

onDisposing

A handler for the disposing event.

onInitialized

A handler for the initialized event. Executed only once, after the widget is initialized.

onOptionChanged

A handler for the optionChanged event.

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

The template to be used for rendering resource headers.

resources

Specifies an array of resources available in the scheduler.

rtlEnabled

Specifies whether or not the current component supports a right-to-left representation.

showAllDayPanel

Specifies whether or not the "All-day" panel is visible.

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 a start hour in the scheduler view's time interval.

tabIndex

Specifies the widget tab index.

textExpr

Specifies the name of the data source item field that holds the subject of an appointment.

timeCellTemplate

The template to be used for rendering 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

A Boolean value specifying whether or not the widget is visible.

width

Specifies the width of the widget.

Methods

This section describes methods used to manipulate the widget.

Name Description
addAppointment(appointment)

Add the appointment defined by the object passed as a parameter to the data associated with the widget.

beginUpdate()

Prevents the component from refreshing until the endUpdate() method is called.

defaultOptions(rule)

Specifies the device-dependent default configuration options for this component.

deleteAppointment(appointment)

Deletes the appointment defined by the parameter from the the data associated with the widget.

element()

Returns the root HTML element of the widget.

endUpdate()

Enables the component to refresh after the beginUpdate() method call.

focus()

Sets focus on the widget.

getDataSource()

Allows you to get the DataSource instance.

getEndViewDate()

Returns the end date of the current view.

getStartViewDate()

Returns the start date of the current view.

hideAppointmentPopup(saveChanges)

Hides an appointment details popup.

hideAppointmentTooltip()

Hides an appointment tooltip.

instance()

Returns an instance of this component class.

off(eventName)

Detaches all event handlers from the specified event.

off(eventName, eventHandler)

Detaches a particular event handler from the specified event.

on(eventName, eventHandler)

Subscribes to a specified event.

on(events)

Subscribes to the specified events.

option()

Returns the configuration options of this component.

option(optionName)

Gets the value of the specified configuration option of this component.

option(optionName, optionValue)

Sets a value to the specified configuration option of this component.

option(options)

Sets one or more options of this component.

registerKeyHandler(key, handler)

Registers a handler when a specified key is pressed.

repaint()

Redraws the widget.

scrollToTime(hours, minutes, date)

Scrolls the scheduler work space to the specified time of the specified day.

showAppointmentPopup(appointmentData, createNewAppointment, currentAppointmentData)

Displays the Appointment Details popup.

showAppointmentTooltip(appointmentData, target, currentAppointmentData)

Displays the appointment tooltip for the specified target element.

updateAppointment(target, appointment)

Updates the appointment specified by the first method parameter by the appointment object specified by the second method parameter in the the data associated with the widget.

Events

This section describes events fired by this widget.

Name Description
appointmentAdded

Fires after an appointment has been added to the data source.

appointmentAdding

Fires before an appointment is added to the data source.

appointmentClick

Fires after an appointment has been clicked.

appointmentDblClick

Fires after an appointment has been double clicked.

appointmentDeleted

Fires after an appointment has been deleted from the data source.

appointmentDeleting

Fires before an appointment is deleted from the data source.

appointmentFormCreated

Fires after an edit form has been created for an appointment.

appointmentRendered

Fires after an appointment is rendered.

appointmentUpdated

Fires after an appointment has been updated in the data source.

appointmentUpdating

Fires before an appointment is updated in the data source.

cellClick

Fires after a view cell has been clicked.

contentReady

Fires when the widget content is ready.

disposing

Fires when the widget is being removed.

initialized

Raised only once, after the widget is initialized.

optionChanged

Fires after an option of the component is changed.

Default Appointment Template

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

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.

See Also

Default Tooltip Template

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

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.

See Also