How to implement a mini calendar view using SfScheduler component?

[Yongkee Cho]

I want a calendar view on my dashboard that displays schedules as dots and show details as tooltips. How can I implement this using the Scheduler component?


Default Scheduler looks too big on my dashboard.

[Saritha Sankar]

Hi Yongkee,

To achieve your requirement, you can set the current view to "Year" view — it will display events as dots along with proper event indication.

<SfSchedule TValue="AppointmentData" Width="500px" Height="550px">
    <ScheduleViews>
        <ScheduleView Option="View.Year"></ScheduleView>

Documentation Link: Views in Blazor Scheduler Component | Syncfusion

Refer the image for your reference.

Please let us know if you need any further assistance.

Regards,

Saritha S.

[Yongkee Cho]

Thank you for the reply, Saritha. Yes. Yearly view shows the months in a small size but it shows all the months in a year. I can show current month by doing this but I cannot browse by month but by year in year view.

<ScheduleView Option="View.Year" MonthsCount="1" FirstMonthOfYear="@DateTime.Today.Month"></ScheduleView>

[Saritha Sankar]

Hi Yongkee,

Currently, there is no built-in property available to display one month next to another in the Year view of the Schedule component. However, this functionality can be achieved by handling the Navigating event.

Refer to the sample and code snippet below for your reference.
 

 public void OnNavigating(NavigatingEventArgs args)

    {

        if (args.ActionType == ActionType.DateNavigate)

        {

            if(args.PreviousDate > args.CurrentDate){

                if (CurrentMonth == 1)

                {

                    CurrentMonth = 12;

                    SelectedDate = SelectedDate.AddYears(-1);

                }

                else

                {

                    CurrentMonth--;

                }

                StateHasChanged();

            }

            else{

                if (CurrentMonth == 12)

                {

                    CurrentMonth = 1;

                    SelectedDate = SelectedDate.AddYears(1);

                }

                else

                {

                    CurrentMonth++;

                }

                StateHasChanged();

            }

        }

    }

 

Sample Link: https://blazorplayground.syncfusion.com/VjroteVRVcqiZeeF

Please let us know if you need any further assistance.

Regards,

Saritha S.