views

Configures individual views.

Type:

Array<String>

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

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.

JavaScript
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

Show Example:
AngularJS
Knockout
jQuery

agendaDuration

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

Type:

Number

By default, the agenda view shows appointments for 7 dates at a time.

appointmentTemplate

Specifies a custom template for an appointment.

Type:

template

Function parameters:
itemData:

Object

The current appointment's data.

itemIndex:

Number

The current appointment's index.

itemElement:

Element (jQuery or HTML)

The current appointment's container.

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: 'item'

If you use the Angular, AngularJS or Knockout library, you can implement this template with the dxTemplate markup component. This template's binding context depends on the library you use.

Angular

In Angular apps, an item's object and index extend the standard binding context (a component instance). Access the former using the input variable that is declared after the let and before of keywords, and the latter by the variable that is set to the index property.

HTML
TypeScript
<dx-scheduler ...
    [views]="views">
    <div *dxTemplate="let appointment of 'appointmentTemplate'; let i = index">
        <div class="appointment-header">[{{i}}] {{appointment.text}}</div>
        <div class="appointment-time">{{appointment.startDate}} - {{appointment.endDate}}</div>
    </div>
</dx-scheduler>
import { DxSchedulerModule } from 'devextreme-angular';
// ...
export class AppComponent  { 
    // ...
    views = [
        "day",
        { type: "workWeek", appointmentTemplate: "appointmentTemplate" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
AngularJS

In AngularJS apps, an item's object and index extend the standard binding context (the scope). Access the former using an alias that you specify in the dx-item-alias directive, and the latter the $index variable. Use AngularJS binding variables if you need to access another binding context from the template.

HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-scheduler="{ 
        ...
        views: views
    }" dx-item-alias="appItem">
        <div data-options="dxTemplate: { name: 'appointmentTemplate' }" style="padding: 0;">
            <div class="appointment-header">{{appItem.text}}</div>
            <div class="appointment-time">{{appItem.startDate}} - {{appItem.endDate}}</div>
        </div>
    </div>
</div>
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
    // ...
    $scope.views = [
        "day",
        { type: "workWeek", appointmentTemplate: "appointmentTemplate" }
    ];
});
See Also

appointmentTooltipTemplate

The template to be used for rendering an appointment tooltip.

Type:

template

Function parameters:
appointmentData:

Object

The data of the appointment whose tooltip is rendered.

contentElement:

Element (jQuery or HTML)

The appointment's container.

Return Value:

String

|

jQuery

A template name or container.

Default Value: 'appointmentTooltip'

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 Angular binding variables.

See Also

cellDuration

The cell duration in minutes.

Type:

Number

Default Value: 30

dataCellTemplate

The template to be used for rendering 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 current table cell's container.

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: null

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

So, in 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 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, the fields of cell object are unavailable. To access another binding context within a table cell template, use Angular binding variables.

NOTE
There is no dataCellTemplate in the agenda view.

View Demo

See Also

dateCellTemplate

The template to be used for rendering 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.

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: null

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

Angular

Use a variable that is declared in the template via the let keyword to access day scale item fields in Angular apps.

HTML
TypeScript
<dx-scheduler ...
    [views]="views">
    <div *dxTemplate="let date of 'dateTemplate'">
        <div class="date">{{date.text}}</div>
    </div>
</dx-scheduler>
import { DxSchedulerModule } from 'devextreme-angular';
// ...
export class AppComponent  { 
    // ...
    views = [
        "day",
        { type: "workWeek", dateCellTemplate: "dateTemplate" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
AngularJS

In AngularJS apps, 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 unavailable. To access another binding context within a date scale template, use Angular binding variables.

HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-scheduler="{ 
        ...
        views: views
    }" dx-item-alias="item">
        <div data-options="dxTemplate: { name: 'dateTemplate' }">
            <div class="date">{{ item.text }}</div>
        </div>
    </div>
</div>
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
    // ...
    $scope.views = [
        "day",
        { type: "workWeek", dateCellTemplate: "dateTemplate" }
    ];
});
NOTE
There is no dateCellTemplate in such views as 'day' and 'timelineDay'.
See Also

dropDownAppointmentTemplate

The template to be used for rendering appointments in the appointment collector's drop-down list.

Type:

template

Function parameters:
itemData:

Object

The current appointment's object.

itemIndex:

Number

The current appointment's index.

itemElement:

Element (jQuery or HTML)

The current appointment's container.

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: 'dropDownAppointment'

This template's binding context is the object that corresponds to the currently rendered appointment.

