blazor-404562-components-scheduler-customization-templates.md
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.
Use the following templates to customize appointment appearance:
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 cell">
@context.Appointment.Subject
</div>
</VerticalAppointmentTemplate>
</DxSchedulerDayView>
</DxScheduler>
.cell {
height: 100%;
padding: 0.2em 0.5em;
opacity: 0.9;
}
Run Demo: Scheduler - Appointment Templates
Use AppointmentTooltipTemplate and AppointmentTooltipHeaderTemplate properties to customize the tooltip’s body and header. Refer to the following topic for additional information: Custom Appointment Tooltip.
Use the following properties to create a custom appointment edit form:
Refer to the following topic for additional information: Custom Appointment Form.
You can customize the content and appearance of time cells, date headers, and resource headers.
|
View
|
Cell type
|
API members
| | --- | --- | --- | |
|
Time cell
Resource headerDate header
All-day cell
|
TimeCellTemplate
ResourceHeaderCellTemplateDateHeaderCellTemplate
AllDayTimeCellTemplate
| |
|
Time cell
Horizontal resource headerVertical resource header
Date headerDay of the week header
|
TimeCellTemplate
HorizontalResourceHeaderCellTemplateVerticalResourceHeaderCellTemplate
DateHeaderCellTemplateDayOfWeekHeaderCellTemplate
| |
|
Time cell
Resource headerDate header
|
TimeCellTemplate
ResourceHeaderCellTemplateDateHeaderCellTemplate
|
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 class="planned">
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;
}
}
.planned {
height: 100%;
display: flex;
justify-content: center;
}
Run Demo: Scheduler - Date Header
Run Demo: Scheduler - Time Cell
Run Demo: Scheduler - Resource Header
You can also use other view properties to customize cell appearance. Refer to Cell Appearance Customization.
A Scheduler toolbar can contain the following built-in items:
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 additional information: ToolbarItems.