Timetable

The Scheduler widget allows you to customize its timetable: to specify the time period for it and the duration of a single cell. For this purpose, use the startDayHour, endDayHour and cellDuration options. Using the firstDayOfWeek option, you can define the day of the week that will be shown first.

jQuery
JavaScript
$(function() {
    $("#schedulerContainer").dxScheduler({
        dataSource: [{
            text: "Website Re-Design Plan",
            startDate: new Date(2016, 4, 25, 9, 30),
            endDate: new Date(2016, 4, 25, 11, 30)
        }, {
            text: "Book Flights to San Fran for Sales Trip",
            startDate: new Date(2016, 4, 25, 12, 0),
            endDate: new Date(2016, 4, 25, 13, 0)
        }, 
        // ...
        ],
        currentDate: new Date(2016, 4, 25),
        startDayHour: 8,
        endDayHour: 19,
        cellDuration: 60,
        firstDayOfWeek: 1
    });
});
Angular
HTML
TypeScript
<dx-scheduler
    [dataSource]="schedulerData"
    [currentDate]="currentDate"
    [startDayHour]="8"
    [endDayHour]="19"
    [cellDuration]="60"
    [firstDayOfWeek]="1">
</dx-scheduler>
import { DxSchedulerModule } from 'devextreme-angular';
// ...
export class AppComponent  {
    schedulerData = [{
        text: "Website Re-Design Plan",
        startDate: new Date(2016, 4, 25, 9, 30),
        endDate: new Date(2016, 4, 25, 11, 30)
    }, {
        text: "Book Flights to San Fran for Sales Trip",
        startDate: new Date(2016, 4, 25, 12, 0),
        endDate: new Date(2016, 4, 25, 13, 0)
    }, 
    // ...
    ];
    currentDate = new Date(2016, 4, 25);
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})

In addition, you can define custom templates for cells, time scales and date scales. For Angular, AngularJS and Knockout apps, DevExtreme provides a markup component called dxTemplate. The following code shows how you can use dxTemplate to define templates for timetable parts.

Angular
HTML
TypeScript
<dx-scheduler
    [dataSource]="schedulerData"
    [currentDate]="currentDate"
    [showAllDayPanel]="false"
    currentView="week"
    dataCellTemplate="dataCellTemplate"
    dateCellTemplate="dateCellTemplate"
    timeCellTemplate="timeCellTemplate">
    <div *dxTemplate="let data of 'dataCellTemplate'">
        <div style="width: 100%; height: 40px; background-color: rgba(86, 202, 133, 0.1);"></div>
    </div>
    <div *dxTemplate="let date of 'dateCellTemplate'">
        <b style="color: green">{{date.text}}</b>
    </div>
    <div *dxTemplate="let time of 'timeCellTemplate'">
        <i style="color: green">{{time.text}}</i>
    </div>
</dx-scheduler>
import { DxSchedulerModule } from 'devextreme-angular';
// ...
export class AppComponent  {
    schedulerData = [{
        text: "His Girl Friday",
        startDate: new Date(2016, 4, 24, 9, 10),
        endDate: new Date(2016, 4, 24, 11, 20)
    }, {
        text: "Royal Wedding",
        startDate: new Date(2016, 4, 24, 10, 5),
        endDate: new Date(2016, 4, 24, 11, 30)
    }, 
    // ...
    ];
    currentDate = new Date(2016, 4, 24);
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
AngularJS
HTML
JavaScript
<div ng-controller="DemoController">
    <div dx-scheduler="{
        dataSource: schedulerData,
        currentDate: currentDate,
        showAllDayPanel: false,
        currentView: 'week',
        dataCellTemplate: 'dataCellTemplate',
        dateCellTemplate: 'dateCellTemplate',
        timeCellTemplate: 'timeCellTemplate'
    }" dx-item-alias="item">
        <div data-options="dxTemplate: { name: 'dataCellTemplate' }">
            <div style="width: 100%; height: 40px; background-color: rgba(86, 202, 133, 0.1);"></div>
        </div>
        <div data-options="dxTemplate: { name: 'dateCellTemplate' }">
            <b style="color: green">{{item.text}}</b>
        </div>
        <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.schedulerData = [{
            text: "His Girl Friday",
            startDate: new Date(2016, 4, 24, 9, 10),
            endDate: new Date(2016, 4, 24, 11, 20)
        }, {
            text: "Royal Wedding",
            startDate: new Date(2016, 4, 24, 10, 05),
            endDate: new Date(2016, 4, 24, 11, 30)
        }, 
        // ...
        ];
        $scope.currentDate = new Date(2016, 4, 24); 
    });
NOTE
The dx-item-alias directive specifies the variable that is used to access the item object.
Knockout
HTML
JavaScript
<div data-bind="dxScheduler: {
    dataSource: schedulerData,
    currentDate: currentDate,
    showAllDayPanel: false,
    currentView: 'week',
    dataCellTemplate: 'dataCellTemplate',
    dateCellTemplate: 'dateCellTemplate',
    timeCellTemplate: 'timeCellTemplate'
}">
    <div data-options="dxTemplate: { name: 'dataCellTemplate' }">
        <div style="width: 100%; height: 40px; background-color: rgba(86, 202, 133, 0.1);"></div>
    </div>
    <div data-options="dxTemplate: { name: 'dateCellTemplate' }">
        <b style="color: green" data-bind="text: text"></b>
    </div>
    <div data-options="dxTemplate: { name: 'timeCellTemplate' }">
        <i style="color: green" data-bind="text: text"></i>
    </div>
</div>
var viewModel= {
    schedulerData: [{
        movie: "His Girl Friday",
        price: 5,
        startDate: new Date(2016, 4, 24, 9, 10),
        endDate: new Date(2016, 4, 24, 11, 20)
    }, {
        movie: "Royal Wedding",
        price: 10,
        startDate: new Date(2016, 4, 24, 10, 05),
        endDate: new Date(2016, 4, 24, 11, 30)
    }, 
    // ...
    ],
    currentDate: new Date(2016, 4, 24)
};

ko.applyBindings(viewModel);

If you use jQuery alone, combine the HTML markup for cells, time scales and date scales manually with jQuery DOM manipulation methods. To apply this markup, use the timeCellTemplate, dateCellTemplate and dataCellTemplate callback functions as shown in the following code.

JavaScript
var schedulerData = [{
    text: "His Girl Friday",
    startDate: new Date(2016, 4, 24, 9, 10),
    endDate: new Date(2016, 4, 24, 11, 20)
}, {
    text: "Royal Wedding",
    startDate: new Date(2016, 4, 24, 10, 05),
    endDate: new Date(2016, 4, 24, 11, 30)
}, 
// ...
];

$(function () {
    $("#schedulerContainer").dxScheduler({
        dataSource: schedulerData,
        currentDate: new Date(2016, 4, 24),
        showAllDayPanel: false,
        currentView: 'week',
        dataCellTemplate: function(data, index, element) {
            return $("<div />")
                        .css('width', '100%')
                        .css('height', '40px')
                        .css('background-color', 'rgba(86, 202, 133, 0.1)');
        },
        dateCellTemplate: function(data, index, element) {
            element.text(data.text)
                    .css('color', 'green')
                    .css('font-weight', 'bold');
        },
        timeCellTemplate: function(data, index, element) {
            element.text(data.text)
                    .css('color', 'green')
                    .css('font-style', 'italic');
        }
    });
});

View Demo

In addition, you can use a 3rd-party template engine to customize widget appearance. For more information, see the Use an Alternative Template Engine article.

See Also