Configuration

An object defining configuration options for the widget.

accessKey

Specifies the shortcut key that sets focus on the widget.

Type:

String

Default Value: null

The value of this option will be passed to the accesskey attribute of the HTML element that underlies 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.

Type:

String

Default Value: 'allDay'

appointmentTemplate

The template to be used for rendering appointments.

Type:

template

Function parameters:
itemData:

Object

The current appointment's data.

itemIndex:

Number

The current appointment's index.

itemElement:

Element (jQuery or HTML)

The current appointment's container.

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: 'item'

If you use the Angular, AngularJS or Knockout library, you can implement this template with the dxTemplate markup component. This template's binding context depends on the library you use.

Angular

In Angular apps, an item's object and index extend the standard binding context (a component instance). Access the former using the input variable that is declared after the let and before of keywords, and the latter by the variable that is set to the index property.

HTML
TypeScript
<dx-scheduler ...
    appointmentTemplate="appointmentTemplate">
    <div *dxTemplate="let appointment of 'appointmentTemplate'; let i = index">
        <div class="appointment-header">[{{i}}] {{appointment.text}}</div>
        <div class="appointment-time">{{appointment.startDate}} - {{appointment.endDate}}</div>
    </div>
</dx-scheduler>
import { DxSchedulerModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
AngularJS

In AngularJS apps, an item's object and index extend the standard binding context (the scope). Access the former using an alias that you specify in the dx-item-alias directive, and the latter the $index variable. Use AngularJS binding variables if you need to access another binding context from the template.

HTML
<div dx-scheduler="{ 
    ...
    appointmentTemplate: 'appointment'
}" dx-item-alias="appItem">
    <div data-options="dxTemplate: {name: 'appointment'}" style="padding: 0;">
        <div class="appointment-header">{{appItem.text}}</div>
        <div class="appointment-time">{{appItem.startDate}} - {{appItem.endDate}}</div>
    </div>
</div>

View Demo

See Also
Show Example:
AngularJS
Knockout
jQuery

appointmentTooltipTemplate

The template to be used for rendering an appointment tooltip.

Type:

template

Function parameters:
appointmentData:

Object

The data of the appointment whose tooltip is rendered.

contentElement:

Element (jQuery or HTML)

The appointment's container.

Return Value:

String

|

jQuery

A template name or container.

Default Value: 'appointmentTooltip'

A binding context of an appointment tooltip template is the data source object that corresponds to the currently rendered appointment.

Angular

Use a variable that is declared in the template via the let keyword to access appointment object fields in Angular apps.

HTML
TypeScript
<dx-scheduler ...         
    appointmentTooltipTemplate="appointmentTooltipTemplate">
     <div *dxTemplate="let showtime of 'appointmentTooltipTemplate'">
        <div class='movie-tooltip'>
            <img [src]="getMovieById(showtime.movieId).image" />
            <div class='movie-info'>
                <div class='movie-title'>
                    {{getMovieById(showtime.movieId).text + ' (' + getMovieById(showtime.movieId).year + ')'}}
                </div>
                <div>
                    {{'Director: ' + getMovieById(showtime.movieId).director}}
                </div>
                <div>
                    {{'Duration: ' + getMovieById(showtime.movieId).duration + ' minutes'}}
                </div>
            </div><br />
            <dx-button text='Edit details' (onClick)='editDetails(showtime)'>
            </dx-button>
        </div>
    </div>
</dx-scheduler>
import { DxSchedulerModule, DxButtonModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule,
        DxButtonModule
    ],
    // ...
})
AngularJS

In AngularJS apps, if you need to access appointment object fields within a template, use a variable whose name is assigned to the dx-item-alias directive. Add the directive to the widget element to specify an alias to the root object. Without this directive, appointment object fields are beyond reach. To access another binding context within an appointment tooltip template, use AngularJS binding variables.

HTML
<div id="scheduler" dx-scheduler="options" dx-item-alias="showtime">
    <div data-options="dxTemplate: {name: 'tooltip-template'}">
        <div class='movie-tooltip' ng-init="movieData = getMovieById(showtime.movieId)">
            <img ng-src="{{movieData.image}}" />
            <div class='movie-info'>
                <div class='movie-title'>
                    {{movieData.text + ' (' + movieData.year + ')'}}
                </div> 
                <div>
                    {{'Director: ' + movieData.director}}
                </div>
                <div>
                    {{'Duration: ' + movieData.duration + ' minutes'}}
                </div>
            </div><br />
            <div dx-button = "{
                text: 'Edit details',
                onClick: 'editDetails(showtime)'
            }"></div>
        </div>
    </div>
