[Expand]General Information
[Expand]WinForms Controls
[Collapse]ASP.NET Controls and MVC Extensions
 [Expand]Prerequisites
 [Expand]What's Installed
 [Expand]Common Concepts
 [Collapse]ASP.NET WebForms Controls
   Getting Started
  [Expand]Grid View
  [Expand]Tree List
  [Expand]Card View
  [Expand]Reporting
  [Expand]Chart Control
  [Expand]Pivot Grid
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Collapse]Scheduler
   [Expand]Product Information
    Getting Started
   [Expand]Fundamentals
   [Collapse]Concepts
    [Expand]Scheduler Elements
    [Expand]Appointments
    [Expand]Resources
    [Expand]Views
     Data Binding
    [Expand]Services
     Adaptivity
     Templates
     Client-Side Functionality
     Callback Commands
    [Expand]Reporting
     Time Zones
     Keyboard Shortcuts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
   [Expand]Member Tables
  [Expand]Site Navigation and Layout
  [Expand]HTML Editor
  [Expand]Gauges
  [Expand]Vertical Grid
  [Expand]Data Editors
  [Expand]Docking and Popups
  [Expand]File Management
  [Expand]Data and Image Navigation
  [Expand]Multi-Use Site Controls
  [Expand]Spell Checker
  [Expand]Query Builder
 [Expand]ASP.NET MVC Extensions
 [Expand]Localization
 [Expand]Redistribution and Deployment
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Bootstrap Controls
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

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.

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.

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.

View the Demo

Refer to the following online demo to see this mode in action: ASPxScheduler - Adaptive Layout

Is this topic helpful?​​​​​​​