All docs
V24.2
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

JavaScript/jQuery Scheduler - Timetable

The Scheduler UI component allows you to customize its timetable. You can specify the time period and a single cell's duration via the startDayHour, endDayHour, and cellDuration properties. Using the firstDayOfWeek property, you can define the weekday that is shown first.

JavaScript
  • $(function() {
  • $("#schedulerContainer").dxScheduler({
  • dataSource: [{
  • text: "Website Re-Design Plan",
  • startDate: new Date("2016-04-25T09:30:00.000Z"),
  • endDate: new Date("2016-04-25T11:30:00.000Z")
  • }, {
  • text: "Book Flights to San Fran for Sales Trip",
  • startDate: new Date("2016-04-25T12:00:00.000Z"),
  • endDate: new Date("2016-04-25T13:00:00.000Z")
  • },
  • // ...
  • ],
  • currentDate: new Date(2016, 4, 25),
  • startDayHour: 8,
  • endDayHour: 19,
  • cellDuration: 60,
  • firstDayOfWeek: 1
  • });
  • });

You can also adjust cells' size in the table and around it using the DevExtreme CSS classes. For example, the .dx-scheduler-cell-sizes-horizontal and .dx-scheduler-cell-sizes-vertical classes specify the cells' width and height, respectively. These classes apply if the crossScrollingEnabled property is set to true.

CSS
  • #yourSchedulerID .dx-scheduler-cell-sizes-horizontal {
  • width: 200px;
  • }
  • #yourSchedulerID .dx-scheduler-cell-sizes-vertical {
  • height: 200px;
  • }

Use DOM manipulation methods to combine the HTML markup for time scales and date scales. 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-04-24T09:10:00.000Z"),
  • endDate: new Date("2016-04-24T11:20:00.000Z")
  • }, {
  • text: "Royal Wedding",
  • startDate: new Date("2016-04-24T10:05:00.000Z"),
  • endDate: new Date("2016-04-24T11:30:00.000Z")
  • },
  • // ...
  • ];
  •  
  • $(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

See Also