</div>

View Demo

See Also

cellDuration

Specifies cell duration in minutes.

Type:

Number

Default Value: 30

crossScrollingEnabled

Specifies whether or not an end-user can scroll the view in both directions at the same time.

Type:

Boolean

Default Value: false

This option is useful when displaying Scheduler on narrow screens.

currentDate

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

Type:

Date

|

Number

|

String

Default Value: new Date()

This is the date which is displayed when rendering the widget. Although, an end-user can change the current date by using the Date Navigator.

Show Example:
AngularJS
Knockout
jQuery

currentView

Specifies the currently displayed view. Accepts the view's name or type.

Type:

String

Default Value: 'day'
Accepted Values: 'day' | 'week' | 'workWeek' | 'month' | 'timelineDay' | 'timelineWeek' | 'timelineWorkWeek' | 'timelineMonth' | 'agenda'

In all situations when more than one view meets the currentView condition, the first matching view from the views array takes precedence.

When using the widget as an ASP.NET MVC Control, specify this option using the SchedulerViewType enum. This enum accepts the following values: Day, Week, WorkWeek, Month, TimelineDay, TimelineWeek, TimelineWorkWeek, TimelineMonth and Agenda.

See Also
Show Example:
AngularJS
Knockout
jQuery

dataCellTemplate

The template to be used for rendering table cells.

Type:

template

Function parameters:
itemData:

Object

The current table cell's data.

itemIndex:

Number

The current table cell's index.

itemElement:

Element (jQuery or HTML)

The current table cell's container.

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: null

The binding context of a cell template is the object that corresponds to the currently rendered table cell.

So, in the Knockout approach, you can bind template elements to the cell object fields. To access another binding context within a template, use Knockout binding variables.

In the AngularJS approach, if you need to access cell object fields within a template, use a variable whose name is assigned to the dx-item-alias directive. Add the directive to the widget element to specify an alias to the root object. Without this directive, the fields of cell object are unavailable. To access another binding context within a table cell template, use Angular binding variables.

NOTE
There is no dataCellTemplate in the agenda view.

View Demo

See Also

dataSource

Specifies the origin of data for the widget.

This option accepts one of the following.

  • Array of objects
    A simple JavaScript array containing a collection of plain objects.

  • URL
    A URL to JSON data or to a service returning data in JSON format.

  • DataSource or its configuration object
    A DataSource is an object that provides a handy API for data processing. A DataSource is a stateful object, which means that it saves data processing settings and applies them each time data is loaded. All underlying data access logic of a DataSource is isolated in a Store. A Store provides an API for reading and modifying data. Unlike the DataSource, a Store is a stateless object.

To display appointments, a default template can be used. This template is based on the data source fields that are listed in the Default Item Template section of the widget's API. Alternatively, you can implement a custom template.

View Demo

See Also
Show Example:
AngularJS
Knockout
jQuery

dateCellTemplate

The template used for rendering day scale items.

Type:

template

Function parameters:
itemData:

Object

The data of the current date scale item.

itemIndex:

Number

The item's index.

itemElement:

Element (jQuery or HTML)

The item's container.

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: null

A binding context of a date template is an object that corresponds to a currently rendered item of the day scale.

Angular

Use a variable that is declared in the template via the let keyword to access day scale item fields in Angular apps.

HTML
TypeScript
<dx-scheduler ...
    dateCellTemplate="dateTemplate">
    <div *dxTemplate="let date of 'dateTemplate'">
        <div class="date">{{date.text}}</div>
    </div>
</dx-scheduler>
import { DxSchedulerModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
AngularJS

In the AngularJS apps, if you need to access day scale item fields within a template, use a variable whose name is assigned to the dx-item-alias directive. Add the directive to the widget element to specify an alias to the root object. Without this directive, object fields are unavailable. To access another binding context within a date scale template, use Angular binding variables.

HTML
<div dx-scheduler="{ 
    ...
    dateCellTemplate: 'dateTemplate'
}" dx-item-alias="item">
    <div data-options="dxTemplate: {name: 'dateTemplate'}">
        <div class="date">{{item.text}}</div>
    </div>
</div>
NOTE
There is no dateCellTemplate in such views as 'day' and 'timelineDay'.
See Also

dateSerializationFormat

Specifies the date-time values' serialization format. Use it only if you do not specify the dataSource at design time.

Type:

String

Default Value: undefined

