Calendar Overview

The Calendar component allows the user to scroll through a calendar and select one or more dates. You can control to what level the user can zoom the calendar (for example, up to months or years), what are the minimum and maximum date the user can navigate to, and whether they can select one or more dates.

To use a Telerik Calendar for Blazor, add the TelerikCalendar tag.

Basic calendar with its key features, and ValueChanged event handling

@using Telerik.Blazor.Components.Calendar
@using Telerik.Blazor

<TelerikCalendar Min="@min" Max="@max" ValueChanged="@MyValueChangeHandler" Date="@DateTime.Now">
</TelerikCalendar>

<br />
The selected date is: @selectedDate

@code {

    private DateTime min = new DateTime(2015, 1, 1);
    private DateTime max = new DateTime(2025, 12, 31);
    private string selectedDate = "";

    private void MyValueChangeHandler(DateTime newValue)
    {
        selectedDate = newValue.ToString("dd MMM yyyy");
        StateHasChanged();
    }
}

The result from the code snippet above

Component namespace and reference

@using Telerik.Blazor.Components.Calendar

<TelerikCalendar @ref="myCalendarReference">
</TelerikCalendar>

@code {
    Telerik.Blazor.Components.Calendar.TelerikCalendar myCalendarReference;
}

The calendar provides a number of features that allow you to control the user experience:

  • Navigation - the calendar level (view) at which the user starts, to what detail (view) they can go, the min, max and current date.
  • Selection - whether the user can select only one ore more dates, and also a collection of dates they cannot select.

You can also render several instances of the current view next to each other so that the user needs to browse less. To do that, set the Views property to the desired count of views.

Render 3 months at a time

@using Telerik.Blazor.Components.Calendar
@using Telerik.Blazor

<TelerikCalendar Views="3" View="CalendarView.Month">
</TelerikCalendar>

See Also

In this article
Not finding the help you need? Improve this article