TimeLine View and ScheduleHeaderRow type Date with template

[Michael Salzlechner]

We have a scheduler in timeline view and would like to use a custom ScheduleHeaderRow for HeaderRowType.Date with a template

all other types work (week, month, year) but the date header does not use our te

[Vijay Ravi]

Hi Michael Salzlechner,

Greetings from Syncfusion Support.
 

We have reviewed your request to customize the date using headerRows with template, we recommend using the scheduler's dateheader template to customize the date header text as demonstrated in the below shared code snippets. Please refer to the provided code snippets and the shared sample for your reference.

[index.razor]

 

@using Syncfusion.Blazor.Schedule

@using System.Globalization

<p>Timeline header rows</p>

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

    <ScheduleHeaderRows>

        <ScheduleHeaderRow Option="HeaderRowType.Year">

            <Template>

                <div class="date-text">Year: @(getYearText((context as TemplateContext).Date))</div>

            </Template>

        </ScheduleHeaderRow>

        <ScheduleHeaderRow Option="HeaderRowType.Month">

            <Template>

                <div class="date-text">Month: @(getMonthText((context as TemplateContext).Date))</div>

            </Template>

        </ScheduleHeaderRow>

        <ScheduleHeaderRow Option="HeaderRowType.Week">

            <Template>

                <div class="date-text">Week: @(getWeekText((context as TemplateContext).Date))</div>

            </Template>

        </ScheduleHeaderRow>

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

    </ScheduleHeaderRows>

    <ScheduleViews>

        <ScheduleView Option="View.TimelineWeek" MaxEventsPerRow="10"></ScheduleView>

    </ScheduleViews>

    <ScheduleTemplates>

        <DateHeaderTemplate>

            <div class="date-text">@(getDateHeaderText((context as TemplateContext).Date))</div>

            @{

                @switch ((int)(context as TemplateContext).Date.DayOfWeek)

                {

                    case 0:

                        <div class="weather-text">25&deg;C</div>

                        break;

                    case 1:

                        <div class="weather-text">18&deg;C</div>

                        break;

                    case 2:

                        <div class="weather-text">10&deg;C</div>

                        break;

                    case 3:

                        <div class="weather-text">16&deg;C</div>

                        break;

                    case 4:

                        <div class="weather-text">8&deg;C</div>

                        break;

                    case 5:

                        <div class="weather-text">27&deg;C</div>

                        break;

                    case 6:

                        <div class="weather-text">17&deg;C</div>

                        break;

                }

            }

        </DateHeaderTemplate>

    </ScheduleTemplates>

</SfSchedule>

@code{

    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; }

    }

    public static string getDateHeaderText(DateTime date)

    {

        return date.ToString("dd ddd", CultureInfo.CurrentCulture);

    }

    public static string getYearText(DateTime date)

    {

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

    }

    public static string getMonthText(DateTime date)

    {

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

    }

    public static string getWeekText(DateTime date)

    {

        return CultureInfo.InvariantCulture.Calendar.GetWeekOfYear(date, CalendarWeekRule.FirstFourDayWeek, DayOfWeek.Monday).ToString();

    }

}

<style>

    .schedule-date-header-template.e-schedule .e-vertical-view .e-header-cells {

        padding: 0;

        text-align: center !important;

    }

    .schedule-date-header-template.e-schedule .date-text {

        font-size: 14px;

    }

    .schedule-date-header-template.e-schedule.e-device .date-text {

        font-size: 12px;

    }

    .schedule-date-header-template.e-schedule .weather-image {

        width: 20px;

        height: 20px;

        background-position: center center;

        background-repeat: no-repeat;

        background-size: cover;

    }

    .schedule-date-header-template.e-schedule .weather-text {

        font-size: 11px;

    }

</style>

Sample link: https://blazorplayground.syncfusion.com/rthoWXCDrydJzvyJ

DateHeader customization UG: https://blazor.syncfusion.com/documentation/scheduler/header-bar#date-header-customization

Don't hesitate to get in touch if you require further help or more information.
 

Regards,

Vijay