Without a data source, the widget cannot detect the date-time values' format. In this case, specify the dateSerializationFormat option that supports the following formats:

  • "yyyy-MM-dd" - a local date

  • "yyyy-MM-ddTHH:mm:ss" - local date and time

  • "yyyy-MM-ddTHH:mm:ssZ" - the UTC date and time

  • "yyyy-MM-ddTHH:mm:ssx" - date and time with a timezone

This option applies only if the forceIsoDateParsing field is set to true in the global configuration object.

descriptionExpr

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

Type:

String

Default Value: 'description'

disabled

Specifies whether the widget responds to user interaction.

Type:

Boolean

Default Value: false

dropDownAppointmentTemplate

The template to be used for rendering appointments in the appointment collector's drop-down list.

Type:

template

Function parameters:
itemData:

Object

The current appointment's object.

itemIndex:

Number

The current appointment's index.

itemElement:

Element (jQuery or HTML)

The current appointment's container.

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: 'dropDownAppointment'

This template's binding context is the object that corresponds to the currently rendered appointment.

jQuery
JavaScript
$(function () {
    $("#scheduler").dxScheduler({
        // ...
        dataSource: [{
            text: 'Meeting customers',
            startDate: new Date(2017, 4, 10, 11, 0),
            endDate: new Date(2017, 4, 10, 13, 0),
            imgSrc: "images/1-small.png"

        }, {
            text: 'Summing up the results',
            startDate: new Date(2017, 4, 11, 12, 0),
            endDate: new Date(2017, 4, 11, 13, 0),
            imgSrc: "images/2-small.png"
        },
        // ...
        ],
        dropDownAppointmentTemplate: function (data, index) {
                return $("<div />").append(
                    $("<img />").attr("src", data.imgSrc),
                    $("<p />").text(data.text)
                            .css("display", "inline-block")
                            .css("font-style", (index % 2 == 0) ? "italic" : "normal")
                );
        }
    });
});
Angular
HTML
TypeScript
<dx-scheduler ...
    [dataSource]="appointments"
    dropDownAppointmentTemplate="ddAppointmentTemplate">
    <div *dxTemplate="let appointment of 'ddAppointmentTemplate'; let i = index">
        <img src="{{appointment.imgSrc}}"/>
        <div 
            style="display:inline-block" 
            [style.font-style]="i % 2 == 0 ? 'italic' : 'normal'">
            {{appointment.text}}
        </div>
    </div>
</dx-scheduler>
import { DxSchedulerModule } from 'devextreme-angular';
// ...
export class AppComponent {
    appointments = [{
        text: 'Meeting customers',
        startDate: new Date(2017, 4, 10, 11, 0),
        endDate: new Date(2017, 4, 10, 13, 0),
        imgSrc: "images/1-small.png"

    }, {
        text: 'Summing up the results',
        startDate: new Date(2017, 4, 11, 12, 0),
        endDate: new Date(2017, 4, 11, 13, 0),
        imgSrc: "images/2-small.png"
    },
    // ...
    ];
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
See Also

editing

Specifies which editing operations an end-user can perform on appointments.

Type:

Boolean

|

Object

Default Value: true

elementAttr

Specifies the attributes to be attached to the widget's root element.

Type:

Object

Default Value: {}

You can configure this option in an ASP.NET MVC Control as follows:

Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .ElementAttr("class", "class-name")
    // ===== or =====
    .ElementAttr(new {
        @id = "elementId",
        @class = "class-name"
    })
    // ===== or =====
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" }
    })

)
@(Html.DevExtreme().WidgetName() _
    .ElementAttr("class", "class-name")
    ' ===== or =====
    .ElementAttr(New With {
        .id = "elementId",
        .class = "class-name"
    })
    ' ===== or =====
    .ElementAttr(New Dictionary(Of String, Object) From {
        { "id", "elementId" },
        { "class", "class-name" }
    })
)

endDateExpr

Specifies the name of the data source item field that defines the ending of an appointment.

Type:

String

Default Value: 'endDate'

endDateTimeZoneExpr

Specifies the name of the data source item field that defines the timezone of the appointment end date.

Type:

String

Default Value: 'endDateTimeZone'

endDayHour

Specifies an end hour in the scheduler view's time interval.

Type:

Number

Default Value: 24

firstDayOfWeek

Specifies the first day of a week. Does not apply to the agenda view.

Type:

Number

Default Value: undefined
Accepted Values: 0 | 1 | 2 | 3 | 4 | 5 | 6

This option can accept a value from 0 to 6:

  • 0 - Sunday
  • 1 - Monday
  • 2 - Tuesday
  • 3 - Wednesday
  • 4 - Thursday
  • 5 - Friday
  • 6 - Saturday

The value provided by the culture settings is used by default.

