You can group appointments by resources programmatically. Group names are displayed in a group panel.
To group by resources, configure them first. Then, add GroupingState and IntegratedGrouping plugins.
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 group panel. To show the panel, 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 specific 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 underneath another), set the GroupingState's groupOrientation property to Vertical. You can adjust group orientation based on a view, as shown in the following example:
To group appointments by date, set the GroupingState's groupByDate property to true.
In the example below, appointments are first grouped by date and then by resource. Click the "Group by Date First" switch to change the 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 a groupingInfo property that lists groups to which a particular cell belongs. Use this property to customize cells based on their group.
In addition, you can use the following GroupingPanel plugin properties to customize the group panel: horizontalLayoutComponent, rowComponent, and cellComponent.
The following example shows how to use these properties: