Templates

Oct 11, 2023
4 minutes to read

The DevExpress Blazor Scheduler implements a number of templates that allow you to customize the content and appearance of different Scheduler elements. Templates implement a context parameter that contains element-related data.

Watch Video: Scheduler - Customization

Appointments

Use the following templates to customize appointment appearance:

HorizontalAppointmentTemplate - applied to all-day appointments that occupy an entire day or multiple days (displayed horizontally in the all-day panel).
VerticalAppointmentTemplate - applied to other appointments (displayed vertically).

Appointment Templates

To define appointment content and appearance, use HTML markup within <HorizontalAppointmentTemplate> and <VerticalAppointmentTemplate> tags.

When you build a template, you can use the template’s context parameter to access appointment data. This parameter returns a DxSchedulerAppointmentView object.

<DxScheduler StartDate="@DateTime.Today" DataStorage="@DataStorage">
    <DxSchedulerDayView ShowWorkTimeOnly="true" DayCount="3">
        <HorizontalAppointmentTemplate>
            <div class="card p-1 @context.Label.BackgroundCssClass">@context.Appointment.Subject</div>
        </HorizontalAppointmentTemplate>
        <VerticalAppointmentTemplate>
            <div class="card @context.Label.BackgroundCssClass" style="height: 100%; padding: 0.2em 0.5em; opacity: 0.9;">
                @context.Appointment.Subject
            </div>
        </VerticalAppointmentTemplate>
    </DxSchedulerDayView>
</DxScheduler>

Run Demo: Scheduler - Appointment Templates

Watch Video: Scheduler - Customization

Appointment Tooltips

Use AppointmentTooltipTemplate and AppointmentTooltipHeaderTemplate properties to customize the tooltip’s body and header. Refer to the following topic for more information: Custom Appointment Tooltip.

Appointment Forms

Use the following properties to create a custom appointment edit form:

AppointmentCompactFormLayout - the layout of the compact form that appears when a user creates or edits an appointment.
AppointmentCompactFormHeaderTemplate - the header of the compact form.
AppointmentFormLayout - the layout of the extended form that opens when a user clicks the expand button in the compact edit form.
AppointmentFormHeaderTemplate - the header of the extended form.

Refer to the following topic for more information: Custom Appointment Form.

Time Cells, Date Headers, Resource Headers

You can customize the content and appearance of time cells, date headers, and resource headers.

View	Cell type	API members
Day Work Week Week	Time cell Resource header Date header All-day cell	TimeCellTemplate ResourceHeaderCellTemplate DateHeaderCellTemplate AllDayTimeCellTemplate
Month	Time cell Horizontal resource header Vertical resource header Date header Day of the week header	TimeCellTemplate HorizontalResourceHeaderCellTemplate VerticalResourceHeaderCellTemplate DateHeaderCellTemplate DayOfWeekHeaderCellTemplate
Timeline	Time cell Resource header Date header	TimeCellTemplate ResourceHeaderCellTemplate DateHeaderCellTemplate

You can also handle the HtmlCellDecoration event to customize the appearance of different Scheduler cells.

The following example displays placeholder text for time cells that do not contain appointments:

@using Data

<DxScheduler StartDate="@DateTime.Today"
             DataStorage="@DataStorage">
    <DxSchedulerDayView ShowWorkTimeOnly="true">
        <TimeCellTemplate>
            @{
                var appointments = DataStorage.GetAppointments(context.Interval).ToList();
                if (appointments.Count == 0) {
                    <div style="height: 100%; display: flex; justify-content:center">
                        Nothing planned</div>
                }
            }
        </TimeCellTemplate>
    </DxSchedulerDayView>
</DxScheduler>

@code {
    DxSchedulerDataStorage DataStorage = new DxSchedulerDataStorage() {
        AppointmentsSource = AppointmentCollection.GetAppointments(),
        AppointmentMappings = new DxSchedulerAppointmentMappings() {
            Type = "AppointmentType",
            Start = "StartDate",
            End = "EndDate",
            Subject = "Caption",
            AllDay = "AllDay",
            Location = "Location",
            Description = "Description",
            LabelId = "Label",
            StatusId = "Status",
            RecurrenceInfo = "Recurrence"
        }
    };
}

public class Appointment {
    public Appointment() {}

    public int AppointmentType { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
    public string Caption { get; set; }
    public string Description { get; set; }
    public string Location { get; set; }
    public int Label { get; set; }
    public int Status { get; set; }
    public bool AllDay { get; set; }
    public string Recurrence { get; set; }
}

public static partial class AppointmentCollection {
    public static List<Appointment> GetAppointments() {
        DateTime date = DateTime.Today;
        var dataSource = new List<Appointment>() {
            new Appointment {
                Caption = "Install New Router in Dev Room",
                StartDate = date + (new TimeSpan(0, 10, 0, 0)),
                EndDate = date + (new TimeSpan(0, 12, 0, 0)),
                Label = 6, 
                Status = 1
            },
            new Appointment {
                Caption = "Upgrade Personal Computers",
                StartDate = date + (new TimeSpan(0,  14, 0, 0)),
                EndDate = date + (new TimeSpan(0, 16, 30, 0)),
                Label = 1, 
                Status = 1
            },
            new Appointment {
                Caption = "Website Redesign Plan",
                StartDate = date + (new TimeSpan(1, 9, 30, 0)),
                EndDate = date + (new TimeSpan(1, 11, 30, 0)),
                Label = 1, 
                Status = 1
            },
            // ...
        };
        return dataSource;
    }
}

Scheduler Time Cell Template in Day View