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.
 

ASPXVerticalAppointment.ascxVerticalAppointment.ascx.csHorizontalAppointment.ascxHorizontalAppointment.ascx.csHorizontalAlldayAreaAppointment.ascxHorizontalAlldayAreaAppointment.ascx.csHorizontalSameDayAppointment.ascxHorizontalSameDayAppointment.ascx.csCopy 
<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.
 

ASPXC#Copy 
<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.
 

ASPXResourceHeader.ascxResourceHeader.ascx.csCopy 
<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