JavaScript/jQuery Scheduler Options

Default Value: false

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:

Default Value: 'allDay'

appointmentCollectorTemplate

Specifies a custom template for cell overflow indicators.

Type:

Template Data:

Name	Type	Description
appointmentCount	Number	The count of hidden appointments.
isCompact	Boolean	Indicates whether the overflow indicator is compact.

Name

Type

Description

appointmentCount

The count of hidden appointments.

isCompact

Indicates whether the overflow indicator is compact.

Default Name: 'appointmentCollector'

jQuery

index.js

$(function() {
    $("#schedulerContainer").dxScheduler({
        // ...
        appointmentCollectorTemplate: function(data, $indicatorElement) {
            $indicatorElement.append(
                // Custom jQuery elements go here
            )
            // ===== or =====
            return /* your markup goes here */
        }
    });
});

Angular

app.component.html

app.module.ts

<dx-scheduler ... 
    appointmentCollectorTemplate="myTemplate">
    <div *dxTemplate="let data of 'myTemplate'">
        <!-- your markup goes here -->
    </div>
</dx-scheduler>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxSchedulerModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxSchedulerModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template>
    <DxScheduler ...
        appointment-collector-template="myTemplate">
        <template #myTemplate="{ data }">
            <!-- your markup goes here -->
        </template>
    </DxScheduler>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxScheduler } from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler
    },
    data() {
        return {
            // ...
        }
    }
}
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { Scheduler } from 'devextreme-react/scheduler';

const renderCellOverflowIndicator = (data) => {
    return (
        {/* your markup goes here */}
    );
}

class App extends React.Component {
    render() {
        return (
            <Scheduler ...
                appointmentCollectorRender={renderCellOverflowIndicator}
            />
        );
    }
}

export default App;

appointmentDragging

Configures appointment reordering using drag and drop gestures.

Type:

appointmentTemplate

Specifies a custom template for appointments.

Type:

Template Data:

Name	Type	Description
appointmentData	Object	The appointment's data object.
targetedAppointmentData	Object	The appointment's data object. The difference between this and appointmentData fields is explained in the onAppointmentClick description.

Name

Type

Description

appointmentData

The appointment's data object.

targetedAppointmentData

The appointment's data object.
The difference between this and appointmentData fields is explained in the onAppointmentClick description.

Default Name: 'item'

appointmentTooltipTemplate

Specifies a custom template for tooltips displayed when users click an appointment or cell overflow indicator.

Type:

Template Data:

Name	Type	Description
appointmentData	Object	The appointment's data object.
targetedAppointmentData	Object	The appointment's data object. The difference between this and appointmentData fields is explained in the onAppointmentClick description.

Name

Type

Description

appointmentData

The appointment's data object.

targetedAppointmentData

The appointment's data object.
The difference between this and appointmentData fields is explained in the onAppointmentClick description.

Default Name: 'appointmentTooltip'

cellDuration

Specifies cell duration in minutes. This property's value should divide the interval between startDayHour and endDayHour into even parts.

Type:

Default Value: 30

crossScrollingEnabled

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

Type:

Default Value: false

This property is useful when displaying Scheduler on narrow screens.

currentDate

Specifies the current date.

Type:

|

|

Default Value: new Date()

Raised Events: onOptionChanged

Users can change the current date in the Date Navigator:

Scheduler Date Navigator

To subscribe to changes of the current date, use the onOptionChanged handler.

currentView

Specifies the displayed view. Accepts name or type of a view available in the views array.

Type:

Default Value: 'day'

Raised Events: onOptionChanged

When more than one view matches the currentView value, the Scheduler displays the first matching view.

To subscribe to changes of the current view, use the onOptionChanged handler.

customizeDateNavigatorText

Customizes the date navigator's text.

Type:

Function parameters:

info:

Information about the date navigator.

Object structure:

Name	Type	Description
endDate	Date	The view interval's end date.
startDate	Date	The view interval's start date.
text	String	The text displayed in the date navigator.

Name

Type

Description

endDate

The view interval's end date.

startDate

The view interval's start date.

text

The text displayed in the date navigator.

Return Value:

The text that should be displayed.

Default Value: undefined

Scheduler Date Navigator

In the following code, the customizeDateNavigatorText function is used to show dates in the mm/dd/yyyy format (mm/yyyy for the "month" view):

jQuery

JavaScript

$(function() {
    var scheduler;
    $("#schedulerContainer").dxScheduler({
        // ...
        onInitialized: function(e) { scheduler = e.component; },
        customizeDateNavigatorText: function(e) {
            var formatOptions = { 
                year: 'numeric', 
                month: 'numeric', 
                day: 'numeric' 
            };
            var formattedStartDate = e.startDate.toLocaleString("en", formatOptions);
            var formattedEndDate = e.endDate.toLocaleString("en", formatOptions);
            var view = scheduler.option("currentView");
            if(view === "day" | "timelineDay") 
                return formattedStartDate;
            if(view === "month" ) 
                return e.startDate.toLocaleString("en", { year: 'numeric', month: 'numeric' });
            return formattedStartDate + " - " + formattedEndDate;
        }
    });
})

Angular

TypeScript

HTML

import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent  {
    currentView: string = "day";

    customizeDateNavigatorText = (e) => {
        let formatOptions = { 
            year: 'numeric', 
            month: 'numeric', 
            day: 'numeric' 
        };
        var formattedStartDate = e.startDate.toLocaleString("en", formatOptions);
        var formattedEndDate = e.endDate.toLocaleString("en", formatOptions);
        if(this.currentView === "day" | "timelineDay") 
            return formattedStartDate;
        if(this.currentView === "month" ) 
            return e.startDate.toLocaleString("en", { year: 'numeric', month: 'numeric' });
        return formattedStartDate + " - " + formattedEndDate;
    }
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})

<dx-scheduler ...
    [(currentView)]="currentView"
    [customizeDateNavigatorText]="customizeDateNavigatorText">
</dx-scheduler>

Vue

App.vue

<template>
    <DxScheduler ...
        v-model:current-view="currentView"
        :customize-date-navigator-text="customizeDateNavigatorText">
    </DxScheduler>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxScheduler } from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler
    },
    data() {
        return {
            currentView: 'day',
            // ...
        }
    },
    methods: {
        customizeDateNavigatorText(e) {
            const formatOptions = { 
                year: 'numeric', 
                month: 'numeric', 
                day: 'numeric' 
            };
            const formattedStartDate = e.startDate.toLocaleString('en', formatOptions);
            const formattedEndDate = e.endDate.toLocaleString('en', formatOptions);
            if(this.currentView === 'day' | 'timelineDay') 
                return formattedStartDate;
            if(this.currentView === 'month' ) 
                return e.startDate.toLocaleString('en', { year: 'numeric', month: 'numeric' });
            return formattedStartDate + ' - ' + formattedEndDate;
        }
    }
}
</script>

React

App.js

import React, { useCallback, useState } from 'react';

import 'devextreme/dist/css/dx.light.css';

import Scheduler from 'devextreme-react/scheduler';

const App = () => {
    const [currentView, setCurrentView] = useState('day');

    const onOptionChanged = useCallback((e) => {
        if(e.name === 'currentView') {
            setCurrentView(e.value);
        }
    }, [setCurrentView]);

    const customizeDateNavigatorText = useCallback((e) => {
        const formatOptions = { 
            year: 'numeric', 
            month: 'numeric', 
            day: 'numeric' 
        };
        const formattedStartDate = e.startDate.toLocaleString('en', formatOptions);
        const formattedEndDate = e.endDate.toLocaleString('en', formatOptions);
        if(currentView === 'day' | 'timelineDay') 
            return formattedStartDate;
        if(currentView === 'month' ) 
            return e.startDate.toLocaleString('en', { year: 'numeric', month: 'numeric' });
        return formattedStartDate + ' - ' + formattedEndDate;
    }, [currentView]);

    return (
        <Scheduler ...
            currentView={currentView}
            onOptionChanged={onOptionChanged}
            customizeDateNavigatorText={customizeDateNavigatorText}
        />
    );
}

export default App;

dataCellTemplate

Specifies a custom template for table cells.

Type:

Template Data:

The current table cell's data.

Default Name: null

NOTE

There is no dataCellTemplate in the agenda view.

dataSource

Binds the UI component to data.

Type:

Array<dxSchedulerAppointment>

|

|

Store

|

DataSource

|

DataSource Configuration

Default Value: null

The Scheduler works with collections of objects.

Depending on your data source, bind the Scheduler to data as follows. In each case, also specify the UI component's startDateExpr and endDateExpr properties. Optionally, set other properties with the Expr postfix.

Data Array
Assign the array to the dataSource option. View Demo
Read-Only Data in JSON Format
Set the dataSource property to the URL of a JSON file or service that returns JSON data.
OData
Implement an ODataStore.

Web API, PHP, MongoDB
Use one of the following extensions to enable the server to process data according to the protocol DevExtreme UI components use:

Then, use the createStore method to configure access to the server on the client as shown below. This method is part of DevExtreme.AspNet.Data.

