Day View
This demo illustrates the Bootstrap Scheduler control's Day View, which provides the most detailed view of appointments for a particular day.
Use the Views.DayView property to configure the Day View's basic functionality. This property provides access to the following settings:
- DayCount - Gets or sets the number of days that are simultaneously displayed within the Day View.
- ShowAllDayArea - Gets or sets a value which specifies if the All-Day Area is shown when a Scheduler shows its data in the Day view.
- ShowDayHeaders - Gets or sets a value which specifies if day headers are shown when a scheduler shows its data in the Day view.
- ShowWorkTimeOnly - Gets or sets a value indicating if the scheduler should show its data only for the working hours in the Day View.
- WorkTime - Gets or sets the work time interval for the Day View.
Use the ActiveViewType property to change the active view.
<dx:BootstrapScheduler runat="server" ActiveViewType="Day" GroupType="Resource"
AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
<Views>
<DayView ResourcesPerPage="2" />
<WorkWeekView Enabled="false" />
<WeekView Enabled="false" />
<MonthView Enabled="false" />
<TimelineView Enabled="false" />
<AgendaView Enabled="false" />
</Views>
<OptionsBehavior ShowViewSelector="false" />
</dx:BootstrapScheduler>
Work Week View
This demo illustrates the Bootstrap Scheduler control's Work Week View, which displays appointments for working days in a particular week.
Use the Views.WorkWeekView property to configure the Work Week View's basic functionality. This property provides access to the following settings:
- DayCount - Gets or sets the number of days that are simultaneously displayed within the view.
- ShowAllDayArea - Gets or sets a value which specifies if the All-Day Area is shown when a Scheduler shows its data in the view.
- ShowDayHeaders - Gets or sets a value which specifies if day headers are shown when a scheduler shows its data in the Work-Week view.
- ShowWorkTimeOnly - Gets or sets a value indicating if the scheduler should show its data only for the working hours in the view.
- WorkTime - Gets or sets the work time interval for the view.
Use the ActiveViewType property to change the active view.
<dx:BootstrapScheduler runat="server" ActiveViewType="WorkWeek" GroupType="Resource"
AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
<OptionsResourceNavigator EnableIncreaseDecrease="false" />
<Views>
<WorkWeekView ResourcesPerPage="1" />
<DayView Enabled="False"/>
<WeekView Enabled="False" />
<MonthView Enabled="False" />
<TimelineView Enabled="False" />
<AgendaView Enabled="false" />
</Views>
<OptionsBehavior ShowViewSelector="False" />
</dx:BootstrapScheduler>
Full Week View
This demo illustrates the Bootstrap Scheduler control's Full Week View, which displays appointments for a specified week.
Use the Views.FullWeekView property to configure the Full Week View's basic functionality. This property provides access to the following settings:
- AppointmentDisplayOptions - Provides access to the options specifying how appointments are displayed in the view.
- ShowAllDayArea - Gets or sets a value which specifies if the All-Day Area is shown when a Scheduler shows its data in the view.
- ShowDayHeaders - Gets or sets a value which specifies if day headers are shown when a scheduler shows its data in the Work-Week view.
- ShowWorkTimeOnly - Gets or sets a value indicating if the scheduler should show its data only for the working hours in the view.
- WorkTime - Gets or sets the work time interval for the view.
The BootstrapScheduler.FirstDayOfWeek property gets the day from which the Scheduler's week starts.
Use the ActiveViewType property to change the active view.
<dx:BootstrapScheduler runat="server" ActiveViewType="FullWeek" GroupType="Resource"
AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
<OptionsResourceNavigator EnableIncreaseDecrease="false" />
<Views>
<FullWeekView ResourcesPerPage="1" />
<DayView Enabled="false" />
<WorkWeekView Enabled="false" />
<WeekView Enabled="false" />
<MonthView Enabled="false" />
<TimelineView Enabled="false" />
<AgendaView Enabled="false" />
</Views>
<OptionsBehavior ShowViewSelector="false" />
</dx:BootstrapScheduler>
Week View
This demo illustrates the Bootstrap Scheduler control's Week View, which displays appointments for the specified weekly period.
Use the Views.WeekView property to configure the Week View's basic functionality. The Views.WeekView.AppointmentDisplayOptions property provides access to the options specifying how appointments are displayed in the view.
Use the ActiveViewType property to change the active view.
<dx:BootstrapScheduler runat="server" ActiveViewType="Week" GroupType="Resource"
AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
<OptionsResourceNavigator EnableIncreaseDecrease="false" />
<Views>
<WeekView ResourcesPerPage="2" />
<DayView Enabled="false"/>
<WorkWeekView Enabled="false"/>
<MonthView Enabled="false" />
<TimelineView Enabled="false" />
<AgendaView Enabled="false" />
</Views>
<OptionsBehavior ShowViewSelector="false" />
</dx:BootstrapScheduler>
Month View
This demo illustrates the Bootstrap Scheduler control's Month View, which is the least detailed view designed to provide your end-users with an appointments overview.
Use the Views.MonthView property to configure the Month View's basic functionality. This property provides access to the following settings:
- AppointmentDisplayOptions - Provides access to the options specifying how appointments are displayed in the view.
- CompressWeekend - Gets or sets a value indicating if the weekend days (Saturday and Sunday) should be displayed as one day.
- ShowWeekend - Gets or sets a value indicating if the scheduler should also show its data for the weekend days (Saturday and Sunday) in the Month View.
- WeekCount - Gets or sets the number of weeks that are simultaneously displayed within the Week View.
Use the ActiveViewType property to change the active view.
<dx:BootstrapScheduler runat="server" GroupType="Resource" AppointmentDataSourceID="AppointmentDataSource"
ResourceDataSourceID="efResourceDataSource" ActiveViewType="Month" Start="2016, 10, 17">
<OptionsResourceNavigator EnableIncreaseDecrease="false" />
<Views>
<MonthView ResourcesPerPage="1">
<AppointmentDisplayOptions StartTimeVisibility="Never" EndTimeVisibility="Never" StatusDisplayType="Bounds" ShowRecurrence="true"/>
<CellAutoHeightOptions Mode="LimitHeight" MinHeight="140" />
</MonthView>
<DayView Enabled="false" />
<WorkWeekView Enabled="false" />
<WeekView Enabled="false" />
<TimelineView Enabled="false" />
<AgendaView Enabled="false" />
</Views>
<OptionsBehavior ShowViewSelector="false" />
</dx:BootstrapScheduler>
Timeline View
This demo illustrates the Bootstrap Scheduler control's Timeline View, which displays appointments as horizontal bars along the timescales, and provides end-users with a clearer overview for scheduling purposes.
Use the Views.TimelineView property to configure the Timeline View's basic functionality. This property provides access to the following settings:
- AppointmentDisplayOptions - Provides access to the options specifying how appointments are displayed in the view.
- WorkTime - Gets or sets the work time interval for the Timeline View.
- CellAutoHeightOptions - Provides access to options for specifying cell auto height behavior.
Use the ActiveViewType property to change the active view.
<dx:BootstrapScheduler runat="server" GroupType="Resource" ActiveViewType="Timeline"
AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
<OptionsResourceNavigator EnableIncreaseDecrease="false" />
<Views>
<TimelineView ResourcesPerPage="3" IntervalCount="5">
<Scales>
<dx:TimeScaleMonth />
<dx:TimeScaleDay />
</Scales>
</TimelineView>
<DayView Enabled="false" />
<WorkWeekView Enabled="false" />
<WeekView Enabled="false" />
<MonthView Enabled="false" />
<AgendaView Enabled="false" />
</Views>
<OptionsBehavior ShowViewSelector="false" />
</dx:BootstrapScheduler>
Agenda View
This demo illustrates the Bootstrap Scheduler control's Agenda View, which lists individual days' appointments chronologically. You can navigate through dates using the two arrow buttons at the Scheduler's top-left corner. If you want to see the current day's appointments, click the Today button.
Use the Views.AgendaView property to configure the Agenda View's basic functionality. This property provides access to the following settings:
- AppointmentDisplayOptions - Provides access to the options specifying how appointments are displayed in the view.
- DayCount - Specifies the number of days that can be displayed simultaneously within the Agenda View.
- DayHeaderOrientation - Gets or sets a value that specifies a day header's orientation.
Use the ActiveViewType property to change the active view.
<dx:BootstrapScheduler runat="server" ActiveViewType="Agenda" Start="2016, 10, 17"
AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
<Views>
<AgendaView Enabled="true" ScrollAreaHeight="600">
<AppointmentDisplayOptions ShowResource="true" />
</AgendaView>
<DayView Enabled="false" />
<WorkWeekView Enabled="false" />
<WeekView Enabled="false" />
<MonthView Enabled="false" />
<TimelineView Enabled="false" />
</Views>
<OptionsBehavior ShowViewSelector="false" />
</dx:BootstrapScheduler>