When using the widget as an ASP.NET MVC Control, specify this option using the FirstDayOfWeek enum. This enum accepts the following values: Sunday, Monday, Tuesday, Wednesday, Thursday, Friday and Saturday.

focusStateEnabled

Specifies whether the widget can be focused using keyboard navigation.

Type:

Boolean

Default Value: false
Default for generic: true

groups

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

Type:

Array<String>

Default Value: []

The array elements should be strings specifying the field field of the resource kind objects.

jQuery
JavaScript
var resources = [
    { field: 'room', dataSource: roomsDataSource },
    { field: 'teacher', dataSource: teachersDataSource }
];
var schedulerOptions = {
    dataSource: appointments,
    resources: resources,
    groups: ['room', 'teacher']
    //...
}
Angular
HTML
TypeScript
<dx-scheduler
    [dataSource]="appointments"
    [resources]="resources"
    [groups]="['room', 'teacher']">
</dx-scheduler>
import { DxSchedulerModule } from 'devextreme-angular';
// ...
export class AppComponent  {
    // ...
    resources = [
        { field: 'room', dataSource: this.roomsDataSource },
        { field: 'teacher', dataSource: this.teachersDataSource }
    ];
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})

To group appointments by resources of one kind, for instance to group appointments that use particular rooms in an office, assign an array with a single element to the groups option. To group appointments by several resource kinds, assign an array of elements. Each element will represent a resource by which appointments will be grouped. Each resource will be nested to the resource represented by the previous element in the groups array.

View Demo

Show Example:
AngularJS
Knockout
jQuery

height

Specifies the widget's height.

Type:

Number

|

String

|

function

Return Value:

Number

|

String

The widget's height.

Default Value: undefined

This option accepts a value of one of the following types.

  • Number
    The height of the widget in pixels.

  • String
    A CSS-accepted measurement of height. For example, "55px", "80%", "auto", "inherit".

  • Function
    A function returning either of the above. For example:

    JavaScript
    height: function() {
        return window.innerHeight / 1.5;
    }

hint

Specifies text for a hint that appears when a user pauses on the widget.

Type:

String

Default Value: undefined

horizontalScrollingEnabled

Deprecated

Use the crossScrollingEnabled option instead.

indicatorUpdateInterval

Specifies the time interval between when the date-time indicator changes its position, in milliseconds.

Type:

Number

Default Value: 300000

max

The latest date the widget allows you to select.

Type:

Date

|

Number

|

String

Default Value: undefined

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.

Type:

Number

|

String

Default Value: 'auto'
Accepted Values: 'auto' | 'unlimited'

This option accepts the following values:

  • "unlimited"
    The widget resizes the appointments without a limit to fit them into a cell.
  • "auto"
    The widget narrows the appointments down to 20 pixels in height. If they still do not fit into the cell, the widget aggregates them in an appointment collector.
  • Number
    The number of appointments allowed in a single cell. Appointments are aggregated in an appointment collector when this number is exceeded.

min

The earliest date the widget allows you to select.

Type:

Date

|

Number

|

String

Default Value: undefined

noDataText

The text or HTML markup displayed by the widget if the item collection is empty. Available for the Agenda view only.

Type:

String

Default Value: 'No data to display'

Show Example:
AngularJS
Knockout
jQuery

onAppointmentAdded

A handler for the appointmentAdded event.

Type:

function

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

The widget's container.

model:

Object

The model data. Available only if Knockout is used.

appointmentData:

Object

The added appointment's data.

error: Error

The standard Error object that defines the occurred error.

Default Value: null

Assign a function to perform a custom action after an appointment has been added to the widget's data source.

onAppointmentAdding

A handler for the AppointmentAdding event.

Type:

function

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

The widget's container.

model:

Object

The model data. Available only if Knockout is used.

appointmentData:

Object

The data of the appointment to be added.

cancel:

Boolean

|

Promise<Boolean> (jQuery or native)

Allows you to cancel appointment adding.
If you pass a Promise to this field, appointment adding is continued or canceled once the Promise has been resolved.

Default Value: null

Assign a function to perform a custom action before an appointment is added to the widget's data source.

Show Example:
AngularJS
Knockout
jQuery

onAppointmentClick

A handler for the appointmentClick event.

Type:

function

|

String

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

The widget's container.

model:

Object

The model data. Available only if Knockout is used.

appointmentData:

Object

The initial appointment.

targetedAppointmentData:

Object

The clicked appointment.

appointmentElement:

Element (jQuery or HTML)

The clicked appointment's container.

jQueryEvent:

jQuery.Event

