Appointment Template

This demo illustrates how to customize the appearance of appointments by providing custom templates. The templates to modify are: VerticalAppointmentTemplate for Day, Full Week and Work Week views, HorizontalAppointmentTemplate and HorizontalSameDayAppointmentTemplate for the Month view, HorizontalAppointmentTemplate for the Timeline view.

In this demo, switch views to observe changes in appointment appearance.

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:BootstrapScheduler runat="server" ActiveViewType="Day" GroupType="Resource"
    AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
    <OptionsResourceNavigator EnableIncreaseDecrease="false" />
    <Views>
        <DayView ResourcesPerPage="2" DayCount="2">
            <AppointmentDisplayOptions AppointmentAutoHeight="false" AppointmentHeight="50" />
            <Templates>
                <VerticalAppointmentTemplate>
                    <demo:VerticalAppointment runat="server" />
                </VerticalAppointmentTemplate>
                <HorizontalAppointmentTemplate>
                    <demo:HorizontalAlldayAreaAppointment runat="server" />
                </HorizontalAppointmentTemplate>
            </Templates>
        </DayView>
        <WorkWeekView ResourcesPerPage="1">
            <AppointmentDisplayOptions AppointmentAutoHeight="false" AppointmentHeight="50" />
            <Templates>
                <HorizontalAppointmentTemplate>
                    <demo:HorizontalAlldayAreaAppointment runat="server" />
                </HorizontalAppointmentTemplate>
                <VerticalAppointmentTemplate>
                    <demo:VerticalAppointment runat="server" />
                </VerticalAppointmentTemplate>
            </Templates>
        </WorkWeekView>
        <WeekView Enabled="false" />
        <MonthView ResourcesPerPage="1" >
            <AppointmentDisplayOptions AppointmentAutoHeight="false" AppointmentHeight="120" />
            <CellAutoHeightOptions Mode="LimitHeight" MinHeight=" 150" MaxHeight="320" />
            <Templates>
                <HorizontalAppointmentTemplate>
                    <demo:HorizontalSameDayAppointment runat="server" />
                </HorizontalAppointmentTemplate>
                <HorizontalSameDayAppointmentTemplate>
                    <demo:HorizontalSameDayAppointment runat="server" />
                </HorizontalSameDayAppointmentTemplate>
            </Templates>
        </MonthView>
        <TimelineView ResourcesPerPage="2" IntervalCount="4">
            <AppointmentDisplayOptions AppointmentAutoHeight="false" AppointmentHeight="50" />
            <Templates>
                <HorizontalAppointmentTemplate>
                    <demo:HorizontalAppointment runat="server" />
                </HorizontalAppointmentTemplate>
            </Templates>
        </TimelineView>
        <AgendaView Enabled="false" />
    </Views>
</dx:BootstrapScheduler>
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="VerticalAppointment.ascx.cs"
    Inherits="VerticalAppointment" %>
<div class="scheduler-apt-template-bg">
    <div class="bg-primary card">
    </div>
</div>
<div class="scheduler-apt-template-text text-white">
  <p>
      <span class="font-weight-bold"><%# GetSubject() %></span>
      <span><%# GetLocationText() %></span>
  </p>
  <p><%# GetDescription() %></p>
  <% if(TemplateContainer.AppointmentViewInfo.Appointment.IsRecurring) { %>
    <p class="images text-right"><span class="fa fa-sync"></span></p>
  <% } %>
</div>
using System.Web;
using DevExpress.Web.ASPxScheduler;
public partial class VerticalAppointment : System.Web.UI.UserControl {
    public VerticalAppointmentTemplateContainer TemplateContainer { get { return (VerticalAppointmentTemplateContainer)Parent; } }
    public string GetSubject() {
        return HttpUtility.HtmlEncode(TemplateContainer.AppointmentViewInfo.Appointment.Subject);
    }
    public string GetDescription() {
        return HttpUtility.HtmlEncode(TemplateContainer.AppointmentViewInfo.Appointment.Description);
    }
    public string GetLocationText() {
        var location = TemplateContainer.AppointmentViewInfo.Appointment.Location;
        if(string.IsNullOrEmpty(location))
            return string.Empty;
        else
            return string.Format("({0})", HttpUtility.HtmlEncode(location));
    }
}
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="HorizontalAppointment.ascx.cs"
    Inherits="HorizontalAppointment" %>
<div class="scheduler-apt-template-bg">
    <div class="bg-primary card">
    </div>
</div>
<div class="scheduler-apt-template-text horizontal text-white">
  <p><%# GetStartTime() %></p>
  <p class="subject">
      <% if(TemplateContainer.AppointmentViewInfo.Appointment.IsRecurring) { %>
        <span class="fa fa-sync"></span>
      <% } %>
      <span class="font-weight-bold"><%# GetSubject() %></span>
      <span><%# GetLocationText() %></span>
  </p>
  <p><%# GetEndTime() %></p>
