Calendar
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
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| SelectedDate | DateOnly? | — | The currently selected date. |
| MinDate | DateOnly? | — | The minimum selectable date. |
| MaxDate | DateOnly? | — | The maximum selectable date. |
| InitialMonth | DateOnly? | — | The month displayed when the calendar first renders. |
| IsDateDisabled | Func<DateOnly, bool>? | — | A function that returns true for dates that should be disabled. |
| CaptionLayout | CalendarCaptionLayout | Buttons | Controls month/year navigation style. Options: Buttons, Dropdown. |
| Class | string? | — | Additional CSS classes appended to the root element. |