The jQuery event that caused the handler execution. Deprecated in favor of the event field.

event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery.

cancel:

Boolean

Allows you to cancel execution of the default appointment click handler.

Default Value: null

In case of recurring appointments or appointments with multiple resources, you may want to obtain information about the currently selected appointment, not the initial appointment. For this purpose, use the targetedAppointmentData field of the function parameter. Otherwise, use the appointmentData field.

For example, there is a recurring appointment that starts on July 18 at 8:00 AM, repeats every day and belongs to two owners:

JavaScript
var appointments = [
    ...
    {
        startDate: new Date(2016, 6, 18, 8),
        endDate: new Date(2016, 6, 18, 9),
        ownerId: [1, 2],
        recurrenceRule: "FREQ=DAILY"
    }
];

If you click an appointment from the recurring series, for example the second appointment belonging to the second owner, the following information is presented in the appointmentData and targetedAppointmentData fields.

JavaScript
onAppointmentClick: function(e) {
    /* The initial appointment data
        {
            startDate: new Date(2016, 6, 18, 8), 
            endDate: new Date(2016, 6, 18, 9),
            ownerId: [1, 2],
            recurrenceRule: "FREQ=DAILY"
        }
    */
    var appointmentData = e.appointmentData;

    /* The clicked appointment data
        {
            startDate: new Date(2016, 6, 19, 8), 
            endDate: new Date(2016, 6, 19, 9),
            ownerId: 2,
            recurrenceRule: "FREQ=DAILY"
        }
    */
    var targetedAppointmentData = e.targetedAppointmentData;
}

Assign a function to perform a custom action after an appointment has been clicked.

onAppointmentDblClick

A handler for the appointmentDblClick event.

Type:

function

|

String

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

The widget's container.

model:

Object

The model data. Available only if Knockout is used.

appointmentData:

Object

The initial appointment.

targetedAppointmentData:

Object

The clicked appointment.

appointmentElement:

Element (jQuery or HTML)

The clicked appointment's container.

jQueryEvent:

jQuery.Event

The jQuery event that caused the handler execution. Deprecated in favor of the event field.

event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery.

cancel:

Boolean

Allows you to cancel execution of the default appointment click handler.

Default Value: null

In case of recurring appointments or appointments with multiple resources, you may want to obtain information about the currently selected appointment, not the initial appointment. For this purpose, use the targetedAppointmentData field of the function parameter. Otherwise, use the appointmentData field.

For example, there is a recurring appointment that starts on July 18 at 8:00 AM, repeats every day and belongs to two owners:

JavaScript
var appointments = [
    ...
    {
        startDate: new Date(2016, 6, 18, 8),
        endDate: new Date(2016, 6, 18, 9),
        ownerId: [1, 2],
        recurrenceRule: "FREQ=DAILY"
    }
];

If you double-click an appointment from the recurring series, for example the second appointment belonging to the second owner, the following information is presented in the appointmentData and targetedAppointmentData fields.

JavaScript
onAppointmentDblClick: function(e) {
    /* The initial appointment data
        {
            startDate: new Date(2016, 6, 18, 8), 
            endDate: new Date(2016, 6, 18, 9),
            ownerId: [1, 2],
            recurrenceRule: "FREQ=DAILY"
        }
    */
    var appointmentData = e.appointmentData;

    /* The clicked appointment data
        {
            startDate: new Date(2016, 6, 19, 8), 
            endDate: new Date(2016, 6, 19, 9),
            ownerId: 2,
            recurrenceRule: "FREQ=DAILY"
        }
    */
    var targetedAppointmentData = e.targetedAppointmentData;
}

Assign a function to perform a custom action after an appointment has been double clicked.

onAppointmentDeleted

A handler for the appointmentDeleted event.

Type:

function

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

The widget's container.

model:

Object

The model data. Available only if Knockout is used.

appointmentData:

Object

The deleted appointment's data.

error: Error

The standard Error object that defines the occurred error.

Default Value: null

Assign a function to perform a custom action after an appointment has been deleted from the widget's data source.

onAppointmentDeleting

A handler for the AppointmentDeleting event.

Type:

function

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

The widget's container.

model:

Object

The model data. Available only if Knockout is used.

appointmentData:

Object

The data of the appointment to be deleted.

cancel:

Boolean

|

Promise<Boolean> (jQuery or native)

Allows you to prevent the appointment from being deleted.
If you pass a Promise to this field, appointment deleting is continued or canceled once the Promise has been resolved.

Default Value: null

Assign a function to perform a custom action before an appointment is deleted from the widget's data source.

