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

Scheduler - Templates

10/5/2020 Monday, October 5, 2020 DayWeekMultiDayMonth
Sun
04-10
Mon
05-10
Tue
06-10
Wed
07-10
Thu
08-10
Fri
09-10
Sat
10-10
all day
7:00 AM
8:00 AM
9:00 AM
10:00 AM
11:00 AM
12:00 PM
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
  • SchedulerAppointmentService.cs
  • SchedulerAppointment.cs
Loading the demo source code...please wait.

Description

The Telerik Blazor Scheduler component lets you customize the date header of the content table. You could change the way appointments and events look like, and what they contain. When you do that, you will not lose built-in features such as the Delete icon, or dragging to resize or move the appointment.

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 template because the have, in general, a rather different styling.

You can use those templates to add 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 and 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.

Support & Learning Resources

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