DevExtreme Angular - Group Appointments by Resources

To group appointments by resources, assign an array to the groups option. Each element of this array is fieldExpr of a resource kind. Note that the order of resource headers depends on the order of resources in the resources array.

HTML
TypeScript
  • <dx-scheduler
  • [dataSource]="appointments"
  • [groups]="['roomId', 'teacherId']"> <!-- Groups appointments by rooms and by teachers -->
  • <dxi-resource
  • fieldExpr="roomId"
  • [dataSource]="roomResources">
  • </dxi-resource>
  • <dxi-resource
  • fieldExpr="teacherId"
  • [dataSource]="teacherResources">
  • </dxi-resource>
  • </dx-scheduler>
  • import { DxSchedulerModule } from 'devextreme-angular';
  • // ...
  • export class AppComponent {
  • // ...
  • appointments = [{
  • roomId: 1,
  • teacherId: 2,
  • text: "Meeting",
  • // ...
  • },
  • // ...
  • ];
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxSchedulerModule
  • ],
  • // ...
  • })

Scheduler Grouping by Resources

View Demo

See Also