jQuery
JavaScript
$(function () {
    $("#scheduler").dxScheduler({
        // ...
        dataSource: [{
            text: 'Meeting customers',
            startDate: new Date(2017, 4, 10, 11, 0),
            endDate: new Date(2017, 4, 10, 13, 0),
            imgSrc: "images/1-small.png"

        }, {
            text: 'Summing up the results',
            startDate: new Date(2017, 4, 11, 12, 0),
            endDate: new Date(2017, 4, 11, 13, 0),
            imgSrc: "images/2-small.png"
        },
        // ...
        ],
        views: [
            "day",
            { 
                type: "month",
                dropDownAppointmentTemplate: function (data, index) {
                    return $("<div />").append(
                        $("<img />").attr("src", data.imgSrc),
                        $("<p />").text(data.text)
                                .css("display", "inline-block")
                                .css("font-style", (index % 2 == 0) ? "italic" : "normal")
                    );
                }
            }
        ]
    });
});
Angular
HTML
TypeScript
<dx-scheduler ...
    [dataSource]="appointments"
    [views]="[
        'day', 
        { type: 'month', dropDownAppointmentTemplate: 'ddAppointmentTemplate' }
    ]">
    <div *dxTemplate="let appointment of 'ddAppointmentTemplate'; let i = index">
        <img src="{{appointment.imgSrc}}"/>
        <div 
            style="display:inline-block" 
            [style.font-style]="i % 2 == 0 ? 'italic' : 'normal'">
            {{appointment.text}}
        </div>
    </div>
</dx-scheduler>
import { DxSchedulerModule } from 'devextreme-angular';
// ...
export class AppComponent {
    appointments = [{
        text: 'Meeting customers',
        startDate: new Date(2017, 4, 10, 11, 0),
        endDate: new Date(2017, 4, 10, 13, 0),
        imgSrc: "images/1-small.png"

    }, {
        text: 'Summing up the results',
        startDate: new Date(2017, 4, 11, 12, 0),
        endDate: new Date(2017, 4, 11, 13, 0),
        imgSrc: "images/2-small.png"
    },
    // ...
    ];
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
See Also

endDayHour

The end hour of the view time scale.

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

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.

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. In the "day", "week" and "workweek" views, this option applies only to all-day appointments.

Type:

Number

|

String

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

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.

name

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

Type:

String

Default Value: undefined

resourceCellTemplate

The template to be used for rendering 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 current resource header's container.

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: null

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

Angular

Use a variable that is declared in the template via the let keyword to access resource object fields in Angular apps.

HTML
TypeScript
<dx-scheduler ...
    [views]="views"
    [groups]="['priorityId']"
    [resources]="resources">
    <div *dxTemplate="let resource of 'resourceTemplate'">
        <img [src]="resource.image">
        <div class="resource-header">{{resource.text}}</div>
    </div>
</dx-scheduler>
import { DxSchedulerModule } from 'devextreme-angular';
// ...
export class AppComponent  { 
    // ...
    priorityData = [
        { text: "Low Priority", image: "img1.png", id: 1, color: "#1e90ff" }, 
        { text: "High Priority", image: "img2.png", id: 2, color: "#ff9747" }
    ];
    resources: [{ 
        field: "priorityId", 
        allowMultiple: false, 
        dataSource: this.priorityData, 
        label: "Priority" 
    }];
    views = [
        "day",
        { type: "workWeek", resourceCellTemplate: "resourceTemplate" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
AngularJS

In AngularJS apps, 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, the fields of resource object are unavailable. To access another binding context within a resource template, use Angular binding variables.

HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-scheduler="options" dx-item-alias="item">
        <div data-options="dxTemplate: { name: 'resourceTemplate' }">
            <img src="{{ item.image }}">
            <div class="resource-header">{{ item.text }}</div>
        </div>
    </div>
</div>
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 = { 
        // ...
        views: [
            "day",
            { type: "workWeek", resourceCellTemplate: "resourceTemplate" }
        ],
        groups: ["priorityId"],
        resources: [{ 
            field: "priorityId", 
            allowMultiple: false, 
            dataSource: this.priorityData, 
            label: "Priority" 
        }]
    };
});

View Demo

See Also

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

The start hour of the view time scale.

Type:

Number

Default Value: 0

timeCellTemplate

The template to be used for rendering 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.

Return Value:

String

|

DOM Node

|

jQuery

A template name or container.

Default Value: null

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

Angular

Use a variable that is declared in the template via the let keyword to access time scale item fields in Angular apps.

HTML
TypeScript
<dx-scheduler ...
    [views]="views">
    <div *dxTemplate="let time of 'timeCellTemplate'">
        <div class="time">{{time.text}}</div>
    </div>
</div>
import { DxSchedulerModule } from 'devextreme-angular';
// ...
export class AppComponent  { 
    // ...
    views = [
        "day",
        { type: "workWeek", timeCellTemplate: "timeCellTemplate" }
    ];
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
AngularJS

In AngularJS apps, 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, the fields of time scale item are unavailable. To access another binding context within a time scale template, use Angular binding variables.

HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-scheduler="{ 
        ...
        views: views
    }" dx-item-alias="item">
        <div data-options="dxTemplate: { name: 'timeTemplate' }">
            <div class="time">{{item.text}}</div>
        </div>
    </div>
</div>
var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
    // ...
    $scope.views = [
        "day",
        { type: "workWeek", timeCellTemplate: "timeTemplate" }
    ];
});
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: 'day' | 'week' | 'workWeek' | 'month' | 'timelineDay' | 'timelineWeek' | 'timelineWorkWeek' | 'timelineMonth' | 'agenda'

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.