Calendar Overview

The Blazor Calendar component allows the user to scroll through a Gregorian 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.

Telerik UI for Blazor Ninja image

The Calendar component is part of Telerik UI for Blazor, a professional grade UI library with 90 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

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

Basic calendar with its key features, and ValueChanged event handling

@* Main Calendar features, ValueChanged event handling. *@
<br />

<TelerikCalendar Min="@min" Max="@max" ValueChanged="@MyValueChangeHandler" @bind-Date="@theDate">
</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 DateTime theDate { get; set; } = DateTime.Now;
    private string selectedDate = "";

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

The result from the code snippet above

The Date parameter indicates the view the user is in. You can use its DateChanged event to know when the user browses through the calendar.

Component namespace and reference

@using Telerik.Blazor.Components

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

@code {
    Telerik.Blazor.Components.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 or more dates, a collection of disabled dates so that the user cannot select from them and also a range selection of days.
  • Multiple Views - you can show the user a wider range of dates.

See Also

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