jQuery

JavaScript

$(function() {
    let serviceUrl = "https://url/to/my/service";
    $("#schedulerContainer").dxScheduler({
        // ...
        dataSource: DevExpress.data.AspNet.createStore({
            key: "ID",
            loadUrl: serviceUrl + "/GetAction",
            insertUrl: serviceUrl + "/InsertAction",
            updateUrl: serviceUrl + "/UpdateAction",
            deleteUrl: serviceUrl + "/DeleteAction"
        })
    })
});

Angular

app.component.ts

app.component.html

app.module.ts

import { Component } from '@angular/core';
import CustomStore from 'devextreme/data/custom_store';
import { createStore } from 'devextreme-aspnet-data-nojquery';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    store: CustomStore;
    constructor() {
        let serviceUrl = "https://url/to/my/service";
        this.store = createStore({
            key: "ID",
            loadUrl: serviceUrl + "/GetAction",
            insertUrl: serviceUrl + "/InsertAction",
            updateUrl: serviceUrl + "/UpdateAction",
            deleteUrl: serviceUrl + "/DeleteAction"
        })
    }
}

<dx-scheduler ...
    [dataSource]="store">
</dx-scheduler>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxSchedulerModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxSchedulerModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Vue

App.vue

<template> 
    <DxScheduler ...
        :data-source="store" />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import CustomStore from 'devextreme/data/custom_store';
import { createStore } from 'devextreme-aspnet-data-nojquery';
import { DxScheduler } from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler
    },
    data() {
        const serviceUrl = "https://url/to/my/service";
        const store = createStore({
            key: "ID",
            loadUrl: serviceUrl + "/GetAction",
            insertUrl: serviceUrl + "/InsertAction",
            updateUrl: serviceUrl + "/UpdateAction",
            deleteUrl: serviceUrl + "/DeleteAction"
        });
        return {
            store
        }
    }
}
</script>

React

App.js

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import CustomStore from 'devextreme/data/custom_store';
import { createStore } from 'devextreme-aspnet-data-nojquery';
import Scheduler from 'devextreme-react/scheduler';

const serviceUrl = "https://url/to/my/service";
const store = createStore({
    key: "ID",
    loadUrl: serviceUrl + "/GetAction",
    insertUrl: serviceUrl + "/InsertAction",
    updateUrl: serviceUrl + "/UpdateAction",
    deleteUrl: serviceUrl + "/DeleteAction"
});

class App extends React.Component {
    render() {
        return (
            <Scheduler ...
                dataSource={store} />
        );
    }
}
export default App;

Any other data source
Implement a CustomStore. View Demo

Regardless of the data source on the input, the Scheduler always wraps it in the DataSource object. This object allows you to sort, filter, group, and perform other data shaping operations. To get its instance, call the getDataSource() method.

NOTE

Review the following notes about data binding:

If you wrap the store into the DataSource object explicitly, set the paginate property to false to prevent data from partitioning.
Data field names cannot be equal to this and should not contain the following characters: ., :, [, and ].
The stores and DataSource have methods to process and update data. However, the methods do not allow you to perform particular tasks (for example, replace the entire dataset, reconfigure data access at runtime). For such tasks, create a new array, store, or DataSource and assign it to the dataSource property as shown in the articles about changing properties in jQuery, Angular, React, and Vue.

dateCellTemplate

Specifies a custom template for day scale items.

Type:

Template Data:

The data of the current date scale item.

Default Name: null

NOTE

There is no dateCellTemplate in such views as "day" and "timelineDay".

dateSerializationFormat

Specifies the format in which date-time values should be sent to the server.

Type:

Web API Service Demo SignalR Service Demo

Default Value: undefined

Specify this property in the following cases:

The dataSource is empty or not set at design time. The dateSerializationFormat is needed, because the Scheduler cannot detect it automatically without a data source.
You use the createStore method from the DevExtreme.AspNet.Data extension and remote date-time values are specified in UTC. DevExtreme.AspNet.Data requires the dateSerializationFormat to correctly serialize these values.

Use one of the following values to specify the dateSerializationFormat property:

"yyyy-MM-dd" - local date
"yyyy-MM-ddTHH:mm:ss" - local date and time
"yyyy-MM-ddTHH:mm:ssZ" - UTC date and time
"yyyy-MM-ddTHH:mm:ssx" - date and time with a timezone

This property 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:

Default Value: 'description'

disabled

Specifies whether the UI component responds to user interaction.

Type:

Default Value: false

dropDownAppointmentTemplate

Use the appointmentTooltipTemplate property instead.

Specifies a custom template for tooltips displayed when users click a cell overflow indicator.

