Events

This article explains the events available in the Telerik Calendar for Blazor:

• ValueChanged
• DateChanged
• ViewChanged
• RangeStartChanged and RangeEndChanged
• CellRender

ValueChanged

The ValueChanged event fires when the user selects a date. To see how to handle it and to obtain the user selection, review the Selection article.

DateChanged

The DateChanged event fires when the currently shown date changes. For example, when the user navigates from one month to the next through the arrows.

When handling the DateChanged event, you cannot use two-way binding for the Date parameter. You should update it yourself in the model. If you do not, the currently shown range may revert to the original value set in the markup or to the default value.

@result
<br />
<TelerikCalendar Min="@min" Max="@max" Date="@initialDate" DateChanged="@DateChangedHandler">
</TelerikCalendar>

@code {
    DateTime initialDate { get; set; } = DateTime.Now;
    DateTime min = new DateTime(2015, 1, 1);
    DateTime max = new DateTime(2025, 12, 31);
    string result { get; set; }

    void DateChangedHandler(DateTime firstDateOfNewRange)
    {
        result = $"the user now sees a range that includes {firstDateOfNewRange}";
        initialDate = firstDateOfNewRange; // if you don't do this, navigating adjacent ranges will be effectively disabled
    }
}

You are not required to provide an initial value to the Date parameter. It will default to DateTime.Now.

ViewChanged

The ViewChanged event fires when the user changes the view they are seeing (for example, goes up from the days in the month to the months in the year).

When handling the ViewChanged event, you cannot use two-way binding for the View parameter. You should update it yourself in the model. If you do not, the currently shown view may revert to the original value set in the markup or to the default value.

@result
<br />
<TelerikCalendar Min="@min" Max="@max" View="@initialView" ViewChanged="@ViewChangedHandler">
</TelerikCalendar>

@code {
    CalendarView initialView { get; set; } = CalendarView.Year;
    DateTime min = new DateTime(2015, 1, 1);
    DateTime max = new DateTime(2025, 12, 31);
    string result { get; set; }

    void ViewChangedHandler(CalendarView currView)
    {
        result = $"the user now sees the {currView} view";
        initialView = currView; // if you don't do this, navigating views will be effectively disabled
    }
}

You are not required to provide an initial value to the View parameter. It will default to CalendarView.Month.

RangeStartChanged and RangeEndChanged

The two RangeChanged events (RangeStartChanged and RangeEndChanged) fire when the user selects a new range.

When the user selects a range from the calendar, the first click always fires the start change with the selected date, and then clears the end of the range, so the end change event fires as well, with the default value for DateTime - this indicates that the end of the range is undefined. If the second click is on a date before the range start - it will become the new start.

Example of Range Selection with RangeStartChanged and RangeEndChanged events

@* Observe the behavior of the RangeStartChanged and RangeEndChanged events and adding the selected dates to a List *@

<TelerikCalendar Views="2"
                 Date="@Date"
                 SelectionMode="@CalendarSelectionMode.Range"
                 RangeStart="@RangeStart"
                 RangeEnd="@RangeEnd"
                 RangeStartChanged="@StartChangeHandler"
                 RangeEndChanged="@EndChangeHandler">
</TelerikCalendar>


@if (SelectedDates.Any())
{
    <div class="mt-3">
        <h5 class="text-info">Selected dates:</h5>
        @foreach (var day in SelectedDates)
        {
            <p class="text-muted">@day</p>
        }
    </div>
}

@code {
    DateTime Date { get; set; } = DateTime.Now.AddDays(-5);
    DateTime RangeStart { get; set; } = DateTime.Now;
    DateTime RangeEnd { get; set; } = DateTime.Now.AddDays(6);
    List<DateTime> SelectedDates { get; set; } = new List<DateTime>();

    void StartChangeHandler(DateTime startDate)
    {
        // you have to update the model manually because handling the <Parameter>Changed event does not let you use @bind-<Parameter>
        // not updating the model will effectively cancel the event
        RangeStart = startDate;

        Console.WriteLine($"The user started making a new selection from {startDate}");

        RenderDateRange();
    }

    void EndChangeHandler(DateTime endDate)
    {
        // you have to update the model manually because handling the <Parameter>Changed event does not let you use @bind-<Parameter>
        // not updating the model will effectively cancel the event
        RangeEnd = endDate;


        // sample check to execute logic only after the user has selected both ends of the range
        // if this does not pass, the user has only clicked once in the calendar popup
        if (endDate != default(DateTime))
        {
            Console.WriteLine($"The user finished making a new selection from {RangeStart} to {endDate}");
        }

        RenderDateRange();
    }

    void RenderDateRange()
    {
        var datesInBetween = Enumerable.Range(0, 1 + RangeEnd.Subtract(RangeStart).Days)
                                           .Select(offset => RangeStart.AddDays(offset))
                                           .ToList();

        SelectedDates = datesInBetween;
    }
}

CellRender

The CellRender event fires when each cell in each view is about to render. It allows you to see which view it is in, what its date, and you can set the Class for the <td> element based on your business logic.

The event arguments are of type CalendarCellRenderEventArgs and provide the following fields:

• Date - DateTime - the date of the cell
• View - CalendarView - the currently visible view. You can use it to determine if the calendar is rendering the MonthView, YearView, and so on.
• Class - string - lets you set a custom CSS class to the cell DOM element.

You can also customize the cells through their templates. You can use the event together with the templates.

Use the CellRender event to style cells based on conditions

Move between the calendar views to see the different behaviors in the Month and Decade views.

<TelerikCalendar OnCellRender="@OnCellRender">
</TelerikCalendar>

@code {
    private void OnCellRender(CalendarCellRenderEventArgs args)
    {
        if (args.View == CalendarView.Month)
        {
            args.Class = args.Date.Day % 3 == 0 ? "special" : "";
        }
        else if (args.View == CalendarView.Decade)
        {
            args.Class = args.Date.Year == 2020 ? "special" : "";
        }
    }
}

<style>
    .special {
        color: red;
        font-weight: bold;
    }
    td.special:hover .k-link {
        background-color: purple;
        color: yellow;
    }
    /* You can inspect the built-in rendering with the browser dev tools 
    to see how to apply heavier selectors and to also use classes the 
    calendar provides such as focus and selection states */
</style>

The result from the code snippet above

See Also

• Selection
• Navigation