We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to create custom date and time headers

Hello. I'm trying to customize the HeaderRowType.Date and HeaderRowType.Hour on a View.TimelineDay schedule. The sample below shows that the templates appear to be ignored.

I have been able to edit the date header using ScheduleTemplates.DateHeaderTemplate. However, there doesn't appear to be an equivalent for Time. Eg. ScehduleTemplates.TimeHeaderTemplate.

Would you please let me know if there is a way to update the Hour headers?

Thank you!


<p>Timeline header rows</p>
<SfSchedule TValue="AppointmentData" Height="650px">
<ScheduleHeaderRow Option="HeaderRowType.Date">
<div>Date: @(context.Date.ToString("yyyy-MM-dd")) </div>
<ScheduleHeaderRow Option="HeaderRowType.Hour">
<div>Date: @(context.Date.ToString("HH:mm")) </div>
<ScheduleView Option="View.TimelineDay" MaxEventsPerRow="10"></ScheduleView>
public class AppointmentData
public int Id { get; set; }
public string Subject { get; set; }
public string Location { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
public string Description { get; set; }
public bool IsAllDay { get; set; }
public string RecurrenceRule { get; set; }
public string RecurrenceException { get; set; }
public Nullable<int> RecurrenceID { get; set; }


1 Reply

SR Swathi Ravi Syncfusion Team December 20, 2022 06:40 AM UTC

Hi Murray,

We don’t have template support for date and hour header rows. Since we have DateHeaderTemplate to customize the date header cells and Timescale MajorSlotTemplate and 

MinorSlotTemplate to customize the hour cells. So, we suggest you use the Schedule's DateHeaderTemplate to customize the date header and the Timescale MajorSlotTemplate and MinorSlotTemplate for Hour customization.


Api: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Schedule.ScheduleTemplates.html#Syncfusion_Blazor_Schedule_ScheduleTemplates_DateHeaderTemplate




Demos: https://blazor.syncfusion.com/demos/scheduler/time-scale?theme=fluent



Swathi Ravi

Live Chat Icon For mobile
Up arrow icon