</div>
using System.Web;
using DevExpress.Web.ASPxScheduler;
public partial class HorizontalAppointment : System.Web.UI.UserControl {
    public HorizontalAppointmentTemplateContainer TemplateContainer { get { return (HorizontalAppointmentTemplateContainer)Parent; } }
    public string GetSubject() {
        return HttpUtility.HtmlEncode(TemplateContainer.AppointmentViewInfo.Appointment.Subject);
    }
    public string GetLocationText() {
        var location = TemplateContainer.AppointmentViewInfo.Appointment.Location;
        if(string.IsNullOrEmpty(location))
            return string.Empty;
        else
            return string.Format("({0})", HttpUtility.HtmlEncode(location));
    }
    public string GetStartTime() {
        return TemplateContainer.AppointmentViewInfo.Appointment.Start.ToShortTimeString();
    }
    public string GetEndTime() {
        return TemplateContainer.AppointmentViewInfo.Appointment.End.ToShortTimeString();
    }
}
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="HorizontalAlldayAreaAppointment.ascx.cs"
    Inherits="HorizontalAlldayAreaAppointment" %>
<div class="scheduler-apt-template-bg">
    <div class="bg-primary card">
    </div>
</div>
<div class="scheduler-apt-template-text horizontal-all-day text-white">
    <p class="subject">
        <% if(TemplateContainer.AppointmentViewInfo.Appointment.IsRecurring) { %>
        <span class="fa fa-sync"></span>
        <% } %>
        <span class="font-weight-bold"><%# GetSubject() %></span>
        <span><%# GetLocationText() %></span>
    </p>
</div>
using System.Web;
using DevExpress.Web.ASPxScheduler;
public partial class HorizontalAlldayAreaAppointment : System.Web.UI.UserControl {
    public HorizontalAppointmentTemplateContainer TemplateContainer { get { return (HorizontalAppointmentTemplateContainer)Parent; } }
    public string GetSubject() {
        return HttpUtility.HtmlEncode(TemplateContainer.AppointmentViewInfo.Appointment.Subject);
    }
    public string GetLocationText() {
        var location = TemplateContainer.AppointmentViewInfo.Appointment.Location;
        if(string.IsNullOrEmpty(location))
            return string.Empty;
        else
            return string.Format("({0})", HttpUtility.HtmlEncode(location));
    }
}
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="HorizontalSameDayAppointment.ascx.cs"
    Inherits="HorizontalSameDayAppointment" %>
<div class="scheduler-apt-template-bg">
    <div class="bg-primary card">
    </div>
</div>
<div class="scheduler-apt-template-text text-white">
  <p><%# GetStartTime() %> - <%# GetEndTime() %></p>
  <p>
      <span class="font-weight-bold"><%# GetSubject() %></span>
      <span><%# GetLocationText() %></span>
  </p>
  <p><%# GetDescription() %></p>
  <% if(TemplateContainer.AppointmentViewInfo.Appointment.IsRecurring) { %>
    <p class="images text-right"><span class="fa fa-sync"></span></p>
  <% } %>
</div>
using System.Web;
using DevExpress.Web.ASPxScheduler;
public partial class HorizontalSameDayAppointment : System.Web.UI.UserControl {
	public HorizontalAppointmentTemplateContainer TemplateContainer { get { return (HorizontalAppointmentTemplateContainer)Parent; } }
    public string GetSubject() {
        return HttpUtility.HtmlEncode(TemplateContainer.AppointmentViewInfo.Appointment.Subject);
    }
    public string GetDescription() {
        return HttpUtility.HtmlEncode(TemplateContainer.AppointmentViewInfo.Appointment.Description);
    }
    public string GetLocationText() {
        var location = TemplateContainer.AppointmentViewInfo.Appointment.Location;
        if(string.IsNullOrEmpty(location))
            return string.Empty;
        else
            return string.Format("({0})", HttpUtility.HtmlEncode(location));
    }
    public string GetStartTime() {
        return TemplateContainer.AppointmentViewInfo.Appointment.Start.ToShortTimeString();
    }
    public string GetEndTime() {
        return TemplateContainer.AppointmentViewInfo.Appointment.End.ToShortTimeString();
    }
}

Date Header Template

This demo illustrates how to customize headers shown for every date in a Day View by providing a custom DateHeaderTemplate.

In this demo, pay your attention to date headers, which appearance is different from the default one.

