How to: Customize Vertical Appointment Template (ASP.NET Core Blazor)

• Jul 09, 2025
• 2 minutes to read

This article explains how to implement a custom VerticalAppointmentTemplate in your ASP.NET Core Blazor application.

Note

For the purposes of this article, you can use the MainDemo application installed as a part of the XAF package. The default location of the application is %PUBLIC%\Documents\DevExpress Demos 25.2\Components\XAF.

The default VerticalAppointmentTemplate has the following look:

1. In the Solution Explorer , navigate to the MainDemo.Blazor.Server project, create a new folder, and name it MyComponents.

2. In the MyComponents folder, create a new Razor component and name it DayViewTemplate.razor. Replace the auto-generated content with the following code:

3. Navigate to the properties of the DayViewTemplate.razor file and set the Build Action property to Content.

4. In the MainDemo.Blazor.Server\Controllers folder, create a View Controller and name it SchedulerTemplateCustomizationController.cs. Replace the auto-generated content with the following code:

5. Build the project and run the application. Navigate to the Calendar List View. The customized VerticalAppointmentTemplate should look like this:

Tip

• This example demonstrates the customized Day View, but the same technique is applicable to other View types as well.
• You can use this technique to customize HorizontalAppointmentTemplate.