Type:

Template Data:

The appointment's object.

Default Name: 'dropDownAppointment'

editing

Specifies which editing operations a user can perform on appointments.

Type:

|

Default Value: true

elementAttr

Specifies the global attributes to be attached to the UI component's container element.

Type: any

Default Value: {}

jQuery

$(function(){
    $("#schedulerContainer").dxScheduler({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});

Angular

HTML

TypeScript

<dx-scheduler ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-scheduler>

import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxScheduler ...
        :element-attr="schedulerAttributes">
    </DxScheduler>
</template>

<script>
import DxScheduler from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler
    },
    data() {
        return {
            schedulerAttributes: {
                id: 'elementId',
                class: 'class-name'
            }
        }
    }
}
</script>

React

App.js

import React from 'react';

import Scheduler from 'devextreme-react/scheduler';

class App extends React.Component {
    schedulerAttributes = {
        id: 'elementId',
        class: 'class-name'
    }

    render() {
        return (
            <Scheduler ...
                elementAttr={this.schedulerAttributes}>
            </Scheduler>
        );
    }
}
export default App;

endDateExpr

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

Type:

Default Value: 'endDate'

endDateTimeZoneExpr

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

Type:

Default Value: 'endDateTimeZone'

endDayHour

Specifies the last hour on the time scale. Accepts integer values from 0 to 24.

Type:

Default Value: 24

This property applies to all views at once. To override it for a specific view, set the same property in the view's configuration object.

firstDayOfWeek

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

Type:

Default Value: undefined

Accepted Values: 0 | 1 | 2 | 3 | 4 | 5 | 6

This property 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.

focusStateEnabled

Specifies whether the UI component can be focused using keyboard navigation.

Type:

Default Value: true (desktop)

groupByDate

If true, appointments are grouped by date first and then by resource; opposite if false. Applies only if appointments are grouped and groupOrientation is "horizontal".

Type:

Default Value: false

DevExtreme Scheduler Group By Date

groups

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

Type:

Array<String>

Default Value: []

This array should contain one or more values that correspond to the fieldExpr values of resource kinds:

jQuery

JavaScript

var resources = [
    { fieldExpr: "room", dataSource: roomsDataSource },
    { fieldExpr: "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 = [
        { fieldExpr: "room", dataSource: this.roomsDataSource },
        { fieldExpr: "teacher", dataSource: this.teachersDataSource }
    ];
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxScheduler ...
        :data-source="appointments"
        :groups="groups">
        <DxResource
            :data-source="roomsDataSource"
            field-expr="room"
        />
        <DxResource
            :data-source="teachersDataSource"
            field-expr="teacher"
        />
    </DxScheduler>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxScheduler } from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler
    },
    data() {
        return {
            dataSource: [ ... ],
            groups: ['room', 'teacher'],
            roomsDataSource: [ ... ],
            teachersDataSource: [ ... ]
            // ...
        }
    }
}
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import Scheduler, { Resource } from 'devextreme-react/scheduler';

const App = () => {
    const appointments = [ ... ];
    const roomsDataSource = [ ... ];
    const teachersDataSource = [ ... ];
    const groups = ['room', 'teacher'];

    return (
        <Scheduler ...
            dataSource={appointments}
            groups={groups}>
            <Resource
                dataSource={roomsDataSource}
                fieldExpr="room"
            />
            <Resource
                dataSource={teachersDataSource}
                fieldExpr="teacher"
            />
        </Scheduler>
    );
}

export default App;

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

height

Specifies the UI component's height.

Type:

|

|

Return Value:

|

The UI component's height.

Default Value: undefined

This property accepts a value of one of the following types:

Number
The height in pixels.
String
A CSS-accepted measurement of height. For example, "55px", "80%", "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 UI component.

Type:

Default Value: undefined

indicatorUpdateInterval

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

Type:

Default Value: 300000

max

The latest date the UI component allows you to select.

Type:

|

|

Default Value: undefined

maxAppointmentsPerCell

Specifies the limit of full-sized appointments displayed per cell. Applies to all views except "agenda".

Type:

|

Default Value: 'auto'

Accepted Values: 'auto' | 'unlimited'

min

The earliest date the UI component allows you to select.

Type:

|

|

Default Value: undefined

noDataText

Specifies the text or HTML markup displayed by the UI component if the item collection is empty. Available for the Agenda view only.

Type:

Default Value: 'No data to display'

The Scheduler component evaluates the noDataText property's value. This evaluation, however, makes the Scheduler potentially vulnerable to XSS attacks. To guard against these attacks, encode the HTML markup before you assign it to the noDataText property. Refer to the following help topic for more information: Potentially Vulnerable API - noDataText.