Show Example:
AngularJS
Knockout
jQuery

onAppointmentFormCreated

A handler for the appointmentFormCreated event.

Type:

function

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

The widget's container.

model:

Object

The model data. Available only if Knockout is used.

appointmentData:

Object

The data of the appointment for which a form is created.

form:

Form

The form's configuration.

Default Value: null

Assign a function to perform a custom action after an edit form has been created for an appointment.

View Demo Watch Video

onAppointmentRendered

A handler for the appointmentRendered event.

Type:

function

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

The widget's container.

model:

Object

The model data. Available only if Knockout is used.

appointmentData:

Object

The initial appointment's data.

targetedAppointmentData:

Object

The current appointment's data.

appointmentElement:

Element (jQuery or HTML)

The appointment's container.

Default Value: null

In case of recurring appointments or appointments with multiple resources, you may want to obtain information about the appointment to be rendered, not the initial appointment. For this purpose, use the targetedAppointmentData field of the function parameter. Otherwise, use the appointmentData field.

For example, there is a recurring appointment that starts on July 18 at 8:00 AM, repeats every day and belongs to two owners:

JavaScript
var appointments = [
    ...
    {
        startDate: new Date(2016, 6, 18, 8),
        endDate: new Date(2016, 6, 18, 9),
        ownerId: [1, 2],
        recurrenceRule: "FREQ=DAILY"
    }
];

After the appointments from recurring series is rendered, for example the second appointment belonging to the second owner, the following information is presented in the appointmentData and targetedAppointmentData fields.

JavaScript
onAppointmentRendered: function(e) {
    /* The initial appointment data
        {
            startDate: new Date(2016, 6, 18, 8), 
            endDate: new Date(2016, 6, 18, 9),
            ownerId: [1, 2],
            recurrenceRule: "FREQ=DAILY"
        }
    */
    var appointmentData = e.appointmentData;

    /* The clicked appointment data
        {
            startDate: new Date(2016, 6, 19, 8), 
            endDate: new Date(2016, 6, 19, 9),
            ownerId: 2,
            recurrenceRule: "FREQ=DAILY"
        }
    */
    var targetedAppointmentData = e.targetedAppointmentData;
}

Assign a function to perform a custom action after an appointment is rendered.

onAppointmentUpdated

A handler for the appointmentUpdated event.

Type:

function

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

The widget's container.

model:

Object

The model data. Available only if Knockout is used.

appointmentData:

Object

The updated appointment's data.

error: Error

The standard Error object that defines the occurred error.

Default Value: null

Assign a function to perform a custom action after an appointment has been updated in the widget's data source.

onAppointmentUpdating

A handler for the AppointmentUpdating event.

Type:

function

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

The widget's container.

model:

Object

The model data. Available only if Knockout is used.

oldData:

Object

The data of the appointment to be updated.

newData:

Object

The appointment with new data.

cancel:

Boolean

|

Promise<Boolean> (jQuery or native)

Allows you to prevent an appointment update.
If you pass a Promise to this field, the appointment updating is continued or canceled once the Promise has been resolved.

Default Value: null

Assign a function to perform a custom action before an appointment is updated in the widget's data source.

Show Example:
AngularJS
Knockout
jQuery

onCellClick

A handler for the cellClick event.

Type:

function

|

String

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

The widget's container.

model:

Object

The model data. Available only if Knockout is used.

cellData:

Object

The clicked cell's data.

cellElement:

Element (jQuery or HTML)

The clicked cell's container.

jQueryEvent:

jQuery.Event

The jQuery event that caused the handler execution. Deprecated in favor of the event field.

event:

Event (jQuery or dxEvent)

The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery.

cancel:

Boolean

Allows you to cancel execution of the default cell click handler.

Default Value: null

Assign a function to perform a custom action after a view cell has been clicked.

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.

Type:

function

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

The widget's container.

model:

Object

The model data. Available only when using Knockout.

Default Value: null

If data displayed by the widget is specified using a DataSource instance, the contentReady event fires each time the load() method of the DataSource instance is called, as well as when the widget content is ready or an appointment is modified.

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.

Type:

function

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

The widget's container.

model:

Object

The model data. Available only if you use Knockout.

Default Value: null

onInitialized

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

Type:

function

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

element:

Element (jQuery or HTML)

The widget's container.

Default Value: null

You cannot access widget elements in this handler because it is executed before they are ready. Use the onContentReady handler instead.

onOptionChanged

A handler for the optionChanged event. Executed after an option of the widget is changed.

Type:

function

Function parameters:
e:

Object

Information about the event.

Object structure:
component:

Object

