JavaScript/jQuery Scheduler - Group Appointments by Resources
To group appointments by resources, assign an array to the groups property. Each element of this array is set to the fieldExpr property of a resource type. Note that the resource header order depends on the resource order in the resources array. The Scheduler does not support grouping resources by multiple data fields in the agenda view.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import Scheduler, { Resource } from 'devextreme-react/scheduler';
- const groups = ['roomId', 'teacherId']; // Groups appointments by rooms and by teachers
- const appointments = [{
- roomId: 1,
- teacherId: 2,
- text: "Meeting",
- // ...
- },
- // ...
- ];
- const 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" },
- // ...
- ];
- const teachers = [
- // Resource instances
- { id: 1, text: "John Heart", color: "yellow" },
- { id: 2, text: "Sandra Johnson", color: "blue" },
- // ...
- ];
- class App extends React.Component {
- render() {
- return (
- <Scheduler
- dataSource={appointments}
- groups={groups}>
- <Resource
- fieldExpr="roomId"
- dataSource={rooms} />
- <Resource
- fieldExpr="teacherId"
- dataSource={teachers} />
- </Scheduler>
- );
- }
- }
- export default App;
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:
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import Scheduler, { View } from 'devextreme-react/scheduler';
- class App extends React.Component {
- render() {
- return (
- <Scheduler ... >
- <View type="month" />
- <View
- type="day"
- groupOrientaion="vertical" />
- </Scheduler>
- );
- }
- }
- export default App;
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.