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

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-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);
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSchedulerModule
  • ],
  • // ...
  • })

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;
  • }

For a more detailed customization, define custom templates for cells, time scales, and date scales. The following code shows how to use dxTemplate to define templates for timetable parts:

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-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")
  • },
  • // ...
  • ];
  • currentDate = new Date(2016, 4, 24);
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSchedulerModule
  • ],
  • // ...
  • })

View Demo

See Also