Example of resource-grouping in Vue schedule Component

This demo illustrates the timings of different flight services on a specific route say between Barcelona and Los Angeles, on a daily basis. Here, the Scheduler is grouped based on the 3 Airline services.

In this demo, the Scheduler has been grouped with multiple resources by making use of the property group. The resources to be grouped depends on the values of resources option within the group property, which accepts the array of resource names. The resource header has been customized by making use of the resourceHeaderTemplate property.

In mobile mode, when the grouping is enabled, the resources will be listed out in a treeview as a side-panel which opens or closes, on clicking the hamburger icon at the resource header. Only a single resource will be viewable at a time, due to the space constraints on mobile. If in case, the users want to view the grouped layout on mobile with scrolling content, then it is necessary to set false to the enableCompactView option within the group property which is set to true by default. This option is not applicable on desktop mode.

Note: If the group property is not defined, then the default Scheduler will be rendered with no grouping on layout, but the appointments of all the resources will be displayed on a single schedule.