Events in Blazor Calendar

27 Aug 20263 minutes to read

This section lists the events of the Blazor Calendar component and describes when they are triggered during user interaction and rendering.

NOTE

Starting with v17.2.*, only a limited set of events are available for the Blazor Calendar component. Event names differ from previous releases, and several events were removed. The following table summarizes event name changes from v17.1.* to v17.2.*.

Event Name(v17.1.*)	Event Name(v17.2.*)
change	ValueChange
renderDayCell	OnRenderDayCell

OnRenderDayCell

The OnRenderDayCell event is triggered as each day cell is rendered, enabling customization of cell content and state.

@using Syncfusion.Blazor.Calendars

<SfCalendar TValue="DateTime">
    <CalendarEvents TValue="DateTime?" OnRenderDayCell="onRenderDayCellHandler"></CalendarEvents>
</SfCalendar>

@code{

    public void onRenderDayCellHandler(RenderDayCellEventArgs args)
    {
        // Here, you can customize your code.
    }
}

ValueChange

The ValueChange event is triggered after the selected date value changes in the Blazor Calendar.

@using Syncfusion.Blazor.Calendars

<SfCalendar TValue="DateTime">
    <CalendarEvents TValue="DateTime?" ValueChange="ValuechangeHandler"></CalendarEvents>
</SfCalendar>

@code{

    public void ValuechangeHandler(ChangedEventArgs<DateTime?> args)
    {
        // Here, you can customize your code.
    }
}

Created

The Created event is triggered after the Blazor Calendar is initialized and rendered.

@using Syncfusion.Blazor.Calendars

<SfCalendar TValue="DateTime">
    <CalendarEvents TValue="DateTime?" Created="createdHandler"></CalendarEvents>
</SfCalendar>

@code{

    public void createdHandler(object args)
    {
        // Here, you can customize your code.
    }
}

Destroyed

The Destroyed event is triggered when the Blazor Calendar is disposed.

@using Syncfusion.Blazor.Calendars

<SfCalendar TValue="DateTime">
    <CalendarEvents TValue="DateTime?" Destroyed="DestroyHandler"></CalendarEvents>
</SfCalendar>

@code{

    public void DestroyHandler(object args)
    {
        // Here, you can customize your code.
    }
}

Navigated

The Navigated event is triggered after navigating to another view level or within the same level (for example, changing month, year, or decade).

@using Syncfusion.Blazor.Calendars

<SfCalendar TValue="DateTime">
    <CalendarEvents TValue="DateTime?" Navigated="NavigatedHandler"></CalendarEvents>
</SfCalendar>

@code{

    public void NavigatedHandler(NavigatedEventArgs args)
    {
        // Here, you can customize your code.
    }
}

Selected

The Selected event is triggered after one or more date values are selected in the Blazor Calendar. Use the args.Value to read the selected date.

@using Syncfusion.Blazor.Calendars

<SfCalendar TValue="DateTime?">
    <CalendarEvents TValue="DateTime?" Selected="SelectedHandler"></CalendarEvents>
</SfCalendar>

@code{

    public void SelectedHandler(SelectedEventArgs<DateTime?> args)
    {
        // Here, you can customize your code.
    }
}

DeSelected

The DeSelected event is triggered when a value is deselected in the Blazor Calendar. This event fires only when IsMultiSelection is enabled.

@using Syncfusion.Blazor.Calendars

<SfCalendar TValue="DateTime?" IsMultiSelection="true">
    <CalendarEvents TValue="DateTime?" DeSelected="DeSelectedHandler"></CalendarEvents>
</SfCalendar>

@code{

    public void DeSelectedHandler(DeSelectedEventArgs<DateTime?> args)
    {
        // Here, you can customize your code.
    }
}

NOTE

The Blazor Calendar is currently limited to these events. Additional events may be introduced in future versions based on user feedback. If a required event is missing, submit a request on the Syncfusion feedback portal: Request a feature.