Adaptive Layout

The Bootstrap Scheduler allows you to build adaptive layouts in Adaptivity mode, which you can enable by setting the OptionsAdaptivity.Enabled property to true. In this mode, the control can automatically resize its elements when the browser window is resized. In this case, the scheduler's content is reordered in the following ways for different views:

• Agenda View - Moves the date section above its appointments list, narrows the time section and moves the resources to the appointment's subject.
• Timeline View - Narrows day headers and appointment sections.
• Work Week View - Narrows date headers.
• Month View - Narrows appointments.
• Day View - Narrows date headers, days' appointment sections.

The toolbar hides its view selector items in the drop-down list and displays the ellipse button when the browser window's width changes. The View's visible interval format is also modified to make it more compact.

Please click here to open the demonstration page in the fullscreen mode

ASPXCopy

<dx:BootstrapScheduler runat="server" ActiveViewType="Agenda" GroupType="Resource"
    AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
    <OptionsAdaptivity Enabled="true" />
    <Views>
        <DayView Enabled="true" DayCount="2" ResourcesPerPage="2" />
        <WorkWeekView Enabled="true" ResourcesPerPage="1" />
        <WeekView Enabled="true" ResourcesPerPage="1" />
        <MonthView Enabled="true" ResourcesPerPage="1" />
        <TimelineView Enabled="true" ResourcesPerPage="1" IntervalCount="10" DisplayedIntervalCount="4">
            <CellAutoHeightOptions Mode="FitToContent" MinHeight="500" />
        </TimelineView>
        <AgendaView Enabled="true" DayCount="4">
            <AppointmentDisplayOptions ShowResource="true" />
        </AgendaView>
    </Views>
</dx:BootstrapScheduler>

Screen Size

Color Themes

Demo QR Code