Weekly dividers in Agenda.

[Stefan]

Hi,

Is it possible to have weekly dividers in the Agenda as shown in the attached picture?

Regards,

Stefan

[Ravikumar Venkatesan]

Hi Stefan, 

Greetings from Syncfusion support. 

We have validated your requirement at our end. It is not feasible to achieve the exact requirement that shown in your shared screenshot with current architecture of scheduler. But, we can achieve it as shown in the below image with the help of the dateHeaderTemplate of the Schedule and for the same, we have prepared a sample for your reference which can be downloaded from the below link. 

Sample: https://www.syncfusion.com/downloads/support/forum/161938/ze/syncfusion-blazor-schedule-agenda-view-with-week-numbers1128413594 

[Index.razor] 

@page "/" 

 

@using Syncfusion.Blazor.Schedule 

@using System.Globalization 

 

    <SfSchedule TValue="AppointmentData" Height="550px" SelectedDate="new DateTime(2020, 1, 28)"> 

        <ScheduleViews> 

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

        </ScheduleViews> 

        <ScheduleEventSettings DataSource="@DataSource"> 

        </ScheduleEventSettings> 

        <ScheduleTemplates> 

            <DateHeaderTemplate> 

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

                <div class="week-text">@("Week " + myCal.GetWeekOfYear((context as TemplateContext).Date, myCWR, myFirstDOW))</div> 

            </DateHeaderTemplate> 

        </ScheduleTemplates> 

   </SfSchedule> 

 

@code{ 

    Calendar myCal = new CultureInfo("en-US").Calendar; 

 

    CalendarWeekRule myCWR = new CultureInfo("en-US").DateTimeFormat.CalendarWeekRule; 

    DayOfWeek myFirstDOW = new CultureInfo("en-US").DateTimeFormat.FirstDayOfWeek; 

 

    public static string getDateHeaderText(DateTime date) 

    { 

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

    } 

 

} 

<style> 

    .week-text { 

        background: #ff0076 !important; 

        color: white; 

        text-align: center; 

    } 

 

    .date-text { 

        padding: 14px 20px 0 14px; 

    } 

    .e-schedule .e-agenda-view .e-day-date-header{ 

        padding: unset !important; 

    } 

</style> 

Output: 

 

Kindly try the above sample and let us know whether this meets your requirement. 

Regards, 

Ravikumar Venkatesan