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.
Creating Blazor Calendar
Use the
TelerikCalendartag to add the component to a razor page.Configure the minimum and maximum allowed dates by setting the
MinandMaxparameters.Handle the
ValueChangedevent.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");
}
}
Navigation
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...
Templates
The Blazor 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 Blazor Calendar generates events that you can handle and further customize ist behavior. Read more about the Blazor Calendar events....
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 |
|---|---|---|
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);
}
}