Package
LumeoA11yfocus-managedkeyboardcolumnheadergridDepends ontooltipTested
Tier 3 · 57 testsView source ↗Calendar
A date picker calendar component for selecting dates.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <Calendar />
Tested
Tier 3 · A11y + behavior
all components → Render Behavior A11y Keyboard Scale E2E
57 tests across 8 files. Auto-generated from the test suite.
When to Use
- Displaying a visual calendar for date selection and browsing
- Event scheduling interfaces where users pick start and end dates
- Date range visualization such as booking check-in and check-out
Su
Mo
Tu
We
Th
Fr
Sa
Su
Mo
Tu
We
Th
Fr
Sa
Su
Mo
Tu
We
Th
Fr
Sa
Su
Mo
Tu
We
Th
Fr
Sa
Selectable range: Aug 12 — Sep 18, 2026
Su
Mo
Tu
We
Th
Fr
Sa
Hover any day for the tooltip; the badge dot indicates booking status — green = available, amber = partial, red = sold out, grey = closed.
Su
Mo
Tu
We
Th
Fr
Sa
Selected 0 day(s).
Su
Mo
Tu
We
Th
Fr
Sa
Su
Mo
Tu
We
Th
Fr
Sa
#
Su
Mo
Tu
We
Th
Fr
Sa
30
31
32
33
34
35
2020 - 2029
Su
Mo
Tu
We
Th
Fr
Sa
Pick a start date
Mobile (rc.52). Swipe left or right on the day grid to navigate between months — vertical page scroll is preserved. Nav chevrons are 44×44 px on mobile (
h-11 w-11 sm:h-7 sm:w-7). Set SwipeEnabled="false" to opt out.
API Reference
Calendar
| Prop | Type | Default | Description |
|---|---|---|---|
| Value | DateOnly? | — | The selected day in single-selection mode. Ignored when IsRange or IsMultiple is set. Pair with ValueChanged for two-way binding. |
| MinDate | DateOnly? | — | Earliest selectable day. Days before it render disabled and the "previous month" navigation stops at the containing month. |
| MaxDate | DateOnly? | — | Latest selectable day. Days after it render disabled and the "next month" navigation stops at the containing month. |
| IsRange | bool | false | When true, the grid selects a start/end range instead of a single day. Takes precedence over Value selection. |
| RangeStart | DateOnly? | — | The range's start day in range-selection mode. Pair with RangeStartChanged for two-way binding. |
| RangeEnd | DateOnly? | — | The range's end day in range-selection mode. Pair with RangeEndChanged for two-way binding. |
| IsMultiple | bool | false | When true the grid selects a set of independent days: clicking a day (or Enter/Space on it) toggles it in/out of Values. Takes precedence over single Value selection; ignored when IsRange is set. |
| Values | List<DateOnly>? | — | The selected days in multiple-selection mode. Pair with ValuesChanged for two-way binding. |
| NumberOfMonths | int | 1 | Number of month panels rendered side by side. Defaults to 1. |
| ShowWeekNumbers | bool | false | When true, adds a leading column showing each row's ISO week number. Default is false. |
| ShowYearPicker | bool | false | Convenience shortcut that opens the calendar straight into the year-picker view, overriding InitialView. Default is false. |
| InitialView | CalendarView | CalendarView.Days | The view (days/months/years) the calendar first renders. Defaults to Days; overridden by ShowYearPicker. |
| IsDateDisabled | Func<DateTime, bool>? | — | Predicate that marks individual dates as non-selectable, in addition to the MinDate/MaxDate bounds. |
| DateClass | Func<DateTime, string>? | — | Returns extra CSS classes to append to a specific day's button, e.g. to highlight holidays or booked dates. |
| DateTooltip | Func<DateTime, string?>? | — | Optional per-date tooltip text. Returned string is shown via the styled Lumeo <Tooltip> on hover/focus (not the native browser title attribute). Return null or empty for no tooltip on that date. Useful for booking calendars: "Booked by John, 14:00–17:00" or "Sold out". |
| DateBadge | Func<DateTime, RenderFragment?>? | — | Optional per-date indicator slot. Returns a RenderFragment rendered absolutely positioned in the bottom-right of the day cell — good for status dots, count badges, icons. Return null for no badge on that date. The slot is non-interactive (pointer-events-none) so clicks still hit the day button. |
| FirstDayOfWeek | DayOfWeek? | — | The day of the week to render in the leftmost column. When null (default), uses CultureInfo.CurrentCulture.DateTimeFormat.FirstDayOfWeek — so de-DE / fr-FR / etc. start on Monday automatically, en-US on Sunday. Pass an explicit DayOfWeek to override. |
| SwipeEnabled | bool | true | When true (default), users can swipe left/right on the day grid to navigate to the next or previous month on touch devices. Vertical page scroll is unaffected (touch-action: pan-y). Set to false to disable swipe navigation. |
| Class | string? | — | Additional CSS classes merged onto the root element. |
| AdditionalAttributes | Dictionary<string, object>? | — | Unmatched attributes are splatted onto the root element. |
Events
| ValueChanged | EventCallback<DateOnly?> | Raised after a day is selected in single-selection mode. |
| RangeStartChanged | EventCallback<DateOnly?> | Raised when the range's start day changes. |
| RangeEndChanged | EventCallback<DateOnly?> | Raised when the range's end day changes. |
| ValuesChanged | EventCallback<List<DateOnly>?> | Raised when the selected set changes in multiple-selection mode (IsMultiple). |
DateTooltip and DateBadge shipped in rc.20.
Related Components
- DatePicker — For selecting dates via an input field with a calendar dropdown