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
39 2526272829301
40 2345678
41 9101112131415
42 16171819202122
43 23242526272829
44 3031     
JanFebMarApr
MayJunJulAug
SepOct  
SunMonTueWedThuFriSat
44   12345
45 6789101112
46 13141516171819
47 20212223242526
48 27282930123
49 45678910
    
    
  NovDec
Today
 

ASPXCopy 
<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.
 

ASPXCopy 
<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.
 

ASPXCopy 
<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.
 

ASPXCopy 
<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