The widget's instance.

name:

String

The option's short name.

fullName:

String

The option's full name.

value: any

The option's new value.

element:

Element (jQuery or HTML)

The widget's container.

model:

Object

The model data. Available only if you use Knockout.

Default Value: null

recurrenceEditMode

Specifies the edit mode for recurring appointments.

Type:

String

Default Value: 'dialog'
Accepted Values: 'dialog' | 'series' | 'occurrence'

This option accepts the following values.

  • 'dialog'
    Displays a dialog that suggests to a user to choose between editing the entire series or only the current appointment.

  • 'series'
    Enables an end-user to edit only the entire appointment series.

  • 'occurrence'
    Enables an end-user to edit only the current appointment.

When using the widget as an ASP.NET MVC Control, specify this option using the SchedulerRecurrenceEditMode enum. This enum accepts the following values: Dialog, Series and Occurrence.

recurrenceExceptionExpr

Specifies the name of the data source item field that defines exceptions for the current recurring appointment.

Type:

String

Default Value: 'recurrenceException'

recurrenceRuleExpr

Specifies the name of the data source item field that defines a recurrence rule for generating recurring appointments.

Type:

String

Default Value: 'recurrenceRule'

If the option value is null, the widget does not support recurring appointments. It displays only initial appointments without generating appointment series.

See Also

remoteFiltering

Specifies whether filtering is performed on the server or client side.

Type:

Boolean

Default Value: false
NOTE
If you use the CustomStore as a data source and the remoteFiltering option is set to false, the parameter of the load method does not contain the filter field.

resourceCellTemplate

The template to be used for rendering resource headers.

Type:

template

Function parameters:
itemData:

Object

The current resource header's data.

itemIndex:

Number

The current resource header's index.

itemElement:

Element (jQuery or HTML)

The current resource header's container.

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: null

A binding context of a resource template is the data source object that corresponds to the currently rendered resource header.

Angular

Use a variable that is declared in the template via the let keyword to access resource object fields in Angular apps.

HTML
TypeScript
<dx-scheduler ...
    [groups]="['priorityId']"
    [resources]="resources"
    resourceCellTemplate="resourceTemplate">
    <div *dxTemplate="let resource of 'resourceTemplate'">
        <img [src]="resource.image">
        <div class="resource-header">{{resource.text}}</div>
    </div>
</dx-scheduler>
import { DxSchedulerModule } from 'devextreme-angular';
// ...
export class AppComponent  { 
    // ...
    priorityData = [
        { text: "Low Priority", image: "img1.png", id: 1, color: "#1e90ff" },
        { text: "High Priority", image: "img2.png", id: 2, color: "#ff9747" }
    ];
    resources = [{ 
        field: "priorityId", 
        allowMultiple: false, 
        dataSource: this.priorityData, 
        label: "Priority" 
    }];
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
AngularJS

In the AngularJS apps, if you need to access resource object fields within a template, use a variable whose name is assigned to the dx-item-alias directive. Add the directive to the widget element to specify an alias to the root object. Without this directive, the fields of resource object are unavailable. To access another binding context within a resource template, use Angular binding variables.

HTML
JavaScript
<div dx-scheduler="options" dx-item-alias="item">
    <div data-options="dxTemplate: { name: 'resource' }">
        <img src="{{item.image}}">
        <div class="resource-header">{{item.text}}</div>
    </div>
</div>
var priorityData = [
    { text: "Low Priority", image: "img1.png", id: 1, color: "#1e90ff" },
    { text: "High Priority", image: "img2.png", id: 2, color: "#ff9747" }
];

var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
    $scope.options = { 
        // ...
        groups: ["priorityId"],
        resources: [{ 
            field: "priorityId", 
            allowMultiple: false, 
            dataSource: priorityData, 
            label: "Priority" 
        }],
        resourceCellTemplate: 'resource'
    };
});

View Demo

See Also

resources

Specifies an array of resources available in the scheduler.

Type:

Array<Object>

Default Value: []

Each element of this array is an object that defines a resource kind - a room, a car or any other resource kind. A resource kind object must have at least the following fields.

  • dataSource
    Specify the available resources of this kind (room1, room2, etc.).

  • fieldExpr
    The name of the appointment object field that specifies a resource of this kind (e.g., 'room').

There are more fields that can be specified within a resource kind object. They are listed below. For details on how to define a resource and assign it to scheduler appointments, refer to the Resources article.

View Demo

See Also

rtlEnabled

Switches the widget to a right-to-left representation.

Type:

Boolean

Default Value: false