onAppointmentAdded

A function that is executed after an appointment is added to the data source.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
appointmentData	Object	The added appointment's data.
component	Scheduler	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
error	JavaScript Error Object	The standard Error object that defines the occurred error.
model	any	Model data. Available only if Knockout is used.

Default Value: null

onAppointmentAdding

A function that is executed before an appointment is added to the data source.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
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.
component	Scheduler	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	any	Model data. Available only if Knockout is used.

Default Value: null

onAppointmentClick

A function that is executed when an appointment is clicked or tapped.

Type:

|

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
appointmentData	Object	The initial appointment.
appointmentElement	HTMLElement \| jQuery	The clicked's container. It is an HTML Element or a jQuery Element when you use jQuery.
cancel	Boolean	If true, hides the appointment tooltip.
component	Scheduler	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
model	any	Model data. Available only if Knockout is used.
targetedAppointmentData	Object	The clicked appointment.

Default Value: null

In case of recurring appointments or appointments with multiple resources, you may need the data object of the clicked, not the initial, appointment. For this purpose, use the targetedAppointmentData field of the function's parameter. Otherwise, use the appointmentData field.

For example, the data source contains the following data object:

JavaScript

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

This object describes a series of appointments that belong to two owners and repeat every day. If a user clicks an appointment from this series (for example, the second appointment that belongs to the second owner), appointmentData and targetedAppointmentData will then contain the following data objects:

JavaScript

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

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

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.

Type:

|

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
appointmentData	Object	The initial appointment.
appointmentElement	HTMLElement \| jQuery	The appointment's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Scheduler	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
model	any	Model data. Available only if you use Knockout.
targetedAppointmentData	Object	The appointment's data object. The difference between this and appointmentData fields is explained in the onAppointmentClick description.

Default Value: null

onAppointmentDblClick

A function that is executed when an appointment is double-clicked or double-tapped.

Type:

|

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
appointmentData	Object	The initial appointment.
appointmentElement	HTMLElement \| jQuery	The clicked's container. It is an HTML Element or a jQuery Element when you use jQuery.
cancel	Boolean	If true, does not allow the user to open the appointment details form with double click.
component	Scheduler	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
model	any	Model data. Available only if Knockout is used.
targetedAppointmentData	Object	The appointment's data object. The difference between this and appointmentData fields is explained in the onAppointmentClick description.

Default Value: null

onAppointmentDeleted

A function that is executed after an appointment is deleted from the data source.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
appointmentData	Object	The deleted appointment's data.
component	Scheduler	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
error	JavaScript Error Object	The standard Error object that defines the occurred error.
model	any	Model data. Available only if Knockout is used.

Default Value: null

onAppointmentDeleting

A function that is executed before an appointment is deleted from the data source.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
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.
component	Scheduler	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	any	Model data. Available only if Knockout is used.

Default Value: null

onAppointmentFormOpening

A function that is executed before an appointment details form appears. Use this function to customize the form.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
appointmentData	Object	The data of the appointment for which a form is opened.
cancel	Boolean	If true, prevents the user from opening the appointment details form.
component	Scheduler	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
form	Form	The form's instance; created only once - when the function is executed for the first time.
model	any	Model data. Available only if you use Knockout.
popup	Popup	The instance of the popup that contains the form.

Default Value: null

The Scheduler displays the appointment details form inside a popup. The elements inside the form are the Form and Popup UI components. Use the onAppointmentFormOpening function's form and popup fields and the Form and Popup API to access and customize the corresponding UI component.

The form organizes its items into two groups:

Group name	Description
mainGroup	Contains form fields that define main appointment parameters (for example, subject, and description).
recurrenceGroup	Contains form fields that define appointment recurrence parameters.

The table below lists 'mainGroup' editor names:

Editor Caption on a Form	Editor Name
Subject	'text'. Corresponds to the SchedulerAppointment.text property.
Start Date	'startDate'. Corresponds to the SchedulerAppointment.startDate property.
End Date	'endDate'. Corresponds to the SchedulerAppointment.endDate property.
All Day	'allDay'. Corresponds to the SchedulerAppointment.allDay property.
Description	'description'. Corresponds to the SchedulerAppointment.description property.

You can add a custom item to any group or create an ungrouped item and display it under the groups. If you use the [fieldName]Expr properties to map custom items to data fields, use these property values to access the items on the appointment form.

DevExtreme Scheduler onAppointmentFormOpening

The code below adds a new form item (phone) to the mainGroup and creates an ungrouped item (location). Check the array of form items to ensure that it does not contain an item with the same data field.

