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 110+ 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">
</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 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...

Templates

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

Events

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

Week Numbers

The Calendar component can display the ISO week number on each row of date cells. See the ShowWeekNumbers parameter below.

Calendar Parameters

The Blazor Calendar provides various parameters that allow you to configure the component. Also check the Calendar's public API.

Attribute Type and Default Value Description
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.
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.
TopView CalendarView enum
(Century)
The most aggregated view of the Calendar to which the user can navigate.
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.

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 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);
    }
}

Next Steps

See Also

In this article