DevExtreme React Scheduler — Resources & Grouping (v20.1)

DevExtreme Team Blog
03 September 2020
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:


As always, we welcome your thoughts. Please share your feedback in the comments section below or submit issues to our GitHub repository.

Free DevExpress Products - Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We'll be happy to follow-up.
No Comments

Please login or register to post comments.