DevExtreme Angular - 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.
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
- ],
- // ...
- })
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:
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>
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.