The most recent update of our React Scheduler includes custom resources support and appointment/event grouping support. Users can now link appointments/events to different resources (such as employees, locations, physical assets) and group appointments/events by a resource or by dates.
Appointment Resources
DevExtreme React Scheduler allows users to associate appointments/events with resources. Single-instance resources can be used for one-to-one associations - such as a meeting in a single room. Multiple-instance resources can be used where multiple associations are allowed. For instance, an event with multiple attendees.
Color coding helps distinguish appointments associated with different resources. We use Google Material Design Colors as our default palette. You can easily customize this palette using the component’s corresponding API.
Use the Resources plugin to enable this feature in your Scheduler.
Resources data also displayed in the Appointment tooltip and appointment form. You can also assign resources thought the form.
Appointment Grouping
Users can group appointments by resource or by date. This is useful when you have to display lots of appointments and resources.
To enable this feature, add our grouping plugins (GroupingState, IntegratedGrouping and GroupingPanel) and the Resources plugin to the Scheduler as shown below
Group Appointments by Resources
You can group appointments by single or multiple resources. Use the grouping property to specify this. Group names (resource titles) are displayed in the group panel. A single appointment can appear across multiple groups if it is assigned to multiple instances of a resource.
Groups can be arranged horizontally (one next to another) or vertically (one under another). Specify the desired groupOrientation property value to arrange groups within your app. You can use different group orientations for different views.
End-users can place an appointment to a different group via our built-in Appointment Form or by using Drag-and-Drop operations.
Group Appointments by Date
The Scheduler also allows you to group appointments by date. To enable this feature, set the groupByDate property to true:
Feedback
As always, we welcome your thoughts. Please share your feedback in the comments section below or submit issues to our GitHub repository.