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 order of resource headers depends on the order of resources 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

View Demo

See Also