Configuration

An object defining configuration options for the widget.

See Also

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.

adaptivityEnabled

Specifies whether the widget adapts to small screens.

Type:

Boolean

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:

String

Default Value: 'allDay'

appointmentCollectorComponent

An alias for the appointmentCollectorTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

appointmentCollectorRender

An alias for the appointmentCollectorTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

appointmentCollectorTemplate

Specifies a custom template for cell overflow indicators.

Type:

template

Template Data:
Name Type Description
appointmentCount

Number

The count of hidden appointments.

isCompact

Boolean

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.common.css';
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.common.css';
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;
See Also

appointmentComponent

An alias for the appointmentTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

appointmentDragging

Configures appointment reordering using drag and drop gestures.

Type:

Object

appointmentRender

An alias for the appointmentTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

appointmentTemplate

Specifies a custom template for appointments.

Type:

template

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.

Default Name: 'item'

appointmentTooltipComponent

An alias for the appointmentTooltipTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

appointmentTooltipRender

An alias for the appointmentTooltipTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

appointmentTooltipTemplate

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

Type:

template

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.

Default Name: 'appointmentTooltip'

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()
Raised Events: optionChanged

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.

currentView

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

Type:

String

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

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

Use the SchedulerViewType enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Day, Week, WorkWeek, Month, TimelineDay, TimelineWeek, TimelineWorkWeek, TimelineMonth, and Agenda.

See Also

customizeDateNavigatorText

Customizes the date navigator's text.

Type:

Function

Function parameters:
info:

Object

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.

Return Value:

String

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>

dataCellComponent

An alias for the dataCellTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

dataCellRender

An alias for the dataCellTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

dataCellTemplate

Specifies a custom template for table cells.

Type:

template

Template Data:

Object

The current table cell's data.

Default Name: null

NOTE
There is no dataCellTemplate in the agenda view.

View Demo

See Also

dataSource

Binds the widget to data.

If you use DevExtreme ASP.NET MVC Controls, refer to the Bind Controls to Data article.

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 widget's startDateExpr and endDateExpr options. Optionally, set other options with the Expr postfix.

  • Data Array
    Assign the array to the dataSource option. View Demo

  • Read-Only Data in JSON Format
    Set the dataSource option 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 widgets 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.common.css';
    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.common.css';
    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

Please review the following notes about data binding:

  • If you wrap the store into the DataSource object explicitly, set the paginate option to false to prevent data from partitioning.

  • Data field names should not contain the following characters: ., ,, :, [, and ].

  • DataSource and stores provide 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 option as shown in the articles about changing options in jQuery, Angular, React, and Vue.

dateCellComponent

An alias for the dateCellTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

dateCellRender

An alias for the dateCellTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

dateCellTemplate

Specifies a custom template for day scale items.

Type:

template

Template Data:

Object

The data of the current date scale item.

Default Name: null

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

dropDownAppointmentComponent Deprecated

Use the appointmentTooltipComponent option instead.

An alias for the dropDownAppointmentTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

dropDownAppointmentRender Deprecated

Use the appointmentTooltipRender option instead.

An alias for the dropDownAppointmentTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

dropDownAppointmentTemplate Deprecated

Use the appointmentTooltipTemplate option instead.

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

Type:

template

Template Data:

Object

The appointment's object.

Default Name: 'dropDownAppointment'

editing

Specifies which editing operations a 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: {}

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:

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 the last hour on the time scale. Accepts integer values from 0 to 24.

Type:

Number

Default Value: 24

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

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.

Use the FirstDayOfWeek enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. 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, 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:

Boolean

Default Value: false

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
    ],
    // ...
})

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

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

Type:

String

Default Value: undefined

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. Applies to all views except "agenda".

Type:

Number

|

String

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

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'

onAppointmentAdded

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

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
appointmentData

Object

The added appointment's data.

component

Scheduler

The widget's instance.

element

HTMLElement or jQuery

The widget'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

Object

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

Function parameters:
e:

Object

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 widget's instance.

element

HTMLElement or jQuery

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

model

Object

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

|

String

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
appointmentData

Object

The initial appointment.

appointmentElement

HTMLElement or jQuery

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

cancel

Boolean

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

component

Scheduler

The widget's instance.

element

HTMLElement or jQuery

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

event

Event (jQuery or dxEvent)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

model

Object

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

|

String

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
appointmentData

Object

The initial appointment.

appointmentElement

HTMLElement or jQuery

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

component

Scheduler

The widget's instance.

element

HTMLElement or jQuery

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

event

Event (jQuery or dxEvent)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

model

Object

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

|

String

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
appointmentData

Object

The initial appointment.

appointmentElement

HTMLElement or jQuery

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

cancel

Boolean

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

component

Scheduler

The widget's instance.

element

HTMLElement or jQuery

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

event

Event (jQuery or dxEvent)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

model

Object

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

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
appointmentData

Object

The deleted appointment's data.

component

Scheduler

The widget's instance.

element

HTMLElement or jQuery

The widget'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

Object

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

Function parameters:
e:

Object

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 widget's instance.

element

HTMLElement or jQuery

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

model

Object

