Back to Devexpress

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

expressappframework-404733-event-planning-and-notifications-how-to-customize-vertical-appointment-template.md

latest2.2 KB
Original Source

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.