Calendar
A date field component that allows users to select a date from a calendar view.
Basic
A simple calendar for date selection.
March 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.
March 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.
March 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)
March 2026
Mo
Tu
We
Th
Fr
Sa
Su
Sunday
March 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" />