DevExtreme React - 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 resource headers' order depends on the resources' order in the resources array.

jQuery
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']
        //...
    });
});
Angular
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

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

jQuery
JavaScript
$(function(){
    $("#schedulerContainer").dxScheduler({
        // ...
        views: ["month", {
            type: "day",
            groupOrientation: "vertical"
        }]
    });
});
Angular
TypeScript
HTML
import { DxSchedulerModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
    views = ["month", {
        type: "day",
        groupOrientation: "vertical"
    }];
}
@NgModule({
    imports: [
        // ...
        DxSchedulerModule
    ],
    // ...
})
<dx-scheduler ... 
    [views]="views">
</dx-scheduler>

View Demo

See Also