Box
Map
max
min
Vue

views[]

Specifies and configures the views to be available in the view switcher.

Type:

Array<String | Object>

Default Value: ['day', 'week']
Accepted Values: 'day' | 'week' | 'workWeek' | 'month' | 'timelineDay' | 'timelineWeek' | 'timelineWorkWeek' | 'timelineMonth' | 'agenda'

This option accepts an array of strings and objects:

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

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

To specify the default view, use the currentView option.

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

View Demo

agendaDuration

Specifies the number of dates that can be shown at a time in the agenda view.

Type:

Number

Default Value: 7

appointmentCollectorTemplate

Specifies a custom template for cell overflow indicators in this view.

Type:

template

Function parameters:
data:

Object

Information about a cell overflow indicator.

Object structure:
Name Type Description
appointmentCount

Number

The count of hidden appointments.

isCompact

Boolean

Indicates whether the overflow indicator is compact.

collectorElement:

Element (jQuery or HTML)

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

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: 'appointmentCollector'
jQuery
index.js
$(function() {
    $("#schedulerContainer").dxScheduler({
        // ...
        views: [{
            // ...
            appointmentCollectorTemplate: function(data, $indicatorElement) {
                $indicatorElement.append(
                    // Custom jQuery elements go here
                )
                // ===== or =====
                return /* your markup goes here */
            }
        },
        // ...
        ]
    });
});
Angular
app.component.html
app.module.ts
<dx-scheduler ... >
    <dxi-view ...
        appointmentCollectorTemplate="myTemplate">
    </dxi-view>
    <div *dxTemplate="let data of 'myTemplate'">
        <!-- your markup goes here -->
    </div>
</dx-scheduler>
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxSchedulerModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxSchedulerModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue
App.vue
<template>
    <dx-scheduler ... >
        <dx-view ...
            appointment-collector-template="myTemplate"
        />
        <template #myTemplate="{ data }">
            <!-- your markup goes here -->
        </template>
  </dx-scheduler>
</template>

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

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

export default {
    components: {
        DxScheduler,
        DxView
    },
    data() {
        return {
            // ...
        }
    }
}
</script>
React
App.js
import React from 'react';

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

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

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

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

export default App;
See Also

appointmentTemplate

Specifies a custom template for appointments.

Type:

template

Function parameters:
model:

Object

The data of the appointment being customized.

Object structure:
Name Type Description
appointmentData

Object

The appointment's data object.

targetedAppointmentData

Object

The appointment's data object.
The difference between this and appointmentData fields is explained in the onAppointmentClick description.

itemIndex:

Number

The appointment's index.

contentElement:

Element (jQuery or HTML)

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

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: 'item'

appointmentTooltipTemplate

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

Type:

template

Function parameters:
model:

Object

The data of the appointment for which the tooltip is displayed.

Object structure:
Name Type Description
appointmentData

Object

The appointment's data object.

targetedAppointmentData

Object

The appointment's data object.
The difference between this and appointmentData fields is explained in the onAppointmentClick description.

itemIndex:

Number

The appointment's index.

contentElement:

Element (jQuery or HTML)

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

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: 'appointmentTooltip'

cellDuration

The cell duration in minutes.

Type:

Number

Default Value: 30

dataCellTemplate

Specifies a custom template for table cells.

Type:

template

Function parameters:
itemData:

Object

The current table cell's data.

itemIndex:

Number

The current table cell's index.

itemElement:

Element (jQuery or HTML)

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

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: null
NOTE
There is no dataCellTemplate in the agenda view.

View Demo

See Also

dateCellTemplate

Specifies a custom template for date scale items.

Type:

template

Function parameters:
itemData:

Object

The data of the current date scale item.

itemIndex:

Number

The item's index.

itemElement:

Element (jQuery or HTML)

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

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: null
NOTE
There is no dateCellTemplate in such views as "day" and "timelineDay".
See Also

dropDownAppointmentTemplate Deprecated

Use the appointmentTooltipTemplate option instead.

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

Type:

template

Function parameters:
itemData:

Object

The appointment's object.

itemIndex:

Number

The appointment's index.

contentElement:

Element (jQuery or HTML)

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

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: 'dropDownAppointment'

endDayHour

Specifies the last hour on the view's time scale. Accepts integer values from 0 to 24.

Type:

Number

Default Value: 24

firstDayOfWeek

The first day of a week. Does not apply to the agenda view.

Type:

Number

Default Value: undefined
Accepted Values: 0 | 1 | 2 | 3 | 4 | 5 | 6

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.

groupByDate

If true, appointments are grouped by date first and then by resource; opposite if false. Applies only if appointments are grouped and groupOrientation is "horizontal".

Type:

Boolean

Default Value: false

groupOrientation

Arranges resource headers vertically (in a column) or horizontally (in a row).

Type:

String

Accepted Values: 'horizontal' | 'vertical'

This option's default value depends on the view type. The following list illustrates the dependency:

  • "horizontal"
    For the day, month, week, and workWeek view types.

  • "vertical"
    For the timelineDay, timelineMonth, timelineWeek, and timelineWorkWeek view types. For the agenda, resource headers are always organized vertically.

View Demo

See Also

groups

The resource kinds by which appointments are grouped.

Type:

Array<String>

Default Value: []

intervalCount

Multiplies the default view interval. Applies to all view types except "agenda".

Type:

Number

Default Value: 1

The following is a list of views and their default intervals:

  • "day", "timelineDay" - a day
  • "week", "timelineWeek" - a week
  • "workWeek", "timelineWorkWeek" - a week without weekends
  • "month" - a month

View Demo

See Also

maxAppointmentsPerCell

Specifies the limit of full-sized appointments displayed per cell. Applies to all views except "agenda".

Type:

Number

|

String

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

name

A custom name for the view. This name goes to the view switcher.

Type:

String

Default Value: undefined

resourceCellTemplate

Specifies a custom template for resource headers.

Type:

template

Function parameters:
itemData:

Object

The current resource header's data.

itemIndex:

Number

The current resource header's index.

itemElement:

Element (jQuery or HTML)

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

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: null

startDate

Specifies the date from which to start counting the view interval. Applies to all view types except "agenda".

Type:

Date

|

Number

|

String

Default Value: undefined

If this option is not defined, the count starts from the currentDate.

View Demo

startDayHour

Specifies the first hour on the view's time scale. Accepts integer values from 0 to 24.

Type:

Number

Default Value: 0

timeCellTemplate

Specifies a custom template for time scale items.

Type:

template

Function parameters:
itemData:

Object

The data of the current time scale item.

itemIndex:

Number

The item's index.

itemElement:

Element (jQuery or HTML)

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

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

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

type

The name of the view.

Type:

String

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

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.