• Material
  • Fabric
  • Bootstrap
  • High Contrast
Preferences
Theme Selection
Mode Selection
Touch
Mouse
Essential JS 2
HOME
All Controls

Button

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 Schedule is grouped based on the 3 Airline services.

DEMO
SOURCE
Flight timings between Barcelona and Los Angeles

In this demo, the schedule 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 schedule will be rendered with no grouping on layout, but the appointments of all the resources will be displayed on a single schedule.