Blazor Scheduler Example - Horizontal Grouping

This demo illustrates the timings of different flight services on a specific route 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 using the ScheduleGroup property. The resources to be grouped depend on the values of the Resources option within the ScheduleGroup property, which accepts an array of resource names.

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

Note: If the ScheduleGroup property is not defined, the default Scheduler is rendered with no grouping on layout, but the appointments of all resources are displayed on a single Scheduler.