ScheduleHeaderRow using Template

[Alex Auderset]

Hi,

How to use template in ScheduleHeaderRow. We want to prefix the week number.

<ScheduleHeaderRow Option="HeaderRowType.Week" Template="@WeekDetails"></ScheduleHeaderRow> 

We have only found and example with ASP.NET Core

Customizing the header rows using template

https://ej2.syncfusion.com/aspnetcore/documentation/schedule/header-rows/#customizing-the-header-rows-using-template

How to accomplish this in Blazor.

Thanks for your help.

BR Alex

[Alagumeena Kalaiselvan]

Hi Alex, 

  

Thanks for contacting Syncfusion support. 

  

We have validated your reported scenario “How to use template in ScheduleHeaderRow” and you can define the customization inside the element of ScheduleHeaderRow using Template option. Refer the below code for that. 

  

<SfSchedule TValue="AppointmentData" Height="650px"> 

    <ScheduleHeaderRows> 

        <ScheduleHeaderRow Option="HeaderRowType.Year"></ScheduleHeaderRow> 

        <ScheduleHeaderRow Option="HeaderRowType.Month"> 

            <Template> 

                <div>@(getMonthDetails((context as TemplateContext).Date))</div> 

            </Template> 

        </ScheduleHeaderRow> 

        <ScheduleHeaderRow Option="HeaderRowType.Week"> 

            <Template> 

                <div>@(getWeekNumber((context as TemplateContext).Date))</div> 

            </Template> 

        </ScheduleHeaderRow> 

        <ScheduleHeaderRow Option="HeaderRowType.Date"> 

            <Template> 

                <div>@(getDateDetails((context as TemplateContext).Date))</div> 

            </Template> 

        </ScheduleHeaderRow> 

    </ScheduleHeaderRows> 

    <ScheduleViews> 

        <ScheduleView Option="View.TimelineMonth"></ScheduleView> 

    </ScheduleViews> 

</SfSchedule> 

  

@code{ 

    public static string getMonthDetails(DateTime date) 

    { 

        return date.ToString("MMMM", CultureInfo.InvariantCulture); 

    } 

    public static string getWeekNumber(DateTime date) 

    { 

        CultureInfo ciCurr = CultureInfo.CurrentCulture; 

        Calendar myCal = ciCurr.Calendar; 

        CalendarWeekRule myCWR = ciCurr.DateTimeFormat.CalendarWeekRule; 

        DayOfWeek myFirstDOW = ciCurr.DateTimeFormat.FirstDayOfWeek; 

        return myCal.GetWeekOfYear(date, myCWR, myFirstDOW).ToString(); 

    } 

    public static string getDateDetails(DateTime date) 

    { 

        return date.ToString("dd dddd", CultureInfo.InvariantCulture); 

    } 

… 

} 

Also, we will document this scenario in UG which will be available in our upcoming release. You can download above sample using the below link. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Schedule-1747040431  

  

Kindly let us know, if you need further assistance. 

  

Regards 

Alagumeena.K