Angular Scheduler - Customize Resource Headers
Use the dxTemplate markup component designed by DevExpress.
app.component.html
app.component.ts
- <dx-scheduler
- [dataSource]="schedulerData"
- [currentDate]="currentDate"
- [groups]="['roomId']"
- resourceCellTemplate="headerTemplate">
- <dxi-resource
- fieldExpr="roomId"
- [dataSource]="rooms" >
- </dxi-resource>
- <div *dxTemplate="let data of 'headerTemplate'">
- <i style="color: blue">{{data.text}}</i>
- </div>
- </dx-scheduler>
- import { DxSchedulerModule } from "devextreme-angular";
- // ...
- export class AppComponent {
- schedulerData = [{
- text: "Meeting",
- startDate: new Date("2016-04-24T09:10:00.000Z"),
- endDate: new Date("2016-04-24T11:20:00.000Z"),
- roomId: 1
- }, // ... ];
- rooms = [
- { id: 1, text: 'Room101', color: 'green' },
- { id: 2, text: 'Room102', color: 'red' },
- // ...
- ];
- currentDate = new Date(2016, 4, 24);
- }
- @NgModule({
- imports: [
- // ...
- DxSchedulerModule
- ],
- // ...
- })
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.