Group by Date

This demo illustrates how to group scheduled appointments by date. When appointments are grouped by date and the Scheduler control displays multiple dates and resources, resource headers are grouped under date headers. To group appointments by date, set the GroupType property to Date.

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

<dx:BootstrapScheduler runat="server" ActiveViewType="WorkWeek"
    GroupType="Date" AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
    <Views>
        <DayView ResourcesPerPage="2" DayCount="2">
        </DayView>
        <WorkWeekView ResourcesPerPage="2">
        </WorkWeekView>
        <WeekView Enabled="false" />
        <MonthView ResourcesPerPage="2" ShowWeekend="false">
            <AppointmentDisplayOptions StartTimeVisibility="Never" EndTimeVisibility="Never" StatusDisplayType="Bounds" ShowRecurrence="true"/>
        </MonthView>
        <TimelineView ResourcesPerPage="2" IntervalCount="5">
            <CellAutoHeightOptions Mode="FitToContent" />
        </TimelineView>
        <AgendaView Enabled="false" />
    </Views>
</dx:BootstrapScheduler>

Group by Resource

This demo illustrates how to group scheduled appointments by resources. When appointments are grouped by resource and the Scheduler control displays multiple dates and resources, date headers are grouped under resource headers. To group appointments by resource, set the GroupType property to Resource.

Stu Pizaro (Therapy)
Lucy Ball (Therapy)
800
 
900
 
1000
 
1100
 
12PM
 
100
 
200
 
300
 
400
 
500
 
600
 
700
 

<dx:BootstrapScheduler runat="server" ActiveViewType="WorkWeek"
    GroupType="Resource" AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
    <Views>
        <DayView ResourcesPerPage="2" DayCount="2">
        </DayView>
        <WorkWeekView ResourcesPerPage="2">
        </WorkWeekView>
        <WeekView Enabled="false" />
        <MonthView ResourcesPerPage="2" ShowWeekend="false">
            <AppointmentDisplayOptions StartTimeVisibility="Never" EndTimeVisibility="Never" StatusDisplayType="Bounds" ShowRecurrence="true"/>
        </MonthView>
        <TimelineView ResourcesPerPage="2" IntervalCount="5">
            <CellAutoHeightOptions Mode="FitToContent" />
        </TimelineView>
        <AgendaView Enabled="false" />
    </Views>
</dx:BootstrapScheduler>

No Grouping

This demo illustrates how the Scheduler looks without grouping. When appointments are not grouped, date columns display appointments for all resources simultaneously.

800
 
900
 
1000
 
1100
 
12PM
 
100
 
200
 
300
 
400
 
500
 
600
 
700
 

<dx:BootstrapScheduler runat="server" ActiveViewType="WorkWeek"
    GroupType="None" AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
    <Views>
        <DayView DayCount="2">
        </DayView>
        <WorkWeekView>
        </WorkWeekView>
        <WeekView Enabled="false" />
        <MonthView ShowWeekend="false">
            <AppointmentDisplayOptions StartTimeVisibility="Never" EndTimeVisibility="Never" StatusDisplayType="Bounds" ShowRecurrence="true"/>
        </MonthView>
        <TimelineView IntervalCount="5">
            <CssClasses TimelineCellBody="ctrl-fixed-height-lg"  />
            <CellAutoHeightOptions Mode="None" />
        </TimelineView>
        <AgendaView Enabled="false" />
    </Views>
</dx:BootstrapScheduler>
Screen Size
Color Themes
Demo QR Code
Client-Side API