React Scheduler - Group Appointments by Resources
To group appointments by resources, assign an array to the groups property. 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.
- <template>
- <DxScheduler
- :data-source="appointments"
- :groups="groups">
- <DxResource
- field-expr="roomId"
- :data-source="rooms"/>
- <DxResource
- field-expr="teacherId"
- :data-source="teachers"/>
- </DxScheduler>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import DxScheduler, { DxResource } from 'devextreme-vue/scheduler';
- export default {
- components: {
- DxScheduler,
- DxResource
- },
- data() {
- return {
- groups: ['roomId', 'teacherId'], // Groups appointments by rooms and by teachers
- appointments: [{
- roomId: 1,
- teacherId: 2,
- text: "Meeting",
- // ...
- }],
- rooms: [
- // Resource instances
- {
- id: 1, // Resource identifier
- text: "Room101", // Resource name
- color: "red" // Color for indicating appointments that use this resource
- },
- { id: 2, text: "Room102", color: "green" },
- // ...
- ],
- teachers: [
- // Resource instances
- { id: 1, text: "John Heart", color: "yellow" },
- { id: 2, text: "Sandra Johnson", color: "blue" },
- // ...
- ]
- // ...
- }
- }
- }
- </script>
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:
- <template>
- <DxScheduler ... >
- <DxView type="month" />
- <DxView
- type="day"
- group-orientaion="vertical" />
- </DxScheduler>
- </template>
- <script>
- import 'devextreme/dist/css/dx.common.css';
- import 'devextreme/dist/css/dx.light.css';
- import DxScheduler, { DxView } from 'devextreme-vue/scheduler';
- export default {
- components: {
- DxScheduler,
- DxView
- },
- data() {
- return {
- // ...
- }
- }
- }
- </script>
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.