Calendar

uiCategories.interactiveElements.components.showcases.calendar.description

Installation

Import

Usage

uiCategories.interactiveElements.components.showcases.calendar.usage

Design Guidelines

uiCategories.interactiveElements.components.showcases.calendar.designGuidelines

uiCategories.interactiveElements.components.showcases.calendar.examples.basicUsage.title

uiCategories.interactiveElements.components.showcases.calendar.examples.basicUsage.description

uiCategories.interactiveElements.components.showcases.calendar.examples.dateRangeSelection.title

uiCategories.interactiveElements.components.showcases.calendar.examples.dateRangeSelection.description

uiCategories.interactiveElements.components.showcases.calendar.examples.multipleDateSelection.title

uiCategories.interactiveElements.components.showcases.calendar.examples.multipleDateSelection.description

uiCategories.interactiveElements.components.showcases.calendar.examples.withDateConstraints.title

uiCategories.interactiveElements.components.showcases.calendar.examples.withDateConstraints.description

uiCategories.interactiveElements.components.showcases.calendar.examples.withTodayButton.title

uiCategories.interactiveElements.components.showcases.calendar.examples.withTodayButton.description

uiCategories.interactiveElements.components.showcases.calendar.examples.withTimePicker.title

uiCategories.interactiveElements.components.showcases.calendar.examples.withTimePicker.description

uiCategories.interactiveElements.components.showcases.calendar.examples.multipleMonths.title

uiCategories.interactiveElements.components.showcases.calendar.examples.multipleMonths.description

uiCategories.interactiveElements.components.showcases.calendar.examples.customWeekStart.title

uiCategories.interactiveElements.components.showcases.calendar.examples.customWeekStart.description

uiCategories.interactiveElements.components.showcases.calendar.examples.hideOutsideDays.title

uiCategories.interactiveElements.components.showcases.calendar.examples.hideOutsideDays.description

packages.sections.api

Component props and API reference This component supports common style props for spacing, layout, flexbox, grid, and more. Style props export common Tailwind classes as props to help in building consistent UI. For detailed documentation and examples, see the Style Props documentation.

packages.propsTable.headers.name	packages.propsTable.headers.type	packages.propsTable.headers.default	packages.propsTable.headers.description
`value`	`Date \| Date[] \| { from: Date; to?: Date } \| undefined`	`undefined`	uiCategories.interactiveElements.components.showcases.calendar.props.value.description
`onValueChange`	`(value: Date \| Date[] \| { from: Date; to?: Date } \| undefined) => void`	`-`	uiCategories.interactiveElements.components.showcases.calendar.props.onValueChange.description
`defaultValue`	`Date \| Date[] \| { from: Date; to?: Date } \| undefined`	`undefined`	uiCategories.interactiveElements.components.showcases.calendar.props.defaultValue.description
`mode`	`"single" \| "multiple" \| "range"`	`"single"`	uiCategories.interactiveElements.components.showcases.calendar.props.mode.description
`numberOfMonths`	`number`	`1`	uiCategories.interactiveElements.components.showcases.calendar.props.numberOfMonths.description
`showOutsideDays`	`boolean`	`true`	uiCategories.interactiveElements.components.showcases.calendar.props.showOutsideDays.description
`showTodayButton`	`boolean`	`false`	uiCategories.interactiveElements.components.showcases.calendar.props.showTodayButton.description
`showTimePicker`	`boolean`	`false`	uiCategories.interactiveElements.components.showcases.calendar.props.showTimePicker.description
`disabled`	`Date[] \| ((date: Date) => boolean) \| boolean`	`false`	uiCategories.interactiveElements.components.showcases.calendar.props.disabled.description
`minDate`	`Date \| undefined`	`undefined`	uiCategories.interactiveElements.components.showcases.calendar.props.minDate.description
`maxDate`	`Date \| undefined`	`undefined`	uiCategories.interactiveElements.components.showcases.calendar.props.maxDate.description
`locale`	`string`	`"en-US"`	uiCategories.interactiveElements.components.showcases.calendar.props.locale.description
`weekStartsOn`	`0 \| 1`	`0`	uiCategories.interactiveElements.components.showcases.calendar.props.weekStartsOn.description
`className`	`string`	—	packages.commonProps.className.description

packages.title