New to Telerik UI for Blazor? Download Free 30-day trial

Scheduler - Templates

Configurator

Grouped

Design Design
Development Development
PM PM
Mon
05-10
Mon
05-10
Mon
05-10
all day
No All Day Appointments
No All Day Appointments
No All Day Appointments
7:00 AM
8:00 AM
9:00 AM
10:00 AM
11:00 AM
12:00 PM
Lunch
Lunch
Lunch
Lunch
Lunch
Lunch
1:00 PM
2:00 PM
3:00 PM
4:00 PM
5:00 PM
6:00 PM
7:00 PM
8:00 PM
9:00 PM
10:00 PM
11:00 PM
  • Templates.razor
  • MeetingService.cs
  • MeetingDto.cs
Loading the demo source code...please wait.

Style in ThemeBuilder

  • Custom SASS variables
  • Atomic customizations
  • Sharing projects
Start Theming

Description

The Telerik Blazor Scheduler component exposes a variety of templates that allow you to customize the rendering of its inner elements.

Appointment Templates

By default, only the Title of the appointment is shown in each event, and you can change that through the ItemTemplate and AllDayItemTemplate. You can set that content for the entire Scheduler so all appointments use it, or you can set or override it per view. For example, you could have the Week and Multi-day views render the appointments one way, but the Day or Month views to use different templates.

You can use those templates to display more content - such as the start and end time, icons, customized action buttons, and so on. You can add that content conditionally based on the application logic and apply the required styling. Since this is a Blazor app, you have access to the view-model data, so you can write more complex logic that takes into account component settings such as slot duration, component size, number of days, current date, and so on.

Moreover, you can add a CSS class to the entire appointment conditionally through the OnItemRender event. This lets you cascade through it and style the entire element, not just your content. This can be useful for making certain appointments use a given color that is not the default.

Header Templates

The Scheduler exposes a DateHeaderTemplate that you can use to customize the rendering of the Scheduler date header cells. The DateHeaderTemplate is declared on view level and you can add different content in the header templates for the separate views.

When the Scheduler is grouped by a resource, you can use the ResourceGroupHeaderTemplate to customize the rendering of the group headers. You can declare the ResourceGroupHeaderTemplate on root component level to have the same group header content for each view. Or, you can define the template in each view if you want to add different content.

Slot Templates

The views of the Scheduler expose SlotTemplate configuration that allows for adding arbitrary content to the slot cells. It can be used in conjunction with the OnCellRender event to utilize full control over the appearance of the Scheduler's content. The slot templates are defined on view level and you can add different content in the slot templates for the separate views.

This Blazor Scheduler Templates example is part of a unique collection of hundreds of Blazor demos, with which you can see all Telerik UI for Blazor components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for Blazor or ThemeBuilder.

Support & Learning Resources

An error has occurred. This application may no longer respond until reloaded.