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.

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

Creating Blazor Calendar

Use the TelerikCalendar tag to add the component to a razor page.
Configure the minimum and maximum allowed dates by setting the Min and Max parameters.
Handle the ValueChanged event.
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">
</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 Blazor 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...

Selection

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

Attribute	Type and Default Value	Description
`AllowReverse`	`bool`	When range selection is enabled, defines if the range is valid when the selected end date is a date before the start date.
`BottomView`	`CalendarView` enum (`Month`)	The most detailed view of the Calendar to which the user can navigate to.
`Date`	`DateTime`	The date that indicates the view the user is currently in. Supports two-way binding.
`DisabledDates`	`List<DateTime>`	A list of dates that cannot be selected as the start or end of the range. See the Live Demo: Calendar - Disabled Dates.
`Max`	`DateTime`	The latest date that the user can select.
`Min`	`DateTime`	The earliest date that the user can select.
`Orientation`	`CalendarOrientation` enum (`Horizontal`)	The orientation of the Calendar. The available options are `Horizontal` and `Vertical`. Applicable when using more than one view.
`RangeStart`	`DateTime`	The selected start date when range selection is enabled. Supports two-way binding.
`RangeEnd`	`DateTime`	The selected end date when range selection is enabled. Supports two-way binding.
`SelectedDates`	`List<DateTime>`	The selected dates when multiple selection is used.
`SelectionMode`	`CalendarSelectionMode` enum (`Single`)	The selection mode of the calendar.
`ShowWeekNumbers`	`bool`	Sets if the Calendar will display week numbers according to the ISO-8601 format. Note that the ISO week number may differ from the conventional .NET week number.
`ShowOtherMonthDays`	`bool` (`true`)	Defines whether the leading and trailing days from other months are visible in the current month view.
`TopView`	`CalendarView` enum (`Century`)	The most aggregated view of the Calendar to which the user can navigate.
`Value`	`DateTime` or `DateTime?`	The current value of the component when single selection is used. Supports two-way binding.
`View`	`CalendarView` enum (`Month`)	The current view that will be displayed in the Calendar. Supports two-way binding.
`Views`	`int` (`1`)	The number of views that will be rendered to each other.

Styling and Appearance

The following parameters enable you to customize the appearance of the Blazor Calendar:

Attribute	Type and Default Value	Description
`Class`	`string`	The CSS class that will be rendered on the main wrapping element of the Calendar (`<div class="k-calendar>`).

Calendar Reference and Methods

Add a reference to the component instance to use the Blazor 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.

<p>
    <TelerikButton OnClick="@GoToPreviousMonth">Go To Previous Month</TelerikButton>
    <TelerikButton OnClick="@GoToNextMonth">Go To Next Month</TelerikButton>
</p>

<TelerikCalendar @ref="@Calendar"
                 @bind-Value="@CalendarValue"
                 @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);
    }
}

Blazor Calendar Overview

Creating Blazor Calendar

Navigation

Selection

Templates

Multiple Views

Events

Calendar Parameters

Styling and Appearance

Calendar Reference and Methods

Next Steps

See Also