Appointment Data Binding

The Bootstrap Scheduler's data layer is separated into two entities - appointments and resources. An appointment represents a scheduled time interval and an end-user's plans for this time interval. The data source storing appointments can be specified using the AppointmentDataSourceID property.

Specify the following data field mapping properties (available through Storage.Appointments.Mappings) to allow the Scheduler control to save and retrieve appointment data to/from the data source.

  • AppointmentId - Specifies the data field storing appointments' unique identifiers.
  • Start - Specifies the data field storing appointments' start dates and times.
  • End - Specifies the data field storing appointments' end dates and times.
  • Description - Specifies the data field storing appointments' descriptions.
  • Location - Specifies the data field storing locations where appointments are scheduled.

An end-user can navigate through dates using two arrow buttons and the Today button displayed at the top-left corner of the Scheduler.
 

ASPXCopy 
<dx:BootstrapScheduler runat="server" ActiveViewType="Day"
    AppointmentDataSourceID="AppointmentDataBindingDataSource" Start="10.10.2016">
    <Storage>
        <Appointments AutoRetrieveId="true">
            <Mappings AppointmentId = "ID" Start = "StartTime" End = "EndTime" Subject = "Subject"
                Description = "Description" Location = "Location" AllDay = "AllDay" />
        </Appointments>
    </Storage>
    <Views>
        <DayView DayCount="3" ShowWorkTimeOnly="true">
            <AppointmentDisplayOptions StatusDisplayType="Never" />
            <WorkTime Start="8:00" End="19:00" />
        </DayView>
    </Views>
    <OptionsBehavior ShowViewSelector="false" />
</dx:BootstrapScheduler>
<demo:SchedulerDemoDataSource runat="server" ID="AppointmentDataBindingDataSource" DataSourceID="efAppointmentDataBindingDataSource" IsSiteMode="True">
</demo:SchedulerDemoDataSource>
<ef:EntityDataSource ID="efAppointmentDataBindingDataSource" runat="server" ContextTypeName="DevExpress.Web.Demos.MedicsSchedulingDBContextSL"
    EntitySetName="MedicalAppointments" EnableInsert="true" EnableUpdate="true" EnableDelete="true" EnableFlattening="false"
    Where="it.MedicId == @medicId">
    <WhereParameters>
        <asp:Parameter Name="medicId" Type="Int16" DefaultValue="1" />
    </WhereParameters>
</ef:EntityDataSource>

Statuses and Labels

An appointment's identification label and availability status are an appointment's basic visual characteristics. They are used for at-a-glance appointment identification.

  • An identification label is displayed in a background color which is used to fill the client region of the rectangle that is occupied by the appointment.
  • The availability status is indicated by a strip displayed on the left side of the appointment. The strip is colored depending upon the availability status's type.

Specify the following data field mapping properties (available through Storage.Appointments.Mappings) to allow the Scheduler control to save and retrieve labels' and statuses' information to/from the data source.

  • Label - Specifies the data field storing appointments' statuses.
  • Status - Specifies the data field storing appointments' labels.

You can customize settings for labels and statuses using the following properties available through Storage:

The default appearance of statuses and labels can be changed using the OptionsAppearance.DefaultAppointmentColorsMode property. This property allows the following values:

  • Bootstrap - Contextual colors provided by Bootstrap are used. This value is used by default.
  • Internal - Colors provided by DevExpress are used.
 

