React Scheduler Props

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

View Demo

See Also

• Customize Appointment
• Custom Templates

View Demo

See Also

• Customize Appointment Tooltip
• Custom Templates

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.

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

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

See Also

• Views
• View Switcher

View Demo

See Also

• Timetable
• Custom Templates

This option accepts one of the following.

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

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

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

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

View Demo

See Also

• Scheduler - Data Binding

See Also

• Timetable
• Custom Templates

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.

View Demo

See Also

• Customize Drop-Down List
• Custom Templates
• views.dropDownAppointmentTemplate

View Demo

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

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

)

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

This option can accept a value from 0 to 6:

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

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

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

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

<dx-scheduler
    [dataSource]="appointments"
    [resources]="resources"
    [groups]="['room', 'teacher']">
</dx-scheduler>

import { DxSchedulerModule } from 'devextreme-angular';
// ...
export class AppComponent  {
    // ...
    resources = [
        { field: 'room', dataSource: this.roomsDataSource },
        { field: 'teacher', dataSource: this.teachersDataSource }
    ];
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})

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

View Demo

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%", "auto", "inherit".

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

  JavaScript

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

View Demo

This option accepts the following values:

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

View Demo

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.

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

This option accepts the following values.

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

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

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

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

See Also

• Appointment Types

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

See Also

• Appointment Types

View Demo

See Also

• Customize Resource Headers
• Custom Templates

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

• Demos: Resources | Grouping by Resources
• Resources

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.

DevExpress.config({
    rtlEnabled: true
});

See Also

• Right-to-Left Support Demo: DataGrid | Navigation Widgets | Editors

View Demo

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

See Also

• Timetable
• Custom Templates

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 Switcher. If you need to customize a view, add a configuration object for it to the array. The configuration options that you can specify are listed further in this documentation section. If a view does not need individual customization, just add its type to the array.

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

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

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

View Demo Watch Video

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