Components
RangeCalendar

RangeCalendar

Allow users to select a date range

Optional props

pageBehavior

Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.

type
PageBehavior
default
visible

minValue

The minimum allowed date that a user may select.

type
DateValue
default
null

maxValue

The maximum allowed date that a user may select.

type
DateValue
default
null

isDateUnavailable

Callback that is called for each date of the calendar. If it returns true, then the date is unavailable.

type
((date: DateValue) => boolean)
default
null

isDisabled

Whether the calendar is disabled.

type
boolean
default
false

isReadOnly

Whether the calendar value is immutable.

type
boolean
default
false

isInvalid

Whether the current selection is invalid according to application logic.

type
boolean
default
null

validationState

Whether the current selection is valid or invalid according to application logic.

type
ValidationState
default
null

autoFocus

Whether to automatically focus the calendar when it mounts.

type
boolean
default
false

onFocusChange

Handler that is called when the focused date changes.

type
((date: CalendarDate) => void)
default
null

errorMessage

An error message to display when the selected value is invalid.

type
React.ReactNode
default
null

aria-label

Defines a string value that labels the current element.

type
string
default
null

aria-labelledby

Identifies the element (or elements) that labels the current element.

type
string
default
null

aria-describedby

Identifies the element (or elements) that describes the object.

type
string
default
null

aria-details

Identifies the element (or elements) that provide a detailed, extended description for the object.

type
string
default
null

id

The element's unique identifier. See MDN.

type
string
default
null

allowsNonContiguousRanges

When combined with isDateUnavailable, determines whether non-contiguous ranges, i.e. ranges containing unavailable dates, may be selected.

type
boolean
default
null

value

The current value (controlled).

type
T
default
null

defaultValue

The default value (uncontrolled).

type
T
default
null

onChange

Handler that is called when the value changes.

type
((value: C) => void)
default
null

focusedValue

Controls the currently focused date within the calendar.

type
DateValue
default
null

defaultFocusedValue

The date that is focused when the calendar first mounts (uncountrolled).

type
DateValue
default
null