React Scheduler - Grouping

Appointments can be grouped by resources. Group names are displayed in a grouping panel.

Basic Usage

To group by resources, configure them first.

Grouping is implemented in the IntegratedGrouping plugin. Add this and the GroupingState plugin to enable this feature.

GroupingState has a grouping property that accepts an array of resources to group by. The resource order in this array is important. For example, if the Room resource is first and Attendees second, appointments are grouped in that order. If the grouping property is unspecified, appointments are grouped by the main resource.

Group names (resource titles) are displayed in a grouping panel. To show it, add the GroupingPanel plugin.

A single appointment can appear in multiple groups if it is assigned to multiple instances of a resource. For example, an appointment assigned to three instances appears in three groups. The appointment's color is inherited from a particular resource instance. The members resource from the following demo illustrates this case:

Vertical Group Orientation

Groups are arranged horizontally (one next to another). To arrange them vertically (one under another), set the GroupingState's groupOrientation property to Vertical. You can use different group orientations for different views, as we do in the following example:

Group by Date

To group appointments by date, set the GroupingState's groupByDate property to true.

In the example below, appointments are grouped first by date and then by resource. Click the "Group by Date First" switch to change this order.

Move Appointments Between Groups

Users can drag-and-drop appointments between groups or use the appointment edit form to assign an appointment to another resource (group). To enable this, configure editing:

Customize the Appearance

Timetable cells have the groupingInfo property that lists groups to which a particular cell belongs. Use this property to customize cells depending on their group.

In addition, the GroupingPanel plugin has properties that customize the grouping panel: horizontalLayoutComponent, rowComponent, and cellComponent.

The following example shows how to use the properties mentioned above: