Components / Calendar
Calendar
A month-grid date picker: caption with month/year, prev/next navigation, and a 7-column grid of selectable day cells. A dependency-free C# port of react-day-picker (no JS): pure month math, roving-tabindex keyboard nav, and single, range, and multiple selection modes. Every preview below is the real component running in WebAssembly.
Examples
The default single mode binds a DateOnly? through @bind-Selected. Click the active day again to clear it; arrow keys, Home/End, and PageUp/PageDown move the roving focus.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Selected: Friday, June 12, 2026
<ZitsCalendar @bind-Selected="_date" />
@code { private DateOnly? _date = new(2026, 6, 12); }Range
Set Mode="range" to bind a (DateOnly? Start, DateOnly? End) tuple. After picking a start, hovering previews the tentative range; the second click commits it. NumberOfMonths="2" renders two months side by side.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Jun 9, 2026 to Jun 16, 2026
<ZitsCalendar Mode="range" NumberOfMonths="2" @bind-SelectedRange="_range" />
@code {
private (DateOnly? Start, DateOnly? End) _range = (new(2026, 6, 9), new(2026, 6, 16));
}Multiple
Mode="multiple" binds an IReadOnlyList<DateOnly> through @bind-SelectedDates. Each click toggles a day in or out of the (sorted) set.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
3 selected: Jun 4, Jun 11, Jun 18
<ZitsCalendar Mode="multiple" @bind-SelectedDates="_dates" />
@code {
private IReadOnlyList<DateOnly> _dates = new List<DateOnly>
{
new(2026, 6, 4), new(2026, 6, 11), new(2026, 6, 18),
};
}Constraints & week start
Bound days come from MinDate / MaxDate, while DisabledMatcher blocks arbitrary days (here, weekends). Disabled cells carry data-disabled and are skipped on click. FirstDayOfWeek reorders the header and grid (Monday-first below).
| Mo | Tu | We | Th | Fr | Sa | Su |
|---|---|---|---|---|---|---|
Weekdays only, Jun 1 – Jun 30, 2026. Week starts Monday. Selected: Wednesday, June 10
<ZitsCalendar @bind-Selected="_date"
FirstDayOfWeek="DayOfWeek.Monday"
MinDate="_min" MaxDate="_max"
DisabledMatcher="IsWeekend" />
@code {
DateOnly _min = new(2026, 6, 1), _max = new(2026, 6, 30);
DateOnly? _date = new(2026, 6, 10);
static bool IsWeekend(DateOnly d)
=> d.DayOfWeek is DayOfWeek.Saturday or DayOfWeek.Sunday;
}Installation
navius add calendarAPI reference
| Prop | Type | Default |
|---|---|---|
| Mode | string | "single" |
| Selected | DateOnly? | - |
| SelectedChanged | EventCallback<DateOnly?> | - |
| DefaultSelected | DateOnly? | - |
| SelectedRange | (DateOnly? Start, DateOnly? End) | - |
| SelectedRangeChanged | EventCallback<(DateOnly?, DateOnly?)> | - |
| DefaultSelectedRange | (DateOnly? Start, DateOnly? End) | - |
| SelectedDates | IReadOnlyList<DateOnly> | - |
| SelectedDatesChanged | EventCallback<IReadOnlyList<DateOnly>> | - |
| DefaultSelectedDates | IReadOnlyList<DateOnly> | - |
| DefaultMonth | DateOnly? | today |
| DisabledMatcher | Func<DateOnly, bool>? | - |
| MinDate | DateOnly? | - |
| MaxDate | DateOnly? | - |
| FirstDayOfWeek | DayOfWeek | Sunday |
| NumberOfMonths | int | 1 |
| ShowOutsideDays | bool | true |