Calendar lets the user pick a date or date range from a month grid. Use it in booking flows, scheduling UIs, date filters, or anywhere the user needs to see surrounding dates for context.
Preview loads on approachPreview loads on approach
Exact source · calendar-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {useState} from 'react';
import {Calendar} from '@astryxdesign/core/Calendar';
import type {ISODateString} from '@astryxdesign/core/Calendar';
export default function CalendarShowcase() {
const [value, setValue] = useState<ISODateString | undefined>('2026-04-15');
return <Calendar mode="single" value={value} onChange={setValue} />;
}
Usage
Calendar lets the user pick a date or date range from a month grid. Use it in booking flows, scheduling UIs, date filters, or anywhere the user needs to see surrounding dates for context.
Set min and max dates to limit selection to a valid window, like only future dates for a booking or the current quarter for a report.
Use range mode when the user needs to pick a start and end date, like a trip or a time-off request.
Use dateConstraints to disable specific dates like weekends or holidays, and explain why they are unavailable.
Show two months side by side when the user frequently selects dates that span a month boundary.
Use a calendar for dates far in the past or future like a birth date. A text input is faster for open-ended entry.
Disable large blocks of dates without context. The user should understand why dates are unavailable.
Typed props
Prop
Type and behavior
mode
'single' | 'range' · default 'single'
Selection mode.
value
ISODateString | DateRange
Controlled selected value.
defaultValue
ISODateString | DateRange
Uncontrolled default value.
onChange
Function
Selection callback.
numberOfMonths
1 | 2 · default 1
Number of months to display.
min
ISODateString
Minimum selectable date.
max
ISODateString
Maximum selectable date.
dateConstraints
Array<(date: Date) => boolean>
Custom constraint functions.
maxRangeSpan
number
Range mode: max days a range may span, both endpoints counted (7 = a 7-day window). Caps the window from the picked start; before a start is picked every day stays selectable.
minRangeSpan
number
Range mode: min days a range must span, both endpoints counted (2 forbids a single-day range). Clicking the start again commits a one-day range when allowed, or cancels the in-progress selection when the minimum is longer. Default 1.
focusDate
ISODateString
Controlled visible month. Unset, the calendar opens on the selected date, else on today clamped into the min/max window.
onFocusDateChange
(focusDate: ISODateString) => void
Navigation callback.
handleRef
React.Ref<CalendarHandle>
Imperative handle for calendar navigation, including navigateTo().
