RangeCalendar
The props declared for RangeCalendar, generated from the types @proyecto-viviana/ui ships.
Import
import { RangeCalendar } from "@proyecto-viviana/ui";Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'S' | 'M' | 'L' | 'XL' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | The size of the calendar. |
styles | StyleString | (() => StyleString | undefined) | — | Spectrum-defined generated classes. |
UNSAFE_className | string | UnsafeClassName | — | Additional CSS class name. Use only as a last resort. |
UNSAFE_style | JSX.CSSProperties | — | Additional inline styles. Use only as a last resort. |
class | string | — | Additional CSS class name. |
locale | string | — | The locale to use for formatting. |
firstDayOfWeek | 0 | 5 | 'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat' | 1 | 2 | 3 | 4 | 6 | — | The day that starts the week. |
isInvalid | false | true | — | Whether the current selection is invalid according to application logic. |
validationState | ValidationState | Accessor<ValidationState | undefined> | — | Validation state for backward-compatible Solid Stately callers. |
errorMessage | number | boolean | RenderedElement | ArrayElement | (string & {}) | Node | JSX.ArrayElement | — | The error message to display when the range calendar is invalid. |
aria-label | string | — | Custom aria label. |
slot | string | — | Not yet documented |
ref | HTMLDivElement | ((el: HTMLDivElement) => void) | { current?: HTMLDivElement | null | undefined; } | — | Not yet documented |
onChange | (value: RangeValue<T> | null) => void | — | Handler called when the value changes. solid-stately |
isDisabled | MaybeAccessor<boolean> | — | Whether the calendar is disabled. solid-stately |
value | RangeValue<T> | Accessor<RangeValue<T> | null> | — | The current value (controlled). solid-stately |
onFocusChange | (date: CalendarDate) => void | — | Handler called when the focused date changes. solid-stately |
defaultValue | RangeValue<T> | — | The default value (uncontrolled). solid-stately |
minValue | DateValue | Accessor<DateValue | undefined> | — | The minimum allowed date. solid-stately |
maxValue | DateValue | Accessor<DateValue | undefined> | — | The maximum allowed date. solid-stately |
isReadOnly | MaybeAccessor<boolean> | — | Whether the calendar is read-only. solid-stately |
focusedValue | DateValue | Accessor<DateValue | null | undefined> | — | The date that is focused when the calendar first mounts. solid-stately |
defaultFocusedValue | DateValue | — | The default focused date (uncontrolled). solid-stately |
createCalendar | (identifier: CalendarIdentifier) => InternationalizedCalendar | — | Creates a calendar object for a locale calendar identifier. solid-stately |
isDateUnavailable | (date: DateValue, anchorDate: CalendarDate | null) => boolean | — | Callback that determines if a date is unavailable. The second argument is the current selection anchor (the first selected date), so availability can be derived from it. Mirrors solid-stately |
visibleMonths | number | Accessor<number | undefined> | — | The number of months to display at once. solid-stately |
pageBehavior | RangeCalendarPageBehavior | Accessor<RangeCalendarPageBehavior | undefined> | — | Controls whether pagination moves by one month or the visible month count. solid-stately |
selectionAlignment | RangeCalendarSelectionAlignment | Accessor<RangeCalendarSelectionAlignment | undefined> | — | Controls how the initial visible months are aligned around the current value. solid-stately |
isDateDisabled | (date: DateValue) => boolean | — | Controls which days are disabled. solid-stately |
allowsNonContiguousRanges | false | true | — | Whether to allow selecting the same date for start and end. solid-stately |
Declared in packages/viviana-ui/src/calendar/RangeCalendar.tsx.
Props marked solidaria or solidaria-components come from the headless layer underneath and behave the same in both registers. Components that wrap a DOM element also accept that element's standard attributes, which are left out here on purpose — listing them would bury the props that are actually ours.