Configuration

The accessKey option value is passed to the accesskey attribute of the actual HTML element of the widget.

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

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

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

AngularJS

<div dx-scheduler="{
    dataSource: schedulerData,
    currentDate: currentDate,
    appointmentTemplate: 'appointment',
}" dx-item-alias="appItem">
    <div data-options="dxTemplate: {name: 'appointment'}" style="padding: 0;">
        <div class="appointment-header">{{appItem.text}}</div>
        <div class="appointment-time">{{appItem.from}} - {{appItem.to}}</div>
    </div>
</div>

View Demo

See Also

• template
• Customize Widget Element Appearance
• Customize Widget Element Appearance - MVVM Approach

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

So, in Knockout approach, you can bind template elements to the appointment object's fields directly. To access another binding context within an appointment tooltip template, use Knockout binding variables.

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

AngularJS

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

View Demo

See Also

• template
• Customize Widget Element Appearance
• Customize Widget Element Appearance - MVVM Approach

This option is useful when displaying Scheduler on narrow screens.

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.

Specify the views to be available in the scheduler's View Selector for end users in the views array. The default view used by the widget when rendering the scheduler is specified by the currentView option.
For more information on scheduler views, refer to the Views guide.

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

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

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

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

View Demo

See Also

• Customize Widget Element Appearance
• Customize Widget Element Appearance - MVVM Approach

This option accepts one of the following.

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

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

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

If you access a data source containing Scheduler appointments using a CustomStore, the function passed to the load option should support the Scheduler field in addition to a standard field set of the argument object. This field holds an object containing the following fields.

• startDate
  Specifies the start date of a range of appointments to be loaded.

• endDate
  Specifies the end date of a range of appointments to be loaded.

• resources
  Specifies resources used to filter the appointments to be loaded.

var schedulerInstance = $("#schedulerContainer").dxScheduler("instance");

var myDataSource = new data.DataSource({
    store: new data.CustomStore({
        load: function(options) {
            var result = $.Deferred();
            $.ajax({
                url: "/data/appointments",
                data: {
                    start: schedulerInstance.getStartViewDate().getTime(),
                    end: schedulerInstance.getEndViewDate().getTime(),
                    ownerid: schedulerInstance.option("resources")
                }
            }).done(function(response){
                result.resolve(response);
            });
            return result.promise();
        }
    })
});

You can assign an array directly to this option as well as use the Data Source object provided by the DevExtreme library.

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

View Demo

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

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

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

AngularJS Approach

<div dx-scheduler="{
    dataSource: schedulerData,
    currentDate: currentDate,
    dateCellTemplate: 'dateTemplate',
}" dx-item-alias="item">
    <div data-options="dxTemplate: {name: 'dateTemplate'}">
        <div class="date">{{ item.text }}</div>
    </div>
</div>

See Also

• Visual Elements of Views
• Customize Widget Element Appearance
• Customize Widget Element Appearance - MVVM Approach

If you do not set the dataSource option at design time, the widget cannot detect the format of date-time values automatically. In this case, specify the dateSerializationFormat option. You can also do this to serialize date-time values to a specific format.

The following formats are supported.

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

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

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

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

Note that this option applies only if the forceIsoDateParsing field of the global configuration object is set to true.

DevExpress.config({
    forceIsoDateParsing: true
});

Create an observable variable and assign it to this option to specify the availability of the widget at runtime.

When you configure this option using a server-side wrapper, pass a dictionary as shown in the following code.

@(Html.DevExtreme()
    // other widget options
    // ...
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" },
        // ...
    })
)

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

This option can take on a value from 0 to 6.

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

By default, the value provided by the culture settings is used.

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

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

var resources = [
    { field: 'room', dataSource: roomsDataSource },
    { field: 'teacher', dataSource: teachersDataSource }
];
var schedulerOptions = {
    dataSource: appointments,
    resources: resources,
    groups: ['room', 'teacher']
    //...
}

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

The option can hold a value of the following types.

• number
  The height of the widget in pixels

• string
  A CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit")

• function
  A function returning the widget height, e.g.,

  JavaScript

  height: function () {
      return baseHeight - 10 + "%";
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

View Demo Watch Video

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

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

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

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

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

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

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

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

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

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

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.

Assign a function to perform a custom action when the widget is being removed.

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

Assign a function to perform a custom action after an option of the component is changed.

This option accepts the following values.

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

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

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

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

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

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

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

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

AngularJS Approach

<div dx-scheduler="options" dx-item-alias="item">
    <div data-options="dxTemplate: {name: 'resource'}">
        <img src="{{ item.image }}">
        <div class="resource-header">{{ item.text }}</div>
    </div>
</div>

var appointements = [
    {
        text: "Website Re-Design Plan",
        priorityId: 2,
        startDate: new Date(2015, 4, 25, 9, 0),
        endDate: new Date(2015, 4, 25, 11, 30)
    }, // . . .
];

var priorityData = [
    {
        text: "Low Priority",
        image: "img1.png",
        id: 1,
        color: "#1e90ff"
    }, {
        text: "High Priority",
        image: "img2.png",
        id: 2,
        color: "#ff9747"
    }
];

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

View Demo

See Also

• Customize Widget Element Appearance
• Customize Widget Element Appearance - MVVM Approach

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

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

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

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

View Demo

See Also

• Resources

If you need to switch the display of this DevExtreme component to right-to-left, enable a specifically designed configuration option - rtlEnabled. When this option is set to true, the text flows from right to left, and the layout the component's elements is reversed. To switch the entire application/site to a right-to-left representation, use the static DevExpress.rtlEnabled field.

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

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

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

AngularJS Approach

<div dx-scheduler="{
    dataSource: schedulerData,
    currentDate: currentDate,
    timeCellTemplate: 'timeTemplate'
}" dx-item-alias="item">
    <div data-options="dxTemplate: {name: 'timeTemplate'}">
        <div class="time">{{ item.text }}</div>
    </div>
</div>

See Also

• Visual Elements of Views
• Customize Widget Element Appearance
• Customize Widget Element Appearance - MVVM Approach

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

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

View Demo

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

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

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

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

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

View Demo Watch Video

The option can hold a value of the following types.

• numeric
  The widget width in pixels.
• string
  A CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit").

• function
  The function returning the widget width. For example, see the following code.

  JavaScript

  width: function () { 
      return baseWidth - 10 + "%";
  }