The mainGroup consists of two columns. A custom item's colSpan property value is 2. This means that the custom item spans two columns.

jQuery

index.js

$(function() {
    $("#schedulerContainer").dxScheduler({
        dataSource: [{
            text: "Attend the conference",
            startDate: new Date(2020, 4, 24, 9, 10),
            endDate: new Date(2020, 4, 24, 11, 20),
        }],
        currentDate: new Date(2020, 4, 24),

        onAppointmentFormOpening: function(e) {
            e.popup.option('showTitle', true);
            e.popup.option('title', e.appointmentData.text ? 
                e.appointmentData.text : 
                'Create a new appointment');

            const form = e.form;
            let mainGroupItems = form.itemOption('mainGroup').items; 
            if (!mainGroupItems.find(function(i) { return i.dataField === "phone" })) {
                mainGroupItems.push({
                    colSpan: 2, 
                    label: { text: "Phone Number" },
                    editorType: "dxTextBox",
                    dataField: "phone"
                });
                form.itemOption('mainGroup', 'items', mainGroupItems);
            }

            let formItems = form.option("items"); 
            if (!formItems.find(function(i) { return i.dataField === "location" })) {
                formItems.push({
                    colSpan: 2,
                    label: { text: "Location" },
                    editorType: "dxTextBox",
                    dataField: "location"
                });
                form.option("items", formItems);
            }
        }
    });
});

Angular

app.component.html

app.component.ts

<dx-scheduler
    [dataSource]="schedulerData"
    [currentDate]="currentDate"
    (onAppointmentFormOpening)="onAppointmentFormOpening($event)">
</dx-scheduler>

import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
    schedulerData = [{
        text: "Attend the conference",
        startDate: new Date(2020, 4, 24, 9, 10),
        endDate: new Date(2020, 4, 24, 11, 20),
    }];
    currentDate = new Date(2020, 4, 24);

    onAppointmentFormOpening(e) {
        e.popup.option('showTitle', true);
        e.popup.option('title', e.appointmentData.text ? 
            e.appointmentData.text : 
            'Create a new appointment');

        const form = e.form;
        let mainGroupItems = form.itemOption('mainGroup').items; 
        if (!mainGroupItems.find(function(i) { return i.dataField === "phone" })) {
            mainGroupItems.push({
                colSpan: 2, 
                label: { text: "Phone Number" },
                editorType: "dxTextBox",
                dataField: "phone"
            });
            form.itemOption('mainGroup', 'items', mainGroupItems);
        }

        let formItems = form.option("items"); 
        if (!formItems.find(function(i) { return i.dataField === "location" })) {
            formItems.push({
                colSpan: 2,
                label: { text: "Location" },
                editorType: "dxTextBox",
                dataField: "location"
            });
            form.option("items", formItems);
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})

Vue

App.vue

<template>
    <DxScheduler
        :data-source="schedulerData"
        :current-date="currentDate"
        @appointment-form-opening="onAppointmentFormOpening"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxScheduler from 'devextreme-vue/scheduler';

export default {
    components: {
        DxScheduler
    },
    data() {
        return {
            schedulerData: [{
                text: "Attend the conference",
                startDate: new Date(2020, 4, 24, 9, 10),
                endDate: new Date(2020, 4, 24, 11, 20),
            }],
            currentDate: new Date(2020, 4, 24)
        }
    },
    methods: {
        onAppointmentFormOpening(e) {
            e.popup.option('showTitle', true);
            e.popup.option('title', e.appointmentData.text ? 
                e.appointmentData.text : 
                'Create a new appointment');

            const form = e.form;
            let mainGroupItems = form.itemOption('mainGroup').items; 
            if (!mainGroupItems.find(function(i) { return i.dataField === "phone" })) {
                mainGroupItems.push({
                    colSpan: 2, 
                    label: { text: "Phone Number" },
                    editorType: "dxTextBox",
                    dataField: "phone"
                });
                form.itemOption('mainGroup', 'items', mainGroupItems);
            }

            let formItems = form.option("items"); 
            if (!formItems.find(function(i) { return i.dataField === "location" })) {
                formItems.push({
                    colSpan: 2,
                    label: { text: "Location" },
                    editorType: "dxTextBox",
                    dataField: "location"
                });
                form.option("items", formItems);
            }
        }
    }
}
</script>

React

App.js

import React from 'react';

import 'devextreme/dist/css/dx.light.css';
import Scheduler from 'devextreme-react/scheduler';

