JavaScript/jQuery Scheduler - Group Appointments by Resources

To group appointments by resources, assign an array to the groups property. Each element of this array is set to the fieldExpr property of a resource type. Note that the resource header order depends on the resource order in the resources array. The Scheduler does not support grouping resources by multiple data fields in the agenda view.

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

You can change resource headers orientation in an individual view using the views.groupOrientation property. In the following code, the orientation in the day view is "vertical", so that resource headers are arranged in a column:

JavaScript
  • $(function(){
  • $("#schedulerContainer").dxScheduler({
  • // ...
  • views: ["month", {
  • type: "day",
  • groupOrientation: "vertical"
  • }]
  • });
  • });

View Demo

See Also