Capture date-header click to switch to day view

[Szabolcs]

Hi there. I’m using the Balzor ​Scheduler component and would like to handle user clicks on the ​date header in the Week (or TimelineWeek) view. Specifically, if the user clicks a date at the top (header cell), I want to programmatically switch the Scheduler to the Day view for that clicked date.

I tried using OnCellClick, but it doesn’t seem to fire for date headers. Could you please let me know if there’s an existing event or recommended approach for capturing date header clicks so that I can switch to the day view of the clicked date?

Thank you!

[Swathi Ravi]

Hi Szabolcs,

Thank you for reaching out!

By default, in our Scheduler’s Week view, clicking on a date will automatically navigate to the Day view. For the Timeline views, clicking on a date will navigate to the Agenda view. Kindly check the demos shared below:

• Basic Views Demo
• Timeline View Demo

Regards,

Swathi

 

[Szabolcs]

Hi Swathi,

Thank you, in my Scheduler component i had no Agenda view configured, which is why clicking on a date in TimelineWeek wasn’t triggering any view navigation. However, i want to programatically switch to  TimlineDay view for the date  that was clicked instead of the Agenda view.
Is there a built-in property or event that allows me to override this default navigation behavior?

[Ashokkumar Karuppasamy]

Hi Szabolcs

Based on the shared details, initially, when Navigating from the Timeline view to the Agenda view, any clicked event does not trigger in this scenario. However, if the Agenda service is used, clicking the date header will trigger the navigating event in the schedule component. You can achieve your requirement using this approach. The attached code snippet and sample demonstration solution are provided below. Please try this solution and let us know if you need any further assistance.

@page "/"

@using Syncfusion.Blazor.Schedule

 

<SfSchedule @ref="scheduleObj" TValue="AppointmentData" Height="550px" @bind-SelectedDate="CurrentDate">

    <ScheduleViews>

        <ScheduleView Option="View.TimelineDay" IsSelected="@isSelected" StartHour="08:00" EndHour="12:00" ShowWeekend="false" MaxEventsPerRow="10"></ScheduleView>

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

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

    </ScheduleViews>

    <ScheduleEvents TValue="AppointmentData" Navigating="OnNavigating"></ScheduleEvents>

    <ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>

</SfSchedule>

 

@code {

    SfSchedule<AppointmentData> scheduleObj;

    DateTime CurrentDate = new DateTime(2023, 2, 13);

    bool isSelected = false;

 

    List<AppointmentData> DataSource = new List<AppointmentData>

    {

        new AppointmentData { Id = 1, Subject = "Meeting", StartTime = new DateTime(2023, 2, 13, 14, 0, 0), EndTime = new DateTime(2023, 2, 13, 16, 0, 0) },

        new AppointmentData { Id = 2, Subject = "Conference", StartTime = new DateTime(2023, 2, 15, 13, 30, 0), EndTime = new DateTime(2023, 2, 15, 18, 0, 0) }

    };

 

    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 void OnNavigating(NavigatingEventArgs args)

    {

        if (args.PreviousView == View.TimelineWeek && args.Action == "view" && args.CurrentView == View.Agenda)

        {

            args.Cancel = isSelected = true;

        } else if(args.PreviousView == View.TimelineDay)

        {

            args.Cancel = true;

        }

    }

}

 

<style>

    .e-toolbar .e-toolbar-item.e-agenda {

        display: none !important

    }

</style>

Regards,
Ashok

[Szabolcs]

With this approach i managed to achieve my goal. Thank you very much!

[Swathi Ravi]

Dear Customer,

We are glad to hear that the provided solution worked for you. Please feel free to reach out if you need any further assistance.

Regards,
Swathi