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 />
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: May 28 — Jul 4, 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
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? | null | The currently selected date. Use with @bind-Value for two-way binding. |
| ValueChanged | EventCallback<DateOnly?> | — | Callback invoked when the selected date changes. |
| MinDate | DateOnly? | null | The earliest selectable date. Dates before this are disabled. |
| MaxDate | DateOnly? | null | The latest selectable date. Dates after this are disabled. |
| IsRange | bool | false | Enables date range selection mode. |
| RangeStart | DateOnly? | null | The start of the selected date range. Use with @bind-RangeStart. |
| RangeStartChanged | EventCallback<DateOnly?> | — | Callback invoked when the range start changes. |
| RangeEnd | DateOnly? | null | The end of the selected date range. Use with @bind-RangeEnd. |
| RangeEndChanged | EventCallback<DateOnly?> | — | Callback invoked when the range end changes. |
| NumberOfMonths | int | 1 | Number of months to display side by side. |
| ShowWeekNumbers | bool | false | Displays ISO week numbers alongside the calendar rows. |
| ShowYearPicker | bool | false | Enables the year picker view. |
| InitialView | Calendar.CalendarView | Days | Initial calendar view. Values: Calendar.CalendarView.Days, Months, Years. |
| IsDateDisabled | Func<DateTime, bool>? | null | Custom function to disable specific dates. |
| DateClass | Func<DateTime, string>? | null | Custom function to add CSS classes to specific dates. |
| DateTooltip | Func<DateTime, string?>? | null | Per-date tooltip text rendered as the day cell's title attribute (native browser tooltip on hover). Return null/empty for no tooltip. rc.20 |
| DateBadge | Func<DateTime, RenderFragment?>? | null | Per-date indicator slot rendered absolutely positioned in the bottom-right of the day cell — status dots, count badges, icons. Non-interactive (pointer-events-none) so clicks still hit the day button. rc.20 |
| SwipeEnabled | bool | true | Enables swipe-left/right on the day grid to navigate months on touch devices. Set to false to disable. |
| FirstDayOfWeek | DayOfWeek | Sunday | The first day of the week in the calendar grid. |
| Class | string? | null | Additional CSS classes. |
| AdditionalAttributes | Dictionary<string, object>? | null | Additional HTML attributes. |
Related Components
- DatePicker — For selecting dates via an input field with a calendar dropdown