ASPXCopy 
<dx:BootstrapScheduler runat="server" ActiveViewType="Day"
    AppointmentDataSourceID="AppointmentStatusesAndLabelsDataSource" Start="10.10.2016">
    <Storage>
        <Appointments AutoRetrieveId="true">
            <Mappings AppointmentId = "ID" Start = "StartTime" End = "EndTime" Subject = "Subject"
                Description = "Description" Location = "Location" AllDay = "AllDay"
                Label = "Label" Status = "Status"/>
            <Labels>
                <dx:BootstrapAppointmentLabel Text="None"
                    BackgroundCssClass="bg-light" TextCssClass="text-dark"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Routine"
                    BackgroundCssClass="bg-primary" TextCssClass="text-white"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Follow-Up"
                    BackgroundCssClass="bg-success" TextCssClass="text-white"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Urgent"
                    BackgroundCssClass="bg-danger" TextCssClass="text-white"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Lab Testing"
                    BackgroundCssClass="bg-warning" TextCssClass="text-dark"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Service"
                    BackgroundCssClass="bg-secondary" TextCssClass="text-white"></dx:BootstrapAppointmentLabel>
            </Labels>
            <Statuses>
                <dx:BootstrapAppointmentStatus Text="NotSet"
                    Type="Custom" CssClass="bg-white"></dx:BootstrapAppointmentStatus>
                <dx:BootstrapAppointmentStatus Text="Confirmed"
                    Type="Custom" CssClass="bg-success"></dx:BootstrapAppointmentStatus>
                <dx:BootstrapAppointmentStatus Text="Awaiting Confirmation"
                    Type="Custom" CssClass="bg-danger"></dx:BootstrapAppointmentStatus>
                <dx:BootstrapAppointmentStatus Text="Cancelled"
                    Type="Custom" CssClass="bg-secondary"></dx:BootstrapAppointmentStatus>
            </Statuses>
        </Appointments>
    </Storage>
    <Views>
        <DayView DayCount="3" ShowWorkTimeOnly="true">
            <WorkTime Start="8:00" End="19:00" />
        </DayView>
    </Views>
    <OptionsBehavior ShowViewSelector="false" />
</dx:BootstrapScheduler>
<demo:SchedulerDemoDataSource runat="server" ID="AppointmentStatusesAndLabelsDataSource" DataSourceID="efAppointmentStatusesAndLabelsDataSource" IsSiteMode="True">
</demo:SchedulerDemoDataSource>
<ef:EntityDataSource ID="efAppointmentStatusesAndLabelsDataSource" runat="server" ContextTypeName="DevExpress.Web.Demos.MedicsSchedulingDBContextSL"
    EntitySetName="MedicalAppointments" EnableInsert="true" EnableUpdate="true" EnableDelete="true" EnableFlattening="false"
    Where="it.MedicId == @medicId">
    <WhereParameters>
        <asp:Parameter Name="medicId" Type="Int16" DefaultValue="1" />
    </WhereParameters>
</ef:EntityDataSource>

Recurence Info

A recurring appointment is an appointment configured to occur on multiple dates in the same time interval. Whether an appointment is recurring is specified by the Appointment.IsRecurring property.

Specify the following data field mapping properties (available through Storage.Appointments.Mappings) to allow the Scheduler control to save and retrieve appointment recurrence information to/from the data source.

  • Type - Specifies the data field storing appointments' types (normal or recurring).
  • RecurrenceInfo - Specifies the data field storing appointments' recurrence rules.

An end-user can navigate through currently visible resources, as well as increase or decrease their total number using the Resource Navigator control (toolbar buttons with arrows, plus and minus signs, and a drop-down list of resources) which is shown on the top of the Bootstrap Scheduler control.
 

