TimelineDay with ScheduleHeaderRow ignores hour template
Version 31.2.4
I have a SfSchedule where I wanted to show the events starting in the middle of the day instead of at the start of the day. I achieved this by setting a ScheduleTimeScale to allow the events to be offset by their start time on the day and that is working perfectly.
The problem is that I want to remove the "hour" header row (or at least make it blank) but I haven't found a way to do this. I've tried a ScheduleHeaderRow Option="HeaderRowType.Hour" but that is ignored. I don't see any option to hide/remove/supress the hour header row.
<SfSchedule @ref=ScheduleRef TValue="ScheduleEvent" ShowQuickInfo="false" Height="90vh" @bind-SelectedDate="@CurrentDate" CurrentView="View.TimelineDay" EnableAutoRowHeight="true" ShowTimeIndicator=false AllowDragAndDrop=false CssClass="wideColumn">
<ScheduleTimeScale Enable="true" Interval="1440" SlotCount="1"></ScheduleTimeScale>
<ScheduleGroup Resources="@groupData"></ScheduleGroup>
<ScheduleResources>
<ScheduleResource TItem="RoomType" TValue="int" DataSource="@RoomTypeList" Field="RoomTypeId" Name="RoomTypes" TextField="Name" IdField="Id"></ScheduleResource>
<ScheduleResource TItem="Room" TValue="int" DataSource="@RoomList" Field="RoomId" Name="Rooms" TextField="RoomNumber" IdField="Id" GroupIDField="RoomTypeId"></ScheduleResource>
</ScheduleResources>
<ScheduleViews>
<ScheduleView Option="View.TimelineDay" Interval="14">
<EventTemplate>
@{
var ev = (context as ScheduleEvent);
<div class="e-inner-wrap">
<div class="e-subject">@ev.Subject</div>
</div>
}
</EventTemplate>
</ScheduleView>
</ScheduleViews>
<ScheduleHeaderRows>
<ScheduleHeaderRow Option="HeaderRowType.Month">
<Template>
<div class="d-flex px-3 justify-content-between"> /* THIS WORKS */
<div>@context.Date.ToString("MMMM")</div>
<div>@context.Date.ToString("MMMM")</div>
</div>
</Template>
</ScheduleHeaderRow>
<ScheduleHeaderRow Option="HeaderRowType.Date"> /* HAS NO EFFECT */
<Template>
<div>date @context.Date.ToString("d")</div>
</Template>
</ScheduleHeaderRow>
<ScheduleHeaderRow Option="HeaderRowType.Hour"> /* HAS NO EFFECT - WANT THIS HEADER ROW REMOVED OR BLANK */
<Template>
<div>date @context.Date.ToString("d")</div>
</Template>
</ScheduleHeaderRow>
</ScheduleHeaderRows>
<ScheduleTemplates>
<DateHeaderTemplate>
<div>@context.Date.ToString("ddd d")</div> /* THIS WORKS */
</DateHeaderTemplate>
</ScheduleTemplates>
<ScheduleEventSettings DataSource="@EventsList" EnableTooltip="true" IgnoreWhitespace="true" AllowEditing=false AllowAdding=false AllowDeleting=false>
<TooltipTemplate>
@{
var ev = (context as ScheduleEvent);
<div><strong>@ev.Subject</strong></div>
}
</TooltipTemplate>
</ScheduleEventSettings>
<ScheduleEvents TValue="ScheduleEvent" OnEventDoubleClick="OnEventDoubleClick" EventRendered="OnEventRendered" Navigating="OnNavigating"></ScheduleEvents>
</SfSchedule>
Please let me know how I can remove the hour header row.
Hi Ryan
Tomko,
Greetings from Syncfusion Support.
We have reviewed and
validated your requirement. In the Scheduler, headerRows and dateHeaderTemplate
can be used to customize the header. The dateHeaderTemplate customizes only the
date header row. If your goal is to remove the hour row, do not include the
Hour entry in headerRows; otherwise, the hour row will continue to render. If
we have misunderstood your requirement, please share detailed use-case
scenarios. Please refer to the shared sample for your reference.
Sample link: https://blazorplayground.syncfusion.com/BtVyMCrbMxoZUCsu
Don't hesitate to get in touch if you require further help or more information.
Regards,
Vijay
No, that doesn't solve the problem.
If the <ScheduleHeaderRow Option="HeaderRowType.Hour"> is removed then it's true the hour header doesn't render HOWEVER then the event no longer has the correct position based on the time of the event:
If the <ScheduleHeaderRow Option="HeaderRowType.Hour"> is included then the event does show at the correct position based on time HOWEVER then the ugly hour header row is displayed:
What i want is for the event to be positioned based on the time (in this case in starting in the middle of the day) but I also want to remove the hour header or at least be able to format the hour header with a template to make it blank
Hi Ryan Tomko,
We have reviewed and
validated your query against your requirements. Since you want the Hour header
row to appear blank, we recommend setting an empty string in the TimeScale
MajorSlotTemplate. This will render the hour field empty, as shown in the code snippet
below. Please refer to the attached sample for further
details.
TimeScale Template UG: https://blazor.syncfusion.com/documentation/scheduler/timescale#customizing-time-cells-using-template
Sample link: https://blazorplayground.syncfusion.com/hDVeMhjsqsjGjrNE
[Index.razor]
|
@using Syncfusion.Blazor.Schedule @using
System.Globalization <SfSchedule TValue="AppointmentData" Height="650px"> <ScheduleTimeScale Enable="true" Interval="1440" SlotCount="1"> <MajorSlotTemplate> <div>@(majorSlotTemplate((context as TemplateContext).Date))</div> </MajorSlotTemplate> </ScheduleTimeScale> <ScheduleHeaderRows> <ScheduleHeaderRow Option="HeaderRowType.Month"></ScheduleHeaderRow> <ScheduleHeaderRow Option="HeaderRowType.Date"></ScheduleHeaderRow> <ScheduleHeaderRow Option="HeaderRowType.Hour"></ScheduleHeaderRow> </ScheduleHeaderRows> <ScheduleViews> <ScheduleView Option="View.TimelineDay" Interval="14" /> </ScheduleViews> <ScheduleTemplates> <DateHeaderTemplate> <div>@context.Date.ToString("ddd d")</div> </DateHeaderTemplate> </ScheduleTemplates> </SfSchedule> @code{ public static string majorSlotTemplate(DateTime date) { return string.Empty; } } |
Don't hesitate to get in touch if you require further help or more information.
Regards,
Vijay
