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.

JanFebMarApr
MayJunJulAug
SepOct  
SunMonTueWedThuFriSat
44   12345
45 6789101112
46 13141516171819
47 20212223242526
48 27282930123
49 45678910
    
    
  NovDec
Lincoln Bartlett (Therapy)
800
 
900
 
1000
 
1100
 
12PM
 
100
 
200
 
300
 
400
 
500
 
600
 
700
 

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

Lincoln Bartlett (Therapy)
Amelia Harper (Therapy)
Stu Pizaro (Therapy)
800
 
900
 
1000
 
1100
 
12PM
 
100
 
200
 
300
 
400
 
500
 
600
 
700
 

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

Lincoln Bartlett (Therapy)
800
 
900
 
1000
 
1100
 
12PM
 
100
 
200
 
300
 
400
 
500
 
600
 
700
 

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

Lincoln Bartlett (Therapy)
Amelia Harper (Therapy)
800
 
900
 
1000
 
1100
 
12PM
 
100
 
200
 
300
 
400
 
500
 
600
 
700
 

<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
Client-Side API