const dataSource = [{
    text: "Attend the conference",
    startDate: new Date(2020, 4, 24, 9, 10),
    endDate: new Date(2020, 4, 24, 11, 20),
}];

class App extends React.Component {
    currentDate = new Date(2020, 4, 24);

    onAppointmentFormOpening(e) {
        e.popup.option('showTitle', true);
        e.popup.option('title', e.appointmentData.text ? 
            e.appointmentData.text : 
            'Create a new appointment');

        const form = e.form;
        let mainGroupItems = form.itemOption('mainGroup').items;
        if (!mainGroupItems.find(function(i) { return i.dataField === "phone" })) {
            mainGroupItems.push({
                colSpan: 2, 
                label: { text: "Phone Number" },
                editorType: "dxTextBox",
                dataField: "phone"
            });
            form.itemOption('mainGroup', 'items', mainGroupItems);
        }

        let formItems = form.option("items"); 
        if (!formItems.find(function(i) { return i.dataField === "location" })) {
            formItems.push({
                colSpan: 2,
                label: { text: "Location" },
                editorType: "dxTextBox",
                dataField: "location"
            });
            form.option("items", formItems);
        }
    }

    render() {
        return (
            <Scheduler 
                dataSource={dataSource}
                defaultCurrentDate={this.currentDate}
                onAppointmentFormOpening={this.onAppointmentFormOpening}
            />
        );
    }
}
export default App;

onAppointmentRendered

A function that is executed when an appointment is rendered.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
appointmentData	Object	The initial appointment's data.
appointmentElement	HTMLElement \| jQuery	The appointment's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Scheduler	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	any	Model data. Available only if Knockout is used.
targetedAppointmentData	Object \| undefined	The appointment's data object. The difference between this and appointmentData fields is explained in the onAppointmentClick description.

Default Value: null

onAppointmentUpdated

A function that is executed after an appointment is updated in the data source.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
appointmentData	Object	The updated appointment's data.
component	Scheduler	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
error	JavaScript Error Object	The standard Error object that defines the occurred error.
model	any	Model data. Available only if Knockout is used.

Default Value: null

onAppointmentUpdating

A function that is executed before an appointment is updated in the data source.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
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.
component	Scheduler	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	any	Model data. Available only if Knockout is used.
newData	Object	The appointment with new data.
oldData	Object	The data of the appointment to be updated.

Default Value: null

onCellClick

A function that is executed when a view cell is clicked.

Type:

|

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
cancel	Boolean	Allows you to cancel execution of the default cell click handler.
cellData	Object	The clicked cell's data.
cellElement	HTMLElement \| jQuery	The clicked cell's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Scheduler	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
model	any	Model data. Available only if Knockout is used.

Default Value: null

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.

Type:

|

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
cellData	Object	The data of the cell on which the context menu is invoked.
cellElement	HTMLElement \| jQuery	The cell's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Scheduler	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
event	Event (jQuery or EventObject)	The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery.
model	any	Model data. Available only if you use Knockout.

Default Value: null

onContentReady

A function that is executed when the UI component's content is ready and each time the content is changed.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	Scheduler	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	any	Model data. Available only when using Knockout.

Name

Type

Description

component

Scheduler

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

any

Model data. Available only when using Knockout.

Default Value: null

If data displayed by the UI component 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 UI component content is ready or an appointment is modified.

onDisposing

A function that is executed before the UI component is disposed of.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	Scheduler	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
model	any	Model data. Available only if you use Knockout.

Name

Type

Description

component

Scheduler

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

any

Model data. Available only if you use Knockout.

Default Value: null

onInitialized

A function used in JavaScript frameworks to save the UI component instance.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
component	Scheduler	The UI component's instance.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Name

Type

Description

component

Scheduler

The UI component's instance.

element

HTMLElement | jQuery

The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: null

onOptionChanged

A function that is executed after a UI component property is changed.

Type:

Function parameters:

e:

Information about the event.

Object structure:

Name	Type	Description
model	any	Model data. Available only if you use Knockout.
fullName	String	The path to the modified property that includes all parent properties.
element	HTMLElement \| jQuery	The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery.
component	Scheduler	The UI component's instance.
name	String	The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into.
value	any	The modified property's new value.

Default Value: null

The following example shows how to subscribe to component property changes:

jQuery

index.js