ASPXCopy 
<dx:BootstrapScheduler ID="SchedulerRecurenceInfo" runat="server" ActiveViewType="Day"
    AppointmentDataSourceID="AppointmentSchedulerRecurenceInfoDataSource" Start="10.10.2016">
    <Storage>
        <Appointments AutoRetrieveId="true">
            <Mappings AppointmentId = "ID" Start = "StartTime" End = "EndTime" Subject = "Subject"
                Description = "Description" Location = "Location" AllDay = "AllDay"
                Type = "EventType" RecurrenceInfo = "RecurrenceInfo"
                Label = "Label" Status = "Status" />
            <Labels>
                <dx:BootstrapAppointmentLabel Text="None"
                    BackgroundCssClass="bg-light" TextCssClass="text-dark"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Routine"
                    BackgroundCssClass="bg-primary" TextCssClass="text-white"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Follow-Up"
                    BackgroundCssClass="bg-success" TextCssClass="text-white"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Urgent"
                    BackgroundCssClass="bg-danger" TextCssClass="text-white"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Lab Testing"
                    BackgroundCssClass="bg-warning" TextCssClass="text-dark"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Service"
                    BackgroundCssClass="bg-secondary" TextCssClass="text-white"></dx:BootstrapAppointmentLabel>
            </Labels>
            <Statuses>
                <dx:BootstrapAppointmentStatus Text="NotSet"
                    Type="Custom" CssClass="bg-white"></dx:BootstrapAppointmentStatus>
                <dx:BootstrapAppointmentStatus Text="Confirmed"
                    Type="Custom" CssClass="bg-success"></dx:BootstrapAppointmentStatus>
                <dx:BootstrapAppointmentStatus Text="Awaiting Confirmation"
                    Type="Custom" CssClass="bg-danger"></dx:BootstrapAppointmentStatus>
                <dx:BootstrapAppointmentStatus Text="Cancelled"
                    Type="Custom" CssClass="bg-secondary"></dx:BootstrapAppointmentStatus>
            </Statuses>
        </Appointments>
    </Storage>
    <Views>
        <DayView DayCount="3" ShowWorkTimeOnly="true">
            <WorkTime Start="8:00" End="19:00" />
        </DayView>
    </Views>
    <OptionsBehavior ShowViewSelector="false" />
</dx:BootstrapScheduler>
<demo:SchedulerDemoDataSource runat="server" ID="AppointmentSchedulerRecurenceInfoDataSource" DataSourceID="efAppointmentSchedulerRecurenceInfoDataSource" IsSiteMode="True">
</demo:SchedulerDemoDataSource>
<ef:EntityDataSource ID="efAppointmentSchedulerRecurenceInfoDataSource" runat="server" ContextTypeName="DevExpress.Web.Demos.MedicsSchedulingDBContextSL"
    EntitySetName="MedicalAppointments" EnableInsert="true" EnableUpdate="true" EnableDelete="true" EnableFlattening="false"
    Where="it.MedicId == @medicId">
    <WhereParameters>
        <asp:Parameter Name="medicId" Type="Int16" DefaultValue="1" />
    </WhereParameters>
</ef:EntityDataSource>

Resource Data Binding

In real-life scheduling applications, appointments are seldom processed simply "as is", but usually are assigned to different resources. The decision as to what should be a resource in a particular scheduling application depends upon the specifics of the task solved by the application. The resource data source can be specified using the ResourceDataSourceID property.

Specify the following data field mapping properties (available through Storage.Resources.Mappings) to allow the Scheduler control to save and retrieve resource data to/from the data source.

  • ResourceId - Specifies the data field storing resources' unique identifiers.
  • Caption - Specifies the data field storing resources' captions.

Additionally, specify the Storage.Appointments.Mappings.ResourceId property to store appointments' associated resource.

Setting the OptionsAppearance.UseResourceColorSchemas property to true allows you to use the OptionsAppearance.ResourceColorSchemas color collection to specify colors of time cells for different resources.
 

