Blazor 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 100 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Creating Blazor Calendar

  1. Use the TelerikCalendar tag to add the component to a razor page.

  2. Configure the minimum and maximum allowed dates by setting the Min and Max parameters.

  3. Handle the ValueChanged event.

  4. Set the value binding.

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">

<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 Date parameter indicates the view the user is in. You can use its DateChanged event to know when the user browses through the Calendar.

The Calendar navigation allows the user to navigate through several views that represent different periods of time, for example, a month or a year. You can control the calendar level (view) at which the user starts, to what detail (view) they can go, the min, max, and current date. To make the Calendar display a specific date programmatically, you can use the Date and View parameters that support two-way binding. Read more about the Calendar navigation...


The Calendar allows you to configure every aspect of the date selection. You can control whether the user can select only one or more dates. You can create a collection of disabled dates so that the user cannot select from them or define selectable ranges of days. Read more about the Calendar selection...


The Calendar provides different types of templates to customize the component's content and styling. These include month cell, year cell, decade cell, century cell and header templates.

Multiple Views

You can display a wider range of dates by rendering multiple instances of the Calendar so that the users can find the desired date easier. Read more about the multiple views in the Calendar...


The Calendar generates events that you can handle and further customize ist behavior. Read more about the Blazor Calendar events....

Calendar Reference and Methods

Add a reference to the component instance to use the Calendar methods.

Method Description
NavigateTo Navigates to a specified date and view. The method expects a DateTime and CalendarView arguments.
Refresh Re-renders the Calendar.
    <TelerikButton OnClick="@GoToPreviousMonth">Go To Previous Month</TelerikButton>
    <TelerikButton OnClick="@GoToNextMonth">Go To Next Month</TelerikButton>

<TelerikCalendar @ref="@Calendar"
                 @bind-Date="@CalendarDate" />

@code {
    TelerikCalendar Calendar { get; set; }
    DateTime CalendarValue { get; set; } = DateTime.Now;
    DateTime CalendarDate { get; set; } = DateTime.Now;

    void GoToPreviousMonth()
        Calendar.NavigateTo(CalendarDate.AddMonths(-1), CalendarView.Month);

    void GoToNextMonth()
        Calendar.NavigateTo(CalendarDate.AddMonths(1), CalendarView.Month);

Next Steps

See Also

In this article