Vue Scheduler API

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

import DxScheduler from "devextreme-vue/scheduler"

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 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)
)
See Also

View Demo Watch Video

Configuration

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.

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.

dataCellTemplate

Specifies a custom template for table cells.

dataSource

Specifies the origin of data for the widget.

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

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.

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. In the "day", "week" and "workweek" views, this option applies only to all-day appointments.

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. Executed when the widget's content is ready. This handler may be executed multiple times during the widget's lifetime depending on the number of times its content changes.

onDisposing

A handler for the disposing event. Executed when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only.

onInitialized

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

onOptionChanged

A handler for the optionChanged event. Executed after an option of the widget 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.

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

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.

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. Call it if you made modifications that changed the widget's state to invalid.

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

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

Raised when the widget's content is ready.

disposing

Raised when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only.

initialized

Raised only once, after the widget is initialized.

optionChanged

Raised after a widget option is changed.

See Also

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.

See Also

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.

See Also