Vue Scheduler Props

See Also

• Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core

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

View Demo

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

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

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

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

• views[].appointmentCollectorTemplate

View Demo

See Also

• Customize Appointment
• Custom Templates

View Demo

See Also

• views[].appointmentTooltipTemplate
• 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.

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

• Views
• View Switcher

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

$(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;
        }
    });
})

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>

View Demo

See Also

• Timetable
• Custom Templates

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:

  • DevExtreme.AspNet.Data
  • DevExtreme-PHP-Data
  • devextreme-query-mongodb

  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.

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.

See Also

• Custom Templates
• views.dropDownAppointmentTemplate

Editing a recurring appointment series has specificities related to when a user edits a recurring appointment instance.

If a user updates the instance, two actions are performed on the data objects:

• The series' data object is updated.
  The Scheduler updates the field specified by recurrenceExceptionExpr, thus adding the edited instance to exceptions. The onAppointmentUpdating and onAppointmentUpdated event handlers are executed.

• A new data object is created.
  This object contains the edited instance's data. The onAppointmentAdding and onAppointmentAdded event handlers are executed.

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

View Demo

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.

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.

View Demo

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

var resources = [
    { fieldExpr: "room", dataSource: roomsDataSource },
    { fieldExpr: "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 = [
        { 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

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

View Demo

View Demo

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:

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:

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"
    } */
}

View Demo

The appointment details form contains the Form widget whose instance is passed to this function in the form field. Use the widget's API to customize the appointment details form.

The following code shows how to use the onAppointmentFormOpening function to customize a form item (startDate), make hidden items visible (startDateTimeZone and endDateTimeZone), and add a new form item (location). Note that in the last case, the array of form items should be checked to ensure that it does not already contain an item with the same data field.

$(function(){
    $("#schedulerContainer").dxScheduler({
        dataSource: [{
            text: "His Girl Friday",
            startDate: new Date(2016, 4, 24, 9, 10),
            endDate: new Date(2016, 4, 24, 11, 20),
            location: "Minnesota"
        }, // ...
        ],
        currentDate: new Date(2016, 4, 24),
        onAppointmentFormOpening: function (e) {
            var form = e.form,
                formItems = form.option("items");
            form.itemOption("startDate", {
                helpText: "Select a date between May 11 and 27",
                editorOptions: {
                    min: new Date(2016, 4, 11),
                    max: new Date(2016, 4, 27),
                    type: 'datetime'
                }
            });
            form.itemOption("startDateTimeZone", { visible: true });
            form.itemOption("endDateTimeZone", { visible: true });
            if (!formItems.find(function(i) { return i.dataField === "location" })) {
                formItems.push({
                    label: { text: "Location" },
                    editorType: "dxTextBox",
                    dataField: "location"
                });
                form.option("items", formItems);
            }
        }
    });
});

import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
    schedulerData = [{
        text: "His Girl Friday",
        startDate: new Date(2016, 4, 24, 9, 10),
        endDate: new Date(2016, 4, 24, 11, 20),
        location: "Minnesota"
    }, // ...
    ];
    currentDate = new Date(2016, 4, 24);
    onAppointmentFormOpening (e) {
        let form = e.form
            formItems = form.option("items");
        form.itemOption("startDate", {
            helpText: "Select a date between May 11 and 27",
            editorOptions: {
                min: new Date(2016, 4, 11),
                max: new Date(2016, 4, 27),
                type: 'datetime'
            }
        });
        form.itemOption("startDateTimeZone", { visible: true });
        form.itemOption("endDateTimeZone", { visible: true });
        if (!formItems.find(i => i.dataField === "location")) {
            formItems.push({
                label: { text: "Location" },
                editorType: "dxTextBox",
                dataField: "location"
            });
            form.option("items", formItems);
        }
    }
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})

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

View Demo

See Also

• Form - Change Options at Runtime

View Demo

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.

See Also

• Get a Widget Instance in Angular | AngularJS | Knockout | Vue | React

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.

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.

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

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

• Group Appointments by Resources
• showAllDayPanel

View Demo

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.

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

This option accepts values from the IANA time zone database.

If this option is unspecified, appointments are displayed in the client's time zone.

Alternatively, you can specify the startDateTimeZone and the endDateTimeZone for individual appointments. Note that the timeZone option takes precedence over these options.

View Demo

See Also

• Time Zone Support

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

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

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