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 ], // ... })
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.