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: Jul 16 — Aug 22, 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
26
27
28
29
30
31
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
DateTooltip and DateBadge shipped in rc.20.
Related Components
- DatePicker — For selecting dates via an input field with a calendar dropdown