Calendar Component
A date field component that allows users to enter and edit date. Supports single date selection with full keyboard navigation.
Default
A basic calendar for date selection.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Selected: None
Dropdown Mode
Use dropdown selects for quick month and year navigation.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Selected: None
With Date Constraints
Limit selection to a specific date range.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Selected: None
Range: Today to 3 months from now
Disable Weekends
Use a custom function to disable specific dates.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Selected: None
Weekends are disabled
With Initial Month
Start with a specific month displayed.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Selected: None
Starts at December 2025
Side by Side
Multiple calendars for comparison or date range selection.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
From: None ΓÇö To: None
Features
- Single date selection with @bind-SelectedDate
- MinDate and MaxDate constraints
- Custom date disabling via IsDateDisabled function
- Month navigation with previous/next buttons
- Dropdown mode for quick month/year selection
- Culture-aware formatting and first day of week
- ARIA grid roles for accessibility
- Full keyboard navigation support
Keyboard Navigation
Installation
@using BlazorUI.Components.CalendarUsage
<Calendar @bind-SelectedDate="selectedDate"
MinDate="DateOnly.FromDateTime(DateTime.Today)"
MaxDate="DateOnly.FromDateTime(DateTime.Today.AddMonths(3))" />
@code {
private DateOnly? selectedDate;
}