ASPXCopy 
<dx:BootstrapScheduler runat="server" ActiveViewType="Day" GroupType="Resource"
    AppointmentDataSourceID="AppointmentResourcesDataBindingDataSource" ResourceDataSourceID="efResourcesDataBindingDataSource" Start="10.10.2016">
    <Storage>
        <Appointments AutoRetrieveId="true">
            <Mappings AppointmentId = "ID" Start = "StartTime" End = "EndTime" Subject = "Subject"
                Description = "Description" Location = "Location" AllDay = "AllDay"
                Type = "EventType" RecurrenceInfo = "RecurrenceInfo" Label = "Label" Status = "Status" ResourceId = "MedicId" />
            <Labels>
                <dx:BootstrapAppointmentLabel Text="None"
                    BackgroundCssClass="bg-light" TextCssClass="text-dark"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Routine"
                    BackgroundCssClass="bg-primary" TextCssClass="text-white"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Follow-Up"
                    BackgroundCssClass="bg-success" TextCssClass="text-white"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Urgent"
                    BackgroundCssClass="bg-danger" TextCssClass="text-white"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Lab Testing"
                    BackgroundCssClass="bg-warning" TextCssClass="text-dark"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Service"
                    BackgroundCssClass="bg-secondary" TextCssClass="text-white"></dx:BootstrapAppointmentLabel>
            </Labels>
            <Statuses>
                <dx:BootstrapAppointmentStatus Text="NotSet"
                    Type="Custom" CssClass="bg-white"></dx:BootstrapAppointmentStatus>
                <dx:BootstrapAppointmentStatus Text="Confirmed"
                    Type="Custom" CssClass="bg-success"></dx:BootstrapAppointmentStatus>
                <dx:BootstrapAppointmentStatus Text="Awaiting Confirmation"
                    Type="Custom" CssClass="bg-danger"></dx:BootstrapAppointmentStatus>
                <dx:BootstrapAppointmentStatus Text="Cancelled"
                    Type="Custom" CssClass="bg-secondary"></dx:BootstrapAppointmentStatus>
            </Statuses>
        </Appointments>
        <Resources>
            <Mappings ResourceId = "ID" Caption = "DisplayName" />
        </Resources>
    </Storage>
    <Views>
        <DayView DayCount="2" ResourcesPerPage="2" ShowWorkTimeOnly="true">
            <WorkTime Start="8:00" End="19:00" />
        </DayView>
    </Views>
    <OptionsBehavior ShowViewSelector="false" />
</dx:BootstrapScheduler>
<demo:SchedulerDemoDataSource runat="server" ID="AppointmentResourcesDataBindingDataSource" DataSourceID="efAppointmentResourcesDataBindingDataSource" IsSiteMode="True">
</demo:SchedulerDemoDataSource>
<ef:EntityDataSource ID="efAppointmentResourcesDataBindingDataSource" runat="server" ContextTypeName="DevExpress.Web.Demos.MedicsSchedulingDBContextSL"
    EntitySetName="MedicalAppointments" EnableInsert="true" EnableUpdate="true" EnableDelete="true" EnableFlattening="false" />
<ef:EntityDataSource ID="efResourcesDataBindingDataSource" runat="server" ContextTypeName="DevExpress.Web.Demos.MedicsSchedulingDBContextSL"
    EntitySetName="Medics" EnableFlattening="false" />

Fetch Appointments

This demo demonstrates how you can use the FetchAppointments event to speed up appointment loading by loading appointments for the currently displayed time interval only.

The FetchAppointments event occurs before the scheduler starts retrieving appointments from the data storage.
 

