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.
- <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.
- #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:
- <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
- ],
- // ...
- })
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.