DevExtreme jQuery/JS - 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.

JavaScript
  • var appointments = [{
  • roomId: 1,
  • teacherId: 2,
  • text: "Meeting",
  • // ...
  • },
  • // ...
  • ];
  •  
  • var resources = [
  • { fieldExpr: 'roomId', dataSource: roomsDataSource },
  • { fieldExpr: 'teacherId', dataSource: teachersDataSource }
  • ];
  •  
  • $(function(){
  • $("#schedulerContainer").dxScheduler({
  • dataSource: appointments,
  • resources: resources,
  • // Groups appointments by rooms and by teachers
  • groups: ['roomId', 'teacherId']
  • //...
  • });
  • });

Scheduler Grouping by Resources

View Demo

See Also