$(function() {
    $("#schedulerContainer").dxScheduler({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

Angular

app.component.html

app.component.ts

app.module.ts

<dx-scheduler ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-scheduler>

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxSchedulerModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxSchedulerModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }

Vue

App.vue

<template> 
    <DxScheduler ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxScheduler from 'devextreme-vue/scheduler'; 

export default { 
    components: { 
        DxScheduler
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script>

React

App.js

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import Scheduler from 'devextreme-react/scheduler'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Scheduler ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
}

recurrenceEditMode

Specifies the edit mode for recurring appointments.

Type:

Default Value: 'dialog'

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

This property accepts the following values:

"series"
Enables a user to edit only entire appointment series.
"occurrence"
Enables a user to edit only individual appointment instances.
"dialog"
Displays a dialog that suggests a user to choose between editing the entire series or only the individual instance.

The Scheduler handles changes made to an instance and a series differently. If a user edits a recurring appointment instance, two actions are performed on the data objects:

The series' data object is updated. The Scheduler updates the field specified by recurrenceExceptionExpr, thus adding the edited instance to exceptions. The onAppointmentUpdating and onAppointmentUpdated event handlers are executed.
A new data object is created. This object contains the edited instance's data. The onAppointmentAdding and onAppointmentAdded event handlers are executed.

When a user deletes an instance, the Scheduler adds it to series' exceptions by updating the field specified in recurrenceExceptionExpr. Because this is an update, the onAppointmentUpdating and onAppointmentUpdated event handlers are executed instead of onAppointmentDeleting and onAppointmentDeleted.

If a user edits a whole series, only the series data object is updated. When a whole series is deleted, its object is removed.

recurrenceExceptionExpr

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

Type:

Default Value: 'recurrenceException'

recurrenceRuleExpr

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

Type:

Default Value: 'recurrenceRule'

remoteFiltering

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

Type:

Web API Service Demo SignalR Service Demo

Default Value: false

NOTE

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

resourceCellTemplate

Specifies a custom template for resource headers.

Type:

Template Data:

Resources Demo Grouping by Resources Demo

The current resource header's data.

Default Name: null

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.

rtlEnabled

Switches the UI component to a right-to-left representation.

Type:

DataGrid Demo Navigation UI Demo Editors Demo

Default Value: false

When this property is set to true, the UI component 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
});

scrolling

Configures scrolling.

Type: dxSchedulerScrolling

Scrolling allows a user to browse data outside the current viewport. Information about the available scrolling modes is in the mode property description.

selectedCellData

The data of the currently selected cells.

Type:

Array<any>

Read-only

Default Value: []

This array contains objects with the following structure:

{
    startDate: Date,
    endDate: Date,
    allDay: Boolean, 
    groups: { // present if grouping is enabled
        resourceKind: "resourceValue" // for example, room: "101"
    }     
}

You can implement the onOptionChanged function to track all user actions that change selection. The following code logs the selectedCellData value in the browser console.

JavaScript

const onOptionChanged = ({ name, value }) => {
    if (name === "selectedCellData") {
        console.log(value);
    }
};

shadeUntilCurrentTime

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

Type:

Default Value: false

showAllDayPanel

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

Type:

Default Value: true

showCurrentTimeIndicator

Specifies the current date-time indicator's visibility.

Type:

Default Value: true

startDateExpr

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

Type:

Default Value: 'startDate'

startDateTimeZoneExpr

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

Type:

Default Value: 'startDateTimeZone'

startDayHour

Specifies the first hour on the time scale. Accepts integer values from 0 to 24.

Type:

Default Value: 0

This property applies to all views at once. To override it for a specific view, set the same property in the view's configuration object.

tabIndex

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

Type:

Default Value: 0

The value of this property will be passed to the tabindex attribute of the HTML element that underlies the UI component.

textExpr

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

Type:

Default Value: 'text'

timeCellTemplate

Specifies a custom template for time scale items.

Type:

Template Data:

The data of the current time scale item.

Default Name: null

NOTE

There is no timeCellTemplate in such views as "month", "timelineMonth" and "agenda".

timeZone

Specifies the time zone for the Scheduler's grid. Accepts values from the IANA time zone database.

Type:

Default Value: ''

If no time zone is specified, the grid displays appointments in the client's time zone.

You can also specify the startDateTimeZone and endDateTimeZone properties for individual appointments.

useDropDownViewSwitcher

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

Type:

Default Value: false, true (Android, iOS, Material)

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

views[]

Specifies and configures the views to be available in the view switcher.

Type:

Array<String | Object>

Default Value: ['day', 'week']

This property accepts an array of strings and objects:

String
A view name. Use a string if the view does not need customization, but should be available in the view switcher.
Object
An individual view's configuration. Set the type property to specify the view to which the configuration should apply. This documentation section describes available properties. The properties set for an individual view have a higher priority than the same properties set on the root level for all views.

To specify the default view, use the currentView property.

visible

Specifies whether the UI component is visible.

Type: