Customize Individual Views

To customize individual views, assign an array of configuration objects to the views option. Each object contains the type option that defines what view is customized. For the full list of options, refer to the API Reference.

The following code defines three views: the first is not customized, the second has specific cell duration and a custom template for the time scale, the third is grouped by resources.

jQuery
JavaScript
var data = [{
    text: "Google AdWords Strategy",
    ownerId: [2],
    startDate: new Date(2016, 1, 1, 9, 0),
    endDate: new Date(2016, 1, 1, 10, 30)
}, {
    text: "New Brochures",
    ownerId: [1],
    startDate: new Date(2016, 1, 1, 11, 30),
    endDate: new Date(2016, 1, 1, 14, 15)
}, 
// ...
];

var resources = [
    { text: "Samantha Bright", id: 1, color: "#cb6bb2" },
    { text: "John Heart", id: 2, color: "#56ca85" }
];

$(function(){
    $("#schedulerContainer").dxScheduler({
        dataSource: data,
        currentDate: new Date(2016, 1, 1),
        views: ["month", {
            type: "day",
            cellDuration: 60,
            timeCellTemplate: function(data, index, element) {
                element.text(data.text)
                        .css('color', 'green')
                        .css('font-style', 'italic');
            }
        }, {
            type: "workWeek",
            groups: ["ownerId"]
        }],
        resources: [{ fieldExpr: "ownerId", dataSource: resources }]
    });
});
Angular
HTML
TypeScript
<dx-scheduler
    [dataSource]="schedulerData"
    [currentDate]="currentDate"
    [views]="views"
    [resources]="resources">
    <div *dxTemplate="let appointment of 'timeCellTemplate'">
        <i style="color: green">{{appointment.text}}</i>
    </div>
</dx-scheduler>
export class AppComponent {
    schedulerData = [{
        text: "Google AdWords Strategy",
        ownerId: [2],
        startDate: new Date(2016, 1, 1, 9, 0),
        endDate: new Date(2016, 1, 1, 10, 30)
    }, {
        text: "New Brochures",
        ownerId: [1],
        startDate: new Date(2016, 1, 1, 11, 30),
        endDate: new Date(2016, 1, 1, 14, 15)
    }, 
    // ...
    ];
    currentDate = new Date(2016, 1, 1);
    views = [
        "month", 
        { type: "day", cellDuration: 60, timeCellTemplate: 'timeCellTemplate' }, 
        { type: "workWeek", groups: ["ownerId"] }
    ];
    resources = [{
        fieldExpr: "ownerId",
        dataSource: [
            { text: "Samantha Bright", id: 1, color: "#cb6bb2" },
            { text: "John Heart", id: 2, color: "#56ca85" }
        ]
    }];
}
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-scheduler="{
        dataSource: data,
        currentDate: currentDate,
        views: [
            "month", 
            { type: "day", cellDuration: 60, timeCellTemplate: 'timeCellTemplate' }, 
            { type: "workWeek", groups: ["ownerId"] }
        ],
        resources: [{ fieldExpr: 'ownerId', dataSource: resources }]
    }" dx-item-alias='item'>
        <div data-options="dxTemplate: { name: 'timeCellTemplate' }">
            <i style="color: green">{{item.text}}</i>
        </div>
    </div>
</div>
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        $scope.data = [{
            text: "Google AdWords Strategy",
            ownerId: [2],
            startDate: new Date(2016, 1, 1, 9, 0),
            endDate: new Date(2016, 1, 1, 10, 30)
        }, {
            text: "New Brochures",
            ownerId: [1],
            startDate: new Date(2016, 1, 1, 11, 30),
            endDate: new Date(2016, 1, 1, 14, 15)
        }, 
        // ...
        ];
        $scope.resources = [{
            fieldExpr: "ownerId",
            dataSource: [
                { text: "Samantha Bright", id: 1, color: "#cb6bb2" },
                { text: "John Heart", id: 2, color: "#56ca85" }
            ]
        }];
        $scope.currentDate = new Date(2016, 1, 1);
    });
Knockout
HTML
JavaScript
<div data-bind="dxScheduler: {
    dataSource: data,
    currentDate: currentDate,
    views: [
        "month", 
        { type: "day", cellDuration: 60, timeCellTemplate: 'timeCellTemplate' }, 
        { type: "workWeek", groups: ["ownerId"] }
    ],
    resources: [{ fieldExpr: 'ownerId', dataSource: resources }]
}">
    <div data-options="dxTemplate: { name: 'timeCellTemplate' }">
        <i style="color: green" data-bind="text: text"></i>
    </div>
</div>
var viewModel= {
    data: [{
        text: "Google AdWords Strategy",
        ownerId: [2],
        startDate: new Date(2016, 4, 24, 9, 0),
        endDate: new Date(2016, 4, 24, 10, 30)
    }, {
        text: "New Brochures",
        ownerId: [1],
        startDate: new Date(2016, 4, 24, 11, 30),
        endDate: new Date(2016, 4, 24, 14, 15)
    }, 
    // ...
    ],
    resources: [{
        fieldExpr: "ownerId",
        dataSource: [
            { text: "Samantha Bright", id: 1, color: "#cb6bb2" },
            { text: "John Heart", id: 2, color: "#56ca85" }
        ]
    }],
    currentDate: new Date(2016, 4, 24)
};

ko.applyBindings(viewModel);

View Demo

See Also