Model data. Available only if Knockout is used.

Default Value: null

onAppointmentFormOpening

A function that is executed before an appointment details form is opened.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
appointmentData

Object

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

cancel

Boolean

Set this field to true to prevent the appointment details form from opening.

component

Scheduler

The widget's instance.

element

HTMLElement or jQuery

The widget'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

Object

Model data. Available only if you use Knockout.

popup

Popup

The instance of the popup that contains the form.

Default Value: null

The appointment details form is displayed inside a popup. These elements are implemented by the Form and Popup widgets. Their instances are passed to the onAppointmentFormOpening function in the form and popup fields. Use the Form API and Popup API to customize the corresponding widget.

Form items are organized into two groups:

Group name Description
mainGroup Contains form fields that define main appointment parameters (subject, start and end dates, etc.).
recurrenceGroup Contains form fields that define appointment recurrence parameters.

You can add a custom item to any group or create an ungrouped item and display it under the groups, as shown in the following image:

DevExtreme Scheduler onAppointmentFormOpening

The code below adds a new form item (phone) to the mainGroup and creates an ungrouped item (location). Note that the array of form items should be checked to ensure that it does not already contain an item with the same data field. The following code also adds a title to the popup:

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.common.css';
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.common.css';
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;

The mainGroup consists of two columns. To make a custom item span both columns, set its colSpan to 2 - as shown in the code above. Apply the same setting to an ungrouped item if it should span the mainGroup and recurrenceGroup.

See Also

onAppointmentRendered

A function that is executed when an appointment is rendered.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
appointmentData

Object

The initial appointment's data.

appointmentElement

HTMLElement or jQuery

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

component

Scheduler

The widget's instance.

element

HTMLElement or jQuery

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

model

Object

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

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
appointmentData

Object

The updated appointment's data.

component

Scheduler

The widget's instance.

element

HTMLElement or jQuery

The widget'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

Object

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

Function parameters:
e:

Object

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 widget's instance.

element

HTMLElement or jQuery

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

model

Object

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

|

String

Function parameters:
e:

Object

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 or jQuery

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

component

Scheduler

The widget's instance.

element

HTMLElement or jQuery

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

event

Event (jQuery or dxEvent)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

model

Object

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

|

String

Function parameters:
e:

Object

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 or jQuery

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

component

Scheduler

The widget's instance.

element

HTMLElement or jQuery

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

event

Event (jQuery or dxEvent)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

model

Object

Model data. Available only if you use Knockout.

Default Value: null

onContentReady

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

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Scheduler

The widget's instance.

element

HTMLElement or jQuery

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

model

Object

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 function that is executed before the widget is disposed of.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Scheduler

The widget's instance.

element

HTMLElement or jQuery

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

model

Object

Model data. Available only if you use Knockout.

Default Value: null

onInitialized

A function used in JavaScript frameworks to save the widget instance.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Scheduler

The widget's instance.

element

HTMLElement or jQuery

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

Default Value: null

See Also

onOptionChanged

A function that is executed after a widget option is changed.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

Scheduler

The widget's instance.

fullName

String

The path to the modified option that includes all parent options.

name

String

The modified option if it belongs to the first level. Otherwise, the first-level option it is nested into.

value any

The modified option's new value.

element

HTMLElement or jQuery

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

model

Object

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' | 'occurrence' | 'series'

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

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.

Use the SchedulerRecurrenceEditMode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. 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.

resourceCellComponent

An alias for the resourceCellTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

resourceCellRender

An alias for the resourceCellTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

resourceCellTemplate

Specifies a custom template for resource headers.

Type:

template

Template Data:

Object

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.

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

scrolling

Configures scrolling.

Type: dxSchedulerScrolling

Scrolling allows a user to browse data left outside the current viewport. The widget contains two scrolling modes detailed in the mode option description.

selectedCellData

Currently selected cells' data.

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"
    }     
}
See Also

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 the first hour on the time scale. Accepts integer values from 0 to 24.

Type:

Number

Default Value: 0

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

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'

timeCellComponent

An alias for the timeCellTemplate option specified in React. Accepts a custom component. Refer to Using a Custom Component for more information.

timeCellRender

An alias for the timeCellTemplate option specified in React. Accepts a rendering function. Refer to Using a Rendering Function for more information.

timeCellTemplate

Specifies a custom template for time scale items.

Type:

template

Template Data:

Object

The data of the current time scale item.

Default Name: null

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

timeZone

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

Type:

String

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 options for individual appointments.

View Demo

See Also

useDropDownViewSwitcher

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

Type:

Boolean

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']
Accepted Values: 'day' | 'week' | 'workWeek' | 'month' | 'timelineDay' | 'timelineWeek' | 'timelineWorkWeek' | 'timelineMonth' | 'agenda'

This option 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 option to specify the view to which the configuration should apply. This documentation section describes available options. The options set for an individual view have a higher priority than the same options set on the root level for all views.

To specify the default view, use the currentView option.

Use the SchedulerViewType enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Day, Week, WorkWeek, Month, TimelineDay, TimelineWeek, TimelineWorkWeek, TimelineMonth, and Agenda.

View Demo

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 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;
    }