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.
 

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

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

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