Date Navigator

This demo illustrates how to use the BootstrapSchedulerDateNavigator control to select the visible date interval.

The MasterControlID property is used to associate the stand-alone Date Navigator control with a scheduler. The Properties property provides access to the Date Navigator control’s basic settings.

SunMonTueWedThuFriSat
44   12345
45 6789101112
46 13141516171819
47 20212223242526
48 27282930123
49 45678910
<dx:BootstrapSchedulerDateNavigator runat="server" MasterControlID="SchedulerDateNavigator">
    <Properties AppointmentDatesHighlightMode="Labels"></Properties>
    <Properties Rows="2" />
</dx:BootstrapSchedulerDateNavigator>
<dx:BootstrapScheduler ID="SchedulerDateNavigator" runat="server" ActiveViewType="Day" GroupType="Resource"
    AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource" Width="70%">
    <Views>
        <DayView ResourcesPerPage="1">
        </DayView>
    </Views>
    <OptionsBehavior ShowViewSelector="false" />
    <OptionsResourceNavigator>
        <SettingsPager EnableResourceComboBox="false" EnableIncreaseDecrease="false" />
    </OptionsResourceNavigator>
</dx:BootstrapScheduler>

Resource Navigator

This demo illustrates how to use the BootstrapSchedulerResourceNavigator control to select the visible resources.

The MasterControlID property is used to associate the stand-alone Resource Navigator control with a scheduler.

The resource navigator control supports two modes - pager and tokens. You can specify the desired mode using the master scheduler's OptionsResourceNavigator.Mode property.

Use the SettingsPager and SettingsTokens properties to configure the Resource Navigator’s display settings.

<dx:BootstrapSchedulerResourceNavigator runat="server" MasterControlID="SchedulerResourceNavigator">
</dx:BootstrapSchedulerResourceNavigator>
<dx:BootstrapScheduler ID="SchedulerResourceNavigator" runat="server" ActiveViewType="Day" GroupType="Resource"
    AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
    <Views>
        <DayView ResourcesPerPage="3">
        </DayView>
    </Views>
    <OptionsBehavior ShowViewSelector="false" />
    <OptionsResourceNavigator Visibility="Never" Mode="Tokens" />
</dx:BootstrapScheduler>

View Navigator

This demo illustrates how to use the BootstrapSchedulerViewNavigator control to navigate between the current view's pages.

The MasterControlID property is used to associate the stand-alone View Navigator control with a scheduler.

<dx:BootstrapSchedulerViewNavigator runat="server" MasterControlID="SchedulerViewNavigator">
</dx:BootstrapSchedulerViewNavigator>
<dx:BootstrapScheduler ID="SchedulerViewNavigator" runat="server" ActiveViewType="Day" GroupType="Resource"
    AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
    <OptionsViewNavigator ShowTodayButton="true" ShowGotoDateButton="true" />
    <Views>
        <DayView ResourcesPerPage="1">
        </DayView>
    </Views>
    <OptionsBehavior ShowViewSelector="false" ShowViewNavigator="false" />
    <OptionsResourceNavigator>
        <SettingsPager EnableResourceComboBox="false" EnableIncreaseDecrease="false" />
    </OptionsResourceNavigator>
</dx:BootstrapScheduler>

View Selector

This demo illustrates how to use the BootstrapSchedulerViewSelector control to change the active view.

the MasterControlID property is used to connect the standalone view selector control to a scheduler control. The selectors buttons can be arranged vertically by setting the ButtonsRepeatDirection property value to Vertical.

<dx:BootstrapSchedulerViewSelector runat="server" MasterControlID="SchedulerViewSelector">
</dx:BootstrapSchedulerViewSelector>
<dx:BootstrapScheduler ID="SchedulerViewSelector" runat="server" ActiveViewType="Day" GroupType="Resource"
    AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
    <Views>
        <DayView ResourcesPerPage="2" DayCount="2">
        </DayView>
        <WorkWeekView ResourcesPerPage="1">
        </WorkWeekView>
        <FullWeekView ResourcesPerPage="1" Enabled="true">
        </FullWeekView>
        <WeekView ResourcesPerPage="1">
        </WeekView>
        <MonthView ResourcesPerPage="1">
        </MonthView>
        <TimelineView ResourcesPerPage="2" IntervalCount="5">
        </TimelineView>
        <AgendaView ScrollAreaHeight="600">
        </AgendaView>
    </Views>
    <OptionsBehavior ShowViewSelector="false" />
    <OptionsResourceNavigator>
        <SettingsPager EnableResourceComboBox="false" EnableIncreaseDecrease="false" />
    </OptionsResourceNavigator>
</dx:BootstrapScheduler>
Screen Size
Color Themes
Demo QR Code