Skip to main content
196

Search Lumen

Find components, APIs, guides, and recipes.

GitHub
React Native docs
FormsReact Native

Calendar

Select bounded Gregorian civil dates in a controlled month grid.

Public APILumenCalendarReact Native

Native example

Use Calendar

Hosts control visibleMonth and selectedDay. Civil date models avoid guessed timezone conversion; localize every date formatter.

View captured React Native example
Calendar rendered in the Expo web renderer Lumen playground
Captured exampleExpo web renderer
tsx
<LumenCalendar label="Project calendar" visibleMonth={month} onVisibleMonthChange={setMonth} selectedDay={day} onSelectedDayChange={setDay} />

Reference

Public API

The primary shared and platform-specific options exposed by LumenCalendar.

APIValues or typeDefaultDescription
visibleMonth / selectedDayControlled civil day / optional civil dayRequiredRetains host ownership of stable values and callbacks.

Native behavior

Design and accessibility

When to use it

Hosts control visibleMonth and selectedDay. Civil date models avoid guessed timezone conversion; localize every date formatter.

Accessibility

Localized labels, native controls, selected or disabled state and safe loading/error/empty presentation.

Shared component

Available on other platforms

Apple / SwiftUIAndroid / Compose
React Native docsNative primitives