RangeCalendar
Props
API reference for RangeCalendar. For usage examples, see the React tab.
| Name | Type | Default |
|---|---|---|
| allowsNonContiguousRanges | boolean | |
When combined with | ||
| children | ChildrenOrFunction<RangeCalendarRenderProps> | |
The children of the component. A function may be provided to alter the children based on component state. | ||
| commitBehavior | "clear" | "reset" | "select" | 'select' |
Controls the behavior when a pointer is released outside the calendar or a blur occurs mid selection:
| ||
| createCalendar | ((identifier: CalendarIdentifier) => Calendar) | |
A function to create a new Calendar (opens in new tab) object for a given calendar identifier. If not provided, the | ||
| defaultFocusedValue | DateValue | null | |
The date that is focused when the calendar first mounts (uncontrolled). | ||
| firstDayOfWeek | "fri" | "mon" | "sat" | "sun" | "thu" | "tue" | "wed" | |
The day that starts the week. | ||
| focusedValue | DateValue | null | |
Controls the currently focused date within the calendar. | ||
| hideOutsideDays | boolean | false |
Hides days that belong to the previous or next month. The cells stay in the grid so week columns remain aligned. | ||
| isDateHighlighted | ((date: T) => boolean) | |
| isDateUnavailable | ((date: DateValue, anchorDate: CalendarDate | null) => boolean) | |
Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. The second argument provides the current selection anchor date, if any. This can be used to adjust the available dates based on the user's first selected date. | ||
| isDisabled | boolean | false |
Whether the calendar is disabled. | ||
| isInvalid | boolean | |
Whether the current selection is invalid according to application logic. | ||
| isReadOnly | boolean | false |
Whether the calendar value is immutable. | ||
| maxValue | DateValue | null | |
The maximum allowed date that a user may select. | ||
| minValue | DateValue | null | |
The minimum allowed date that a user may select. | ||
| pageBehavior | PageBehavior | visible |
Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. | ||
| selectionAlignment | "center" | "end" | "start" | 'center' |
Determines the alignment of the visible months on initial render based on the current selection or current date if there is no selection. | ||
| visibleDuration | DateDuration | { months: 1 } |
The amount of days that will be displayed at once. This affects how pagination works. | ||
| weeksInMonth | number | |
The number of weeks in a month. This overrides the default set by the locale. | ||