When this option is set to true, the widget text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript
DevExpress.config({
    rtlEnabled: true
});

shadeUntilCurrentTime

Specifies whether to apply shading to cover the timetable up to the current time.

Type:

Boolean

Default Value: false

showAllDayPanel

Specifies the "All-day" panel's visibility. Setting this option to false hides the panel along with the all-day appointments.

Type:

Boolean

Default Value: true

showCurrentTimeIndicator

Specifies the current date-time indicator's visibility.

Type:

Boolean

Default Value: true

startDateExpr

Specifies the name of the data source item field that defines the start of an appointment.

Type:

String

Default Value: 'startDate'

startDateTimeZoneExpr

Specifies the name of the data source item field that defines the timezone of the appointment start date.

Type:

String

Default Value: 'startDateTimeZone'

startDayHour

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

Type:

Number

Default Value: 0

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

Type:

Number

Default Value: 0

The value of this option will be passed to the tabindex attribute of the HTML element that underlies the widget.

textExpr

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

Type:

String

Default Value: 'text'

timeCellTemplate

The template to be used for rendering time scale items.

Type:

template

Function parameters:
itemData:

Object

The data of the current time scale item.

itemIndex:

Number

The item's index.

itemElement:

Element (jQuery or HTML)

The item's container.

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: null

A binding context of a time template is the object that corresponds to the currently rendered item of the time scale.

Angular

Use a variable that is declared in the template via the let keyword to access time scale item fields in Angular apps.

HTML
TypeScript
<dx-scheduler ...
    timeCellTemplate="timeCellTemplate">
    <div *dxTemplate="let time of 'timeCellTemplate'">
        <div class="time">{{time.text}}</div>
    </div>
</div>
import { DxSchedulerModule } from 'devextreme-angular';
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
AngularJS

In the AngularJS apps, if you need to access time scale item fields within a template, use a variable whose name is assigned to the dx-item-alias directive. Add the directive to the widget element to specify an alias to the root object. Without this directive, the fields of time scale item are unavailable. To access another binding context within a time scale template, use Angular binding variables.

HTML
<div dx-scheduler="{ 
    ...
    timeCellTemplate: 'timeTemplate'
}" dx-item-alias="item">
    <div data-options="dxTemplate: {name: 'timeTemplate'}">
        <div class="time">{{item.text}}</div>
    </div>
</div>
NOTE
There is no timeCellTemplate in such views as 'month', 'timelineMonth' and 'agenda'.
See Also

timeZone

Specifies the timezone of the widget.

Type:

String

Default Value: ''

By default, the scheduler displays appointments in the current timezone. To define the timezone, specify the timeZone option.

The list of supported timezones is available in the list of IANA time zones.

View Demo

useDropDownViewSwitcher

Specifies whether a user can switch views using tabs or a drop-down menu.

Type:

Boolean

Default Value: false
Default for mobile: true

Using a drop-down menu makes the view switcher more compact.

views

Configures individual views.

Type:

Array<String>

Default Value: ['day', 'week']
Accepted Values: 'day' | 'week' | 'workWeek' | 'month' | 'timelineDay' | 'timelineWeek' | 'timelineWorkWeek' | 'timelineMonth' | 'agenda'

The option accepts an array of views to be available within the scheduler View Switcher. If you need to customize a view, add a configuration object for it to the array. The configuration options that you can specify are listed further in this documentation section. If a view does not need individual customization, just add its type to the array.

JavaScript
var schedulerOptions = {
    // . . .
    dataSource: schedulerData,
    startDayHour: 9,
    endDayHour: 18,
    views: [
        { type: "day", startDayHour: 7, endDayHour: 22 },
        { type: "workWeek", cellDuration: 60 },
        "week",
        "agenda"
    ]
};

Set a default view by using the currentView option.
For more information on scheduler views, refer to the Views guide.

When using the widget as an ASP.NET MVC Control, specify this option using the SchedulerViewType enum. This enum accepts the following values: Day, Week, WorkWeek, Month, TimelineDay, TimelineWeek, TimelineWorkWeek, TimelineMonth and Agenda.

View Demo Watch Video

Show Example:
AngularJS
Knockout
jQuery

visible

Specifies whether the widget is visible.

Type:

Boolean

Default Value: true

width

Specifies the widget's width.

Type:

Number

|

String

|

function

Return Value:

Number

|

String

The widget's width.

Default Value: undefined

This option accepts a value of one of the following types.

  • Number
    The width of the widget in pixels.

  • String
    A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

  • Function
    A function returning either of the above. For example:

    JavaScript
    width: function() {
        return window.innerWidth / 1.5;
    }