Appointments can be grouped by resources. Group names are displayed in a grouping panel.
To group by resources, configure them first.
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:
Groups are arranged horizontally (one next to another). To arrange them vertically (one under another), set the
groupOrientation property to
Vertical. You can use different group orientations for different views, as we do in the following example:
To group appointments by date, set the
groupByDate property to
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.
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:
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:
The following example shows how to use the properties mentioned above: