Calendar

Pro

Month calendar with dots under each day that show how busy it is. Swipe between months, fold it into a single week, pick a day to swap the agenda below, and tap Today to jump back.

Preview

Installation

npx @lumioui/cli add pro/calendar

Usage

import { Calendar } from "@/components/ui/calendar/calendar";
<Calendar />

API reference

Prop Type Default
selected string | Date | null

Controlled selected date (ISO "yyyy-MM-dd" or Date).

 —
defaultSelected string | Date | null

Uncontrolled initial selection. Ignored when selected is provided.

 —
onSelect (date: Date) => void —
events CalendarEvent[]

Events per day — drawn as up to three dots, coloured by category.

 —
categories Record<string, CalendarTint>

Dot colour per event category. Unlisted categories use the accent.

 —
markedDates string[]

ISO date keys that get a single accent dot (shorthand for events).

 —
availableDates string[]

ISO date keys that are open (availability, free slots). When set, the grid becomes a light map: open days are lit at full ink, the rest stay dim. Dim days remain selectable.

 —
disabledDates string[]

ISO date keys that can't be picked (closed, blocked).

 —
minDate string

Earliest selectable date (ISO, inclusive). Paging stops at its month.

 —
maxDate string

Latest selectable date (ISO, inclusive). Paging stops at its month.

 —
initialMonth Date

Month initially shown when selected is unset.

 —
onMonthChange (month: Date) => void

Fires when the visible month changes (first of the month).

 —
collapsed boolean

Controlled fold: true shows only the selected week.

 —
defaultCollapsed boolean

Uncontrolled initial fold.

 false
onCollapsedChange (collapsed: boolean) => void —
showTodayButton boolean

Show the Today pill once the view pages away from today. Default true.

 true
renderAgenda
(date: Date, events: CalendarEvent[]) … (date: Date, events: CalendarEvent[]) => React.ReactNode

Agenda for the picked day (today when nothing is picked), rendered below the grid. It swaps in place when the day changes.

 —
className string —