ASPXC#Copy 
<dx:BootstrapScheduler ID="SchedulerFetchAppointments" runat="server" ActiveViewType="Day" GroupType="Resource"
    AppointmentDataSourceID="AppointmentFetchAppointmentsDataSource" ResourceDataSourceID="efResourceFetchAppointmentsDataSource" Start="10.10.2016"
    OnFetchAppointments="SchedulerFetchAppointments_FetchAppointments">
    <Storage>
        <Appointments AutoRetrieveId="true">
            <Mappings AppointmentId = "ID" Start = "StartTime" End = "EndTime" Subject = "Subject"
                Description = "Description" Location = "Location" AllDay = "AllDay" Type = "EventType"
                RecurrenceInfo = "RecurrenceInfo" Label = "Label" Status = "Status" ResourceId = "MedicId" />
            <Labels>
                <dx:BootstrapAppointmentLabel Text="None"
                    BackgroundCssClass="bg-light" TextCssClass="text-dark"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Routine"
                    BackgroundCssClass="bg-primary" TextCssClass="text-white"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Follow-Up"
                    BackgroundCssClass="bg-success" TextCssClass="text-white"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Urgent"
                    BackgroundCssClass="bg-danger" TextCssClass="text-white"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Lab Testing"
                    BackgroundCssClass="bg-warning" TextCssClass="text-dark"></dx:BootstrapAppointmentLabel>
                <dx:BootstrapAppointmentLabel Text="Service"
                    BackgroundCssClass="bg-secondary" TextCssClass="text-white"></dx:BootstrapAppointmentLabel>
            </Labels>
            <Statuses>
                <dx:BootstrapAppointmentStatus Text="NotSet"
                    Type="Custom" CssClass="bg-white"></dx:BootstrapAppointmentStatus>
                <dx:BootstrapAppointmentStatus Text="Confirmed"
                    Type="Custom" CssClass="bg-success"></dx:BootstrapAppointmentStatus>
                <dx:BootstrapAppointmentStatus Text="Awaiting Confirmation"
                    Type="Custom" CssClass="bg-danger"></dx:BootstrapAppointmentStatus>
                <dx:BootstrapAppointmentStatus Text="Cancelled"
                    Type="Custom" CssClass="bg-secondary"></dx:BootstrapAppointmentStatus>
            </Statuses>
        </Appointments>
        <Resources>
            <Mappings ResourceId = "ID" Caption = "DisplayName" />
        </Resources>
    </Storage>
    <Views>
        <DayView ResourcesPerPage="3" ShowWorkTimeOnly="true">
            <WorkTime Start="8:00" End="19:00" />
        </DayView>
        <WorkWeekView ResourcesPerPage="2" ShowWorkTimeOnly="true">
            <WorkTime Start="8:00" End="19:00" />
        </WorkWeekView>
        <FullWeekView ResourcesPerPage="2" Enabled="true" ShowWorkTimeOnly="true">
            <WorkTime Start="8:00" End="19:00" />
        </FullWeekView>
        <WeekView ResourcesPerPage="2">
        </WeekView>
        <MonthView ResourcesPerPage="1">
        </MonthView>
        <TimelineView ResourcesPerPage="2" IntervalCount="5">
        </TimelineView>
        <AgendaView ScrollAreaHeight="600">
        </AgendaView>
    </Views>
</dx:BootstrapScheduler>
<demo:SchedulerDemoDataSource runat="server" ID="AppointmentFetchAppointmentsDataSource" DataSourceID="efAppointmentFetchAppointmentsDataSource" IsSiteMode="True">
</demo:SchedulerDemoDataSource>
<ef:EntityDataSource ID="efAppointmentFetchAppointmentsDataSource" runat="server" ContextTypeName="DevExpress.Web.Demos.MedicsSchedulingDBContextSL"
    Where="((it.StartTime >= @startTime) && (it.EndTime <= @endTime)) || ((it.StartTime >= @startTime) && (it.StartTime <= @endTime)) || ((it.EndTime >= @startTime) && (it.EndTime <= @endTime)) || ((it.StartTime < @startTime) && (it.EndTime > @endTime)) || (it.EventType <> 0)"
    EntitySetName="MedicalAppointments" EnableInsert="true" EnableUpdate="true" EnableDelete="true" EnableFlattening="false">
    <WhereParameters>
        <asp:Parameter Name="startTime" Type="DateTime"  />
        <asp:Parameter Name="endTime" Type="DateTime" />
    </WhereParameters>
</ef:EntityDataSource>
<ef:EntityDataSource ID="efResourceFetchAppointmentsDataSource" runat="server" ContextTypeName="DevExpress.Web.Demos.MedicsSchedulingDBContextSL"
    EntitySetName="Medics" EnableFlattening="false" />
protected void SchedulerFetchAppointments_FetchAppointments(object sender, DevExpress.XtraScheduler.FetchAppointmentsEventArgs e) {
    efAppointmentFetchAppointmentsDataSource.WhereParameters["startTime"].DefaultValue = e.Interval.Start.ToString();
    efAppointmentFetchAppointmentsDataSource.WhereParameters["endTime"].DefaultValue = e.Interval.End.ToString();
    e.ForceReloadAppointments = true;
}
Screen Size
Color Themes
Demo QR Code