Monday, October 10, 2016
Lincoln Bartlett (Therapy)
Amelia Harper (Therapy)
Stu Pizaro (Therapy)
Lucy Ball (Therapy)
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
Isabella Carter (Home)
Contact info: (16) 328-8878
Andrew Fuller (Home)
Contact info: (36) 874-9792
Madeleine Russell (Hospital)
Contact info: (27) 238-6178
 

<dx:BootstrapScheduler runat="server" ActiveViewType="Day" GroupType="Date"
    AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource" ClientInstanceName="schedulerDateHeaderTemplate">
    <Views>
        <DayView ResourcesPerPage="4" DayCount="1">
            <Templates>
                <DateHeaderTemplate>
                    <div class="btn-group text-white scheduler-date-header">
                        <a class="btn btn-secondary fa fa-arrow-left" href="javascript:;" onclick="schedulerDateHeaderTemplate.GotoDate(<%# GetPrevDate(Container) %>)"></a>
                        <span class="bg-secondary"><%# GetDateText(Container) %></span>
                        <a class="btn btn-secondary fa fa-arrow-right" href="javascript:;" onclick="schedulerDateHeaderTemplate.GotoDate(<%# GetNextDate(Container) %>)"></a>
                    </div>
                </DateHeaderTemplate>
            </Templates>
        </DayView>
        <WorkWeekView Enabled="False" />
        <WeekView Enabled="False" />
        <MonthView Enabled="False" />
        <TimelineView Enabled="False" />
        <AgendaView Enabled="False" />
    </Views>
    <OptionsBehavior ShowViewSelector="False" ShowViewNavigator="false" ShowViewVisibleInterval="false" />
    <OptionsResourceNavigator Visibility="Never" />
</dx:BootstrapScheduler>
public string GetDateText(DateHeaderTemplateContainer container) {
    return container.Interval.Start.ToLongDateString();
}
string GetJsDate(DateTime date) {
    return string.Format("new Date({0}, {1}, {2})", date.Year, date.Month - 1, date.Day);
}
public string GetPrevDate(DateHeaderTemplateContainer container) {
    return GetJsDate(container.Interval.Start.AddDays(-1));
}
public string GetNextDate(DateHeaderTemplateContainer container) {
    return GetJsDate(container.Interval.Start.AddDays(1));
}

Resource Header Template

This demo illustrates how to customize headers shown for every resource by providing a custom template (either HorizontalResourceHeaderTemplate or VerticalResourceHeaderTemplate).

In this demo, resource headers display photos associated with every resource.

Try to change group modes (either by date or by resource), or the current view (Day, Work Week, etc.) to see how resource headers look like.

Lincoln Bartlett (Therapy)
Lincoln Bartlett (Therapy)
Amelia Harper (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:BootstrapScheduler runat="server" ActiveViewType="Day" GroupType="Resource"
    AppointmentDataSourceID="AppointmentDataSource" ResourceDataSourceID="efResourceDataSource">
    <Views>
        <DayView ResourcesPerPage="2" DayCount="2" ScrollAreaHeight="400" />
        <WorkWeekView ResourcesPerPage="2" ScrollAreaHeight="400" />
        <MonthView ResourcesPerPage="1" />
        <TimelineView ResourcesPerPage="2" />
        <AgendaView Enabled="false" />
    </Views>
    <Templates>
        <HorizontalResourceHeaderTemplate>
            <demo:ResourceHeader runat="server" />
        </HorizontalResourceHeaderTemplate>
        <VerticalResourceHeaderTemplate>
            <demo:ResourceHeader runat="server" />
        </VerticalResourceHeaderTemplate>
    </Templates>
</dx:BootstrapScheduler>
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ResourceHeader.ascx.cs" Inherits="ResourceHeader" %>
<div class="scheduler-resource-header text-center">
    <dx:BootstrapBinaryImage runat="server" Width="80px"
        ContentBytes='<%# GetImageContent(TemplateContainer.Resource.Id) %>'
        AlternateText='<%# TemplateContainer.Resource.Caption %>'
        ToolTip='<%# TemplateContainer.Resource.Caption %>'>
    </dx:BootstrapBinaryImage><br />
    <span><%# TemplateContainer.Resource.Caption %></span>
</div>
using System;
using System.IO;
using System.Linq;
using DevExpress.Web.ASPxScheduler;
using DevExpress.Web.Demos;
public partial class ResourceHeader : System.Web.UI.UserControl {
    public ResourceHeaderTemplateContainer TemplateContainer { get { return (ResourceHeaderTemplateContainer)Parent; } }
    public byte[] GetImageContent(object id) {
        using(var context = new MedicsSchedulingDBContextSL()) {
            int medicID = Convert.ToInt32(id);
            return context.Medics.Single(medic => medic.ID.Equals(medicID)).PhotoBytes;
        }
    }
}
Screen Size
Color Themes
Demo QR Code
October 10 – 11, 2016