Vue Scheduler Props

See Also

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

View Demo

View Demo

View Demo

To hide the All day panel, set this property to hidden.

If you set the allDayPanelMode property to allDay, the All day panel displays only the appointments whose allDay property is set to true.

To also display appointments that have a duration equal to or more than 24 hours, assign all to this property.

$(function() {
    $("#schedulerContainer").dxScheduler({
        // ...
        allDayPanelMode: 'all',
    });
});

<dx-scheduler ... 
    allDayPanelMode="all">
</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 ...
        all-day-panel-mode="all">
    </DxScheduler>
</template>

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

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

class App extends React.Component {
    render() {
        return (
            <Scheduler ...
                allDayPanelMode="all"
            />
        );
    }
}

export default App;

$(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.light.css';

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

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

import React from 'react';

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

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

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

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

export default App;

See Also

• views[].appointmentCollectorTemplate

View Demo

View Demo

See Also

• Customize Appointment
• Custom Templates

If you want to change tooltip appearance, implement a custom template with the appointmentTooltipTemplate property. Refer to the Customize Appointment Tooltip section for details.

View Demo

See Also

• views[].appointmentTooltipTemplate
• Custom Templates

View Demo

This property is useful when displaying Scheduler on narrow screens.

View Demo

Users can change the current date in the Date Navigator:

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

View Demo

View Demo

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

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

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>

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

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

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

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

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

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

import Scheduler from 'devextreme-react/scheduler';

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

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

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

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

export default App;

The following image shows the difference between Scheduler cell types:

Use this template for data cells only.

The data of this template consists of the following fields:

View Demo

See Also

• Timetable
• Custom Templates

The Scheduler works with collections of objects.

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

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

• Read-Only Data in JSON Format
  Set the dataSource property to the URL of a JSON file or service that returns JSON data.

• OData
  Implement an ODataStore.

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

  • 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.light.css';
  
  import CustomStore from 'devextreme/data/custom_store';
  import { createStore } from 'devextreme-aspnet-data-nojquery';
  import { DxScheduler } from 'devextreme-vue/scheduler';
  
  export default {
      components: {
          DxScheduler
      },
      data() {
          const serviceUrl = "https://url/to/my/service";
          const store = createStore({
              key: "ID",
              loadUrl: serviceUrl + "/GetAction",
              insertUrl: serviceUrl + "/InsertAction",
              updateUrl: serviceUrl + "/UpdateAction",
              deleteUrl: serviceUrl + "/DeleteAction"
          });
          return {
              store
          }
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  import 'devextreme/dist/css/dx.light.css';
  
  import CustomStore from 'devextreme/data/custom_store';
  import { createStore } from 'devextreme-aspnet-data-nojquery';
  import Scheduler from 'devextreme-react/scheduler';
  
  const serviceUrl = "https://url/to/my/service";
  const store = createStore({
      key: "ID",
      loadUrl: serviceUrl + "/GetAction",
      insertUrl: serviceUrl + "/InsertAction",
      updateUrl: serviceUrl + "/UpdateAction",
      deleteUrl: serviceUrl + "/DeleteAction"
  });
  
  class App extends React.Component {
      render() {
          return (
              <Scheduler ...
                  dataSource={store} />
          );
      }
  }
  export default App;

  View Demo

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

The following image shows the difference between Scheduler cell types:

Use this template for date cells only.

The data of this template consists of the following fields:

View Demo

See Also

• Timetable
• Custom Templates

Specify this property in the following cases:

• The dataSource is empty or not set at design time. The dateSerializationFormat is needed, because the Scheduler cannot detect it automatically without a data source.

• You use the createStore method from the DevExtreme.AspNet.Data extension and remote date-time values are specified in UTC. DevExtreme.AspNet.Data requires the dateSerializationFormat to correctly serialize these values.

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

• "yyyy-MM-dd" - local date

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

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

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

This property applies only if the forceIsoDateParsing field is set to true in the global configuration object.

Web API Service Demo SignalR Service Demo

See Also

• Troubleshooting - Date values are parsed or serialized incorrectly

View Demo

See Also

• Custom Templates
• views.dropDownAppointmentTemplate

View Demo

View Demo

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

View Demo

This property can accept a value from 0 to 6:

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

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

View Demo

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

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

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

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

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

import React from 'react';

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

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

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

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

export default App;

To group appointments in the agenda view or by one type of resource, for instance, to group appointments that use a particular room in an office, assign an array with a single element to the groups property. To group appointments by several resource types, assign an array of elements. Each element represents a resource by which appointments are grouped. Each resource is nested in the resource represented by the previous element in the groups array.

View Demo

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

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".

• Function (deprecated since v21.2)
  Refer to the W0017 warning description for information on how you can migrate to viewport units.

View Demo

When you set this property to "auto", appointments shrink to a predefined size that depends on the view type. Appointments that do not fit into the cell are hidden, and the cell displays an overflow indicator. Users can click the indicator to display the hidden appointments in a tooltip. The "unlimited" value shrinks appointments without a limit to fit into a cell.

To specify the maximum number of appointments allowed in a single cell, set the property to Number. Appointments that exceed this number are hidden, and the cell displays an overflow indicator. Users can click the indicator to display the hidden appointments in a tooltip.

View Demo

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

View Demo

View Demo

In case of recurring appointments or appointments with multiple resources, you may need the data object of the clicked appointment, 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"
    } */
}

Additionally, the targetedAppointmentData field has the displayStartDate and displayEndDate date objects. These objects contain time-zone adjusted dates if you specify the timeZone property. If the latter property is not specified, the date objects mentioned above have the same values as the startDate and endDate objects.

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

View Demo

View Demo

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

The form organizes its items into two groups:

The table below lists 'mainGroup' editor names:

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

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

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

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

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

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

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

import DxScheduler from 'devextreme-vue/scheduler';

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

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

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

import React from 'react';

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

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

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

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

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

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

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

View Demo

See Also

• Form - Change Properties at Runtime

View Demo

View Demo

View Demo

If data displayed by the UI component is specified using a DataSource instance, the contentReady event fires each time the load() method of the DataSource instance is called, as well as when the UI component content is ready or an appointment is modified.

See Also

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

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

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

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

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

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

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

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

export class AppModule { }  

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

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

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

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

import Scheduler from 'devextreme-react/scheduler'; 

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

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

This property accepts the following values:

• "series"
  Enables a user to edit only entire appointment series.

• "occurrence"
  Enables a user to edit only individual appointment instances.

• "dialog"
  Displays a dialog that suggests a user to choose between editing the entire series or only the individual instance.

View Demo

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

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

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

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

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

View Demo

See Also

• Appointment Types

View Demo

See Also

• Appointment Types

Web API Service Demo SignalR Service 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. The Scheduler does not support grouping resources by multiple data fields in the agenda view.

Resources Demo Grouping by Resources Demo

When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

DevExpress.config({
    rtlEnabled: true
});

DataGrid Demo Navigation UI Demo Editors Demo

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

View Demo

See Also

• scrollTo(date, group, allDay)

This array contains objects with the following structure:

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

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

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

See Also

• Group Appointments by Resources
• showAllDayPanel

View Demo

View Demo

View Demo

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

View Demo

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

View Demo

The following image shows the difference between Scheduler cell types:

Use this template for time cells only.

View Demo

See Also

• Timetable
• Custom Templates

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

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

View Demo

See Also

• Time Zone Support

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

View Demo

This property accepts an array of strings and objects:

• String
  A view name. Use a string if the view does not need customization, but should be available in the view switcher.

• Object
  An individual view's configuration. Set the type property to specify the view to which the configuration should apply. This documentation section describes available properties. The properties set for an individual view have a higher priority than the same properties set on the root level for all views.

  JavaScript

  views: [{
          type: 'workWeek',
          name: 'Vertical Grouping',
          groupOrientation: 'vertical',
          cellDuration: 60,
          intervalCount: 2,
      }, {
          type: 'workWeek',
          name: 'Horizontal Grouping',
          groupOrientation: 'horizontal',
          cellDuration: 30,
          intervalCount: 2,
      },
      'agenda'
  ]

To specify the default view, use the currentView property.

View Demo

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

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "20vw", "80%", "auto", "inherit".

• Function (deprecated since v21.2)
  Refer to the W0017 warning description for information on how you can migrate to viewport units.