DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Scheduler - Group Orientation

Users can group appointments by resources. This demo declares a single resource—Priority. Refer to the following demo for more information about resources and their configuration: Resources.

To group appointments by resources, specify the groups[] array. Each element of this array is the fieldExpr of a corresponding resource kind. The order of group headers in the UI is the same as items in the resource instances array. If the groups[] array contains more than one element, groups are nested.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

The Scheduler can arrange group headers vertically (in a column) or horizontally (in a row). Use the views.groupOrientation property to set a custom orientation for specific views. This demo shows two Work Week views with different group orientations.