Calendar
A date field component that allows users to select a date from a calendar view.
Basic
A simple calendar for date selection.
October 2026
Mo
Tu
We
Th
Fr
Sa
Su
<Calendar @bind-SelectedDate="selectedDate" />
@code {
private DateTime? selectedDate;
}With Preselected Date
Calendar with an initial date selected.
October 2026
Mo
Tu
We
Th
Fr
Sa
Su
<Calendar @bind-SelectedDate="selectedDate" />
@code {
private DateTime? selectedDate = DateTime.Today;
}Date Range Constraints
Limit selectable dates with min and max values.
October 2026
Mo
Tu
We
Th
Fr
Sa
Su
Only dates from today to 30 days ahead can be selected.
<Calendar @bind-SelectedDate="selectedDate"
MinDate="@DateTime.Today"
MaxDate="@DateTime.Today.AddDays(30)" />
@code {
private DateTime? selectedDate;
}First Day of Week
Configure which day the week starts on.
Monday (default)
October 2026
Mo
Tu
We
Th
Fr
Sa
Su
Sunday
October 2026
Su
Mo
Tu
We
Th
Fr
Sa
@* Start week on Monday (European style) *@
<Calendar FirstDayOfWeek="DayOfWeek.Monday" />
@* Start week on Sunday (US style) *@
<Calendar FirstDayOfWeek="DayOfWeek.Sunday" />