Select dates, ranges, or multiple dates in an accessible calendar.
import { Calendar } from '@vrum/ui';
<Calendar
mode={"single"}
defaultView={"day"}
viewSwitching={true}
numberOfMonths={1}
/>| Prop | Type | Default | Description |
|---|---|---|---|
selected | Date | Date[] | DateRange | none | selected configuration. |
defaultSelected | Date | Date[] | DateRange | none | default selected configuration. |
onSelect | ((selected: Date | Date[] | DateRange | undefined) => void) | none | on select configuration. |
mode | "multiple" | "range" | "single" | "single" | mode configuration. |
view | "month" | "day" | "year" | none | view configuration. |
defaultView | "month" | "day" | "year" | "day" | default view configuration. |
onViewChange | ((view: "day" | "month" | "year") => void) | none | on view change configuration. |
viewSwitching | boolean | true | view switching configuration. |
month | Date | none | month configuration. |
defaultMonth | Date | none | default month configuration. |
onMonthChange | ((month: Date) => void) | none | on month change configuration. |
onMonthSelect | ((month: Date) => void) | none | on month select configuration. |
onYearSelect | ((year: number) => void) | none | on year select configuration. |
numberOfMonths | number | 1 | number of months configuration. |
disabled | Matcher | Matcher[] | none | Disable user interaction. |
dayPickerProps | Partial<DayPickerProps> | none | day picker props configuration. |
defaultChecked | boolean | none | default checked configuration. |
autoFocus | boolean | none | auto focus configuration. |
className | string | none | Additional CSS classes. |
id | string | none | id configuration. |
style | CSSProperties | none | Inline style overrides. |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLDivElement> | none | on focus configuration. |
onBlur | FocusEventHandler<HTMLDivElement> | none | on blur configuration. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | none | Called when the input value changes. |
onSubmit | SubmitEventHandler<HTMLDivElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<HTMLDivElement> | none | on key down configuration. |
onClick | MouseEventHandler<HTMLDivElement> | none | Called when the control is activated. |