Templates in Blazor Scheduler
- 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.
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).
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>
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 |
---|---|---|
Time cell | TimeCellTemplate | |
Time cell | TimeCellTemplate | |
Time cell | TimeCellTemplate |
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"
}
};
}
Toolbar
A Scheduler toolbar can contain the following built-in items:
- DxSchedulerDateNavigatorToolbarItem
- DxSchedulerNextIntervalToolbarItem
- DxSchedulerPreviousIntervalToolbarItem
- DxSchedulerResourceNavigatorToolbarItem
- DxSchedulerTodayToolbarItem
- DxSchedulerViewNavigatorToolbarItem
Use the ToolbarItems
tag to modify the collection of displayed toolbar items. Declare DxToolbarItem objects to add custom items to this collection.
Refer to the following topic for more information: ToolbarItems.