views[]

Configures individual views.

Type: Array
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 Selector. 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 configuring the widget using ASP.NET MVC Wrappers, 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

The template to be used for rendering appointments.

Type: template
Function parameters:
itemData: Object
The appointment object to be rendered.
itemIndex: Number
The index of the appointment to be rendered.
itemElement: jQuery
An HTML element of the appointment to be rendered.
Return Value: String|DOM Node|jQuery
A template name or a template container.
Default Value: 'item'

A binding context of an appointment 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 fields. To access another binding context within an appointment 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 template, use Angular binding variables.

AngularJS Approach
HTML
<div ng-controller="DemoController">
    <div dx-scheduler="{
        dataSource: schedulerData,
        currentDate: currentDate,
        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>
JavaScript
var appointements = [
    {
        text: "Website Re-Design Plan",
        priorityId: 2,
        startDate: new Date(2015, 4, 25, 9, 0),
        endDate: new Date(2015, 4, 25, 11, 30)
    }, // . . .
];

var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
    $scope.currentDate: new Date(2015, 4, 25);
    $scope.schedulerData = appointements;
    $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 appointment object whose tooltip should be rendered.
contentElement: jQuery
An HTML element of the appointment tooltip to be rendered.
Return Value: String|jQuery
A template name or a template 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 table cell object to be rendered.
itemIndex: Number
The index of the table cell to be rendered.
itemElement: jQuery
An HTML element of the table cell to be rendered.
Return Value: String|DOM Node|jQuery
A template name or a template 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, cell object fields are beyond reach. 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 currently rendered object that represents a date scale item.
itemIndex: Number
The index of the date scale item to be rendered.
itemElement: jQuery
An HTML element of the date scale item to be rendered.
Return Value: String|DOM Node|jQuery
A template name or a template 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.

So, in Knockout approach, you can bind template elements to the date scale item fields. To access another binding context within a template, use Knockout binding variables.

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

AngularJS Approach
HTML
<div ng-controller="DemoController">
    <div dx-scheduler="{
        dataSource: schedulerData,
        views: views,
        currentDate: currentDate
    }" dx-item-alias="item">
        <div data-options="dxTemplate: {name: 'dateTemplate'}">
            <div class="date">{{ item.text }}</div>
        </div>
    </div>
</div>
JavaScript
var appointements = [
    {
        text: "Website Re-Design Plan",
        priorityId: 2,
        startDate: new Date(2015, 4, 25, 9, 0),
        endDate: new Date(2015, 4, 25, 11, 30)
    }, // . . .
];

var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
    $scope.currentDate: new Date(2015, 4, 25);
    $scope.schedulerData = appointements;
    $scope.views = [
        "day",
        { type: "workWeek", dateCellTemplate: "dateTemplate" }
    ];
});
NOTE
There is no dateCellTemplate in such views as 'day' and 'timelineDay'.
See Also

endDayHour

The end hour of the view time scale.

Type: Number
Default Value: 24

firstDayOfWeek

The first day of a week.

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

When configuring the widget using ASP.NET MVC Wrappers, 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
Default Value: []

resourceCellTemplate

The template to be used for rendering resource headers.

Type: template
Function parameters:
itemData: Object
The resource header object to be rendered.
itemIndex: Number
The index of the resource header to be rendered.
itemElement: jQuery
An HTML element of the resource header to be rendered.
Return Value: String|DOM Node|jQuery
A template name or a template container.
Default Value: null

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

So, in Knockout approach, you can bind template elements to the resource object fields. To access another binding context within a resource template, use Knockout binding variables.

In AngularJS approach, 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, resource object fields are beyond reach. To access another binding context within a resource template, use Angular binding variables.

AngularJS Approach
HTML
<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>
JavaScript
var appointements = [
    {
        text: "Website Re-Design Plan",
        priorityId: 2,
        startDate: new Date(2015, 4, 25, 9, 0),
        endDate: new Date(2015, 4, 25, 11, 30)
    }, // . . .
];

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 = {
        dataSource: appointements,
        currentDate: new Date(2015, 4, 25),
        views: [
            "day",
            { type: "workWeek", resourceCellTemplate: "resourceTemplate" }
        ],
        groups: ["priorityId"],
        resources: [
            { 
                 field: "priorityId", 
                 allowMultiple: false, 
                 dataSource: priorityData,
                 label: "Priority"
            }
        ]
    };
});

View Demo

See Also

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 currently rendered object that represents a time scale item.
itemIndex: Number
The index of the time scale item to be rendered.
itemElement: jQuery
An HTML element of the time scale item to be rendered.
Return Value: String|DOM Node|jQuery
A template name or a template 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.

So, in Knockout approach, you can bind template elements to the time scale item fields. To access another binding context within a template, use Knockout binding variables.

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

AngularJS Approach
HTML
<div ng-controller="DemoController">
    <div dx-scheduler="{
        dataSource: schedulerData,
        currentDate: currentDate,
        views: views
    }" dx-item-alias="item">
        <div data-options="dxTemplate: {name: 'timeTemplate'}">
            <div class="time">{{ item.text }}</div>
        </div>
    </div>
</div>
JavaScript
var appointements = [
    {
        text: "Website Re-Design Plan",
        priorityId: 2,
        startDate: new Date(2015, 4, 25, 9, 0),
        endDate: new Date(2015, 4, 25, 11, 30)
    }, // . . .
];

var DemoApp = angular.module('DemoApp', ['dx']);
DemoApp.controller('DemoController', function DemoController($scope) {
    $scope.currentDate: new Date(2015, 4, 25);
    $scope.schedulerData = appointements;
    $scope.views = [
        "day",
        { type: "workWeek", timeCellTemplate: "timeTemplate" }
    ];
});
NOTE
There is no timeCellTemplate in such views as 'moth', '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 configuring the widget using ASP.NET MVC Wrappers, specify this option using the SchedulerViewType enum. This enum accepts the following values: Day, Week, WorkWeek, Month, TimelineDay, TimelineWeek, TimelineWorkWeek, TimelineMonth and Agenda.