Skip to main content

Adaptivity

The ASPxScheduler control provides an adaptive UI that allows you to build page layouts that fit a browser window’s width. In adaptive mode, the scheduler can automatically resize or rearrange its elements based on the user’s device type and page resolution.

ASPxScheduler-Adaptivity

Set the ASPxSchedulerOptionsAdaptivity.Enabled property to true to enable the adaptive layout.

View Selector

In adaptive mode, the view selector items are hidden to the drop-down list that is invoked by clicking the ellipse button on the right. To disable view selector’s adaptivity mode, use the ASPxViewSelectorOptionsAdaptivity.Enabled property.

View Visible Interval

In response to the browser window width change, the view visible interval reduces its width and displays the date interval in a compact format. To disable view visible interval’s Adaptivity mode, use the ASPxViewVisibleIntervalOptionsAdaptivity.Enabled property.

The following image illustrates the view visible interval and view selector layouts in adaptive mode.

ASPxScheduler-AdaptiveToolbar

Appointment Dialog

In adaptive mode, the ASPxScheduler switches its appointment dialog to modal mode and collapses its content from multiple columns into a single column when the browser’s inner width is less than or equal to 700 pixels.

ASPxScheduler-AdaptiveDialog

Online Demo

ASPxScheduler - Adaptive Layout