Glowup
INPUTS · 40 / 89
Calendar
Calendar — a Material You inputs component for React Native and web.
󱀫
packages/ui/src/components/Calendar.tsx
Live demo
Properties
6 controls
Selection
Single
󰍝
Month scrolling
Endless
󰍝
Show 'Today'
Keyboard nav (web)
Locale override
Device
󰍝
Disable weekends
Usage
Calendar.tsx
<Calendar />
Variants
The states and shapes this component is meant to be used in.
Scroll modes
`endless` virtualizes every month into one scroller and titles each one; `paged` shows a single month behind the chevrons, with a month dropdown and the neighbouring months' days greyed in.
Selection modes
Constrained
`validRange` closes the window — days outside it, and the chevrons that would page into dead ground, drop to 38%. `isDateDisabled` handles rules the range cannot express.
Locales
API reference
Generated from the library's TypeScript, so it cannot drift from the implementation.
Props
21 on CalendarProps
Filter props
󰍉
autoFocus
boolean
default: false
Moves keyboard focus into the calendar when it mounts, so the arrow keys work at once. Web only. The date pickers set it; leave it off for a calendar that is part of a page.
dates
Date[]
Selected days in `multiple` mode.
endYear
number
Last year reachable from the year grid and the endless scroller.
firstDayOfWeek
number
0 = Sunday … 6 = Saturday. Defaults to the locale's own week start.
isDateDisabled
(date: Date) => boolean
Excludes days `validRange` cannot express (weekends, computed holidays).
keyboardNavigation
boolean
default: true
Arrow-key/PageUp/Home/Enter navigation. Web only — there is no key event source on native. Default `true`.
labels
DateTimePickerLabels
locale
string
Formatting/labelling locale. Defaults to the device locale.
onChange
(date: Date) => void
Fires in `single` mode.
onDatesChange
(dates: Date[]) => void
Fires in `multiple` mode with the full set after the tap.
onRangeChange
(range: DateRange) => void
Fires in `range` mode with the interval after the tap.
onRequestClose
() => void
Called on Escape while keyboard navigation is active.
range
DateRange
default: EMPTY_RANGE
Selected interval in `range` mode.
scrollMode
CalendarScrollMode
default: "endless"
`endless` scrolls through months in one virtualized list; `paged` shows one month at a time behind the chevrons. Defaults to `endless`.
selectionMode
DateSelectionMode
default: "single"
How many days the grid collects. Defaults to `"single"`.
showToday
boolean
default: true
Renders the "Today" shortcut row. Default `true`.
startYear
number
First year reachable from the year grid and the endless scroller.
style
StyleProp<ViewStyle>
testID
string
validRange
ValidRange
The selectable window plus individual excluded days.
value
Date | null
Selected day in `single` mode.