We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Show month on agenda view


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.

1 Reply 1 reply marked as answer

VR Vijay Ravi Syncfusion Team January 5, 2023 11:35 AM UTC

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*@



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




            <ScheduleView Option="View.Agenda">

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



                    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>







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



    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]


Vijay Ravi

Attachment: eventtemplate_f7b812dc.zip

Marked as answer
Live Chat Icon For mobile
Up arrow icon