Chart

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.

DEMO

SOURCE

Flight timings Between Barcelona and Los Angeles

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.