Show month on agenda view

[Francisco]

Hi,

How can I show the appointment month on the agenda view?

For example the 2 events below are in different months, but the agenda view does not specify the month for each of them.

[Vijay Ravi]

Hi Francisco

You can use the EventTemplate or DateHeaderTemplate of the Schedule to display the appointment month details as shown in the below code snippet.

[index. razor]

@using Syncfusion.Blazor.Schedule

@using Syncfusion.Blazor.Buttons

@using BlazorDemos.Pages.Schedule.Scheduler

@using System.Globalization

 

<SfSchedule TValue="ScheduleData.WebinarData" Width="100%" Height="650px" @bind-SelectedDate="@CurrentDate"AgendaDaysCount="@DaysCount">

    @*to show the appointment month in the Date by using DateHeader Template*@

    <ScheduleTemplates>

        <DateHeaderTemplate>

            <div class="date-text">@((context as TemplateContext).Date.ToString("dd ddd", CultureInfo.InvariantCulture))</div>

           <div class="month-text">@((context as TemplateContext).Date.ToString("MMM", CultureInfo.InvariantCulture))</div>

        </DateHeaderTemplate>

    </ScheduleTemplates>

        <ScheduleViews>

            <ScheduleView Option="View.Agenda">

@*to show the appointment month in the events by using Event Template*@

                <EventTemplate>

                    @{

                    ScheduleData.WebinarData webinarData = (context as ScheduleData.WebinarData);

                    <div class='template-wrap'>

                        <div class="subject">@(webinarData.Subject)</div>

                        <div class="month">@webinarData.StartTime.ToString("MMMM")</div>

                        <div class="time">Time: @(webinarData.StartTime.ToString("HH:mm", CultureInfo.InvariantCulture)) - @((webinarData.EndTime).ToString("HH:mm", CultureInfo.InvariantCulture))</div>

                    </div>

                    }              

                </EventTemplate>

            </ScheduleView>

        </ScheduleViews>

 

        <ScheduleEventSettings TValue="ScheduleData.WebinarData" DataSource="@dataSource"></ScheduleEventSettings>

    </SfSchedule>

@code{

    private DateTime CurrentDate { get; set; } = new DateTime(DateTime.Today.Year, 1, 10);

    private List<ScheduleData.WebinarData> dataSource = new ScheduleData().GetWebinarData();

    private int DaysCount { get; set; } = 50;

 

}

[Output screenshot]

Regards,

Vijay Ravi

Attachment: eventtemplate_f7b812dc.zip