Scheduler

A widget that displays scheduled data using different views and provides the capability to load, add and edit appointments.

The dxScheduler widget allows appointments from a local or remote storage to be scheduled and displayed. Appointments can be shown using one of the views provided by the scheduler widget. For instance, in the 'day' view, the widget displays a single day at a time with the appointments that are assigned to this day. In addition to different views, the widget allows you to create different types of appointments - recurring/non-recurring, time-limited/all-day, with/without resources.

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

  • jQuery
    Use the dxScheduler jQuery plug-in.

    HTML
    <div id="scheduler">
    JavaScript
    $("#scheduler").dxScheduler({
        dataSource: schedulerDataSource
    });
  • Knockout
    Add a div element and apply the dxScheduler binding to this element.

    HTML
    <div data-bind="dxScheduler: {
        dataSource: schedulerDataSource
    }">
    </div>
  • Angular
    Add a div element and apply the dx-scheduler directive to this element.

    HTML
    <div dx-scheduler="{
        dataSource: schedulerDataSource
    }">
    </div>

Note that DevExtreme widgets require you to link the jQuery and Globalize libraries to your application. If you use the Knockout or Angular approach, the Knockout or Angular library is also required.

See Also

The dataSource option takes on an array of appointment objects, as well as the DataSource object that requests appointment data from the associated Store (local, OData or a custom one). The appointment objects loaded to the widget's data source may have a particular set of fields that allow the widget to use a default appointment template. In case of custom data source fields, you can define a custom template for displaying appointments.

See Also

Refer to the Scheduler UI Widgets guides for more information on working with the dxScheduler widget.

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.

appointmentTemplate

The template to be used for rendering appointments.

currentDate

Specifies a date displayed on the current scheduler view by default.

currentView

Specifies the view used in the scheduler by default.

dataSource

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

disabled

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

editing

Specifies whether the scheduler data can be edited at runtime.

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.

onAppointmentAdded

A handler for the appointmentAdded event.

onAppointmentAdding

A handler for the AppointmentAdding event.

onAppointmentDeleted

A handler for the appointmentDeleted event.

onAppointmentDeleting

A handler for the AppointmentDeleting event.

onAppointmentRendered

A handler for the appointmentRendered event.

onAppointmentUpdated

A handler for the appointmentUpdated event.

onAppointmentUpdating

A handler for the AppointmentUpdating event.

onDisposing

A handler for the disposing event.

onInitialized

A handler for the initialized event.

onOptionChanged

A handler for the optionChanged event.

resources

Specifies an array of resources available in the scheduler.

rtlEnabled

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

startDayHour

Specifies a start hour in the scheduler view's time interval.

tabIndex

Specifies the widget tab index.

views

Lists the views to be available within the scheduler's View Selector.

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.

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)

Scrolls the scheduler work space to the specified time.

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

appointmentDeleted

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

appointmentDeleting

Fires before an appointment is deleted from the data source.

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.

disposing

Fires when the widget is being removed.

initialized

Fires when 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