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  
    
    
  NovDec
Lincoln Bartlett (Therapy)
Monday, October 10
800
 
900
 
1000
 
1100
 
12PM
 
100
 
200
 
300
 
400
 
500
 
600
 
700
Andrew Glover (Hospital)
Contact info: (65) 965-4016
Mark Oliver (Hospital)
Contact info: (46) 683-6484
Taylor Riley (Home)
Contact info: (41) 671-9633
Follow-up Medical Checkup
 

<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)
Lincoln Bartlett (Therapy)
Amelia Harper (Therapy)
Stu Pizaro (Therapy)
Monday, October 10Monday, October 10Monday, October 10
800
 
900
 
1000
 
1100
 
12PM
 
100
 
200
 
300
 
400
 
500
 
600
 
700
Andrew Glover (Hospital)
Contact info: (65) 965-4016
Mark Oliver (Hospital)
Contact info: (46) 683-6484
Taylor Riley (Home)
Contact info: (41) 671-9633
Follow-up Medical Checkup
Addison Davis (Hospital)
Contact info: (92) 491-6541
Benjamin Hughes (Phone Consultation)
Contact info: (28) 887-8313
Lucas Smith (Home)
Contact info: (25) 881-5071
Follow-up Medical Checkup
Robert King (Hospital)
Contact info: (35) 212-9577
Laura Callahan (Phone Consultation)
Contact info: (27) 131-3908
Miguel Simmons (Home)
Contact info: (35) 372-9838
 

<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)
Monday, October 10
800
 
900
 
1000
 
1100
 
12PM
 
100
 
200
 
300
 
400
 
500
 
600
 
700
Andrew Glover (Hospital)
Contact info: (65) 965-4016
Mark Oliver (Hospital)
Contact info: (46) 683-6484
Taylor Riley (Home)
Contact info: (41) 671-9633
Follow-up Medical Checkup
 

<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)
Monday, October 10Tuesday, October 11Monday, October 10Tuesday, October 11
800
 
900
 
1000
 
1100
 
12PM
 
100
 
200
 
300
 
400
 
500
 
600
 
700
Andrew Glover (Hospital)
Contact info: (65) 965-4016
Mark Oliver (Hospital)
Contact info: (46) 683-6484
Taylor Riley (Home)
Contact info: (41) 671-9633
Follow-up Medical Checkup
Brad Farkus (Home)
Contact info: (23) 483-9348
Bart Arnaz (Phone Consultation)
Contact info: (11) 211-4115
Arnie Schwartz (Hospital)
Contact info: (65) 353-4435
Addison Davis (Hospital)
Contact info: (92) 491-6541
Benjamin Hughes (Phone Consultation)
Contact info: (28) 887-8313
Lucas Smith (Home)
Contact info: (25) 881-5071
Billy Zimmer (Hospital)
Contact info: (17) 668-6166
Samantha Piper (Hospital)
Contact info: (66) 115-7496
Follow-up Medical Checkup
Maggie Boxter (Home)
Contact info: (31) 896-2990
 

<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
October 10 – 11, 2016