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
  • ],
  • // ...
  • })

View Demo

See Also