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
A day cell is --lumeo-calendar-cell-size (32px) and the frame padding --lumeo-calendar-p (12px); set both on a wrapper for a denser picker, the week grid follows.
Su
Mo
Tu
We
Th
Fr
Sa
Su
Mo
Tu
We
Th
Fr
Sa
Su
Mo
Tu
We
Th
Fr
Sa
Selectable range: Aug 28 — Oct 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
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
35
36
37
38
39
40
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