Calendar

Calendar is a component for displaying or selecting dates in a calendar.

<Calendar.Root />

Usage

import { Calendar } from "@yamada-ui/react"

import { Calendar } from "@/components/ui"

import { Calendar } from "@workspaces/ui"

<Calendar.Root />

If you want to have a date entered, use DatePicker.

Change Size

<Wrap gap="md">
  <For each={["xs", "sm", "md", "lg", "xl"]}>
    {(size, index) => (
      <Calendar.Root key={index} size={size} defaultValue={new Date()} />
    )}
  </For>
</Wrap>

Change Color Scheme

<Wrap gap="md">
  <For each={["success", "warning"]}>
    {(colorScheme, index) => (
      <Calendar.Root
        key={index}
        colorScheme={colorScheme}
        defaultValue={new Date(new Date().setDate(1))}
      />
    )}
  </For>
</Wrap>

Change Shape

<Wrap gap="md">
  <For each={["rounded", "circle", "square"]}>
    {(shape, index) => (
      <Calendar.Root
        key={index}
        shape={shape}
        range
        defaultValue={{
          start: new Date(),
          end: new Date(new Date().setDate(new Date().getDate() + 4)),
        }}
      />
    )}
  </For>
</Wrap>

Change Format

To change the format, set the format object.

S	M	T	W	T	F	S
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

const format = useMemo<Calendar.Format>(
  () => ({
    month: "long",
    weekday: "narrow",
    year: "2-digit",
  }),
  [],
)

return <Calendar.Root format={format} />

Set Default Date

To set a default date, set defaultValue to a Date.

<Calendar.Root defaultValue={new Date()} />

Set Default Month

To set a default month, set defaultMonth to a Date.

<Calendar.Root defaultMonth={new Date("2025-10-01")} />

Set Minimum Date

To set the minimum selectable date, set minDate to a Date.

<Calendar.Root minDate={new Date(new Date().setDate(1))} />

Set Maximum Date

To set the maximum selectable date, set maxDate to a Date.

<Calendar.Root maxDate={new Date(new Date().setDate(18))} />

Disable

To disable the calendar, set disabled to true.

<Calendar.Root disabled />

Disable Today Highlighting

To disable highlighting of today's date, set today to false.

<Calendar.Root today={false} />

Disable Specific Days of the Week

To disable specific days of the week, set excludeDate to a condition function.

<Calendar.Root excludeDate={(date) => [0, 1, 6].includes(date.getDay())} />

Allow Multiple Selection

To allow multiple date selection, set multiple to true.

<Calendar.Root multiple />

Set Maximum for Multiple Selection

To set the maximum number of selectable dates in multiple selection, set max to a number.

<Calendar.Root multiple max={3} />

Enable Range Selection

To enable range selection, set range to true.

<Calendar.Root range />

Change Start Day of Week

To change the start day of the week, set startDayOfWeek to "sunday" or "monday".

Mon	Tue	Wed	Thu	Fri	Sat	Sun
29	30	1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31	1	2

<Wrap gap="md">
  <Calendar.Root startDayOfWeek="sunday" />
  <Calendar.Root startDayOfWeek="monday" />
</Wrap>

Change Weekend Days

To change which days are treated as weekends, set weekendDays to an array of days(numbers).

<Calendar.Root weekendDays={[0, 1]} />

Set Holidays

To set holidays, set holidays to an array of Dates.

const holidays = useMemo(
  () => [
    new Date("2025-01-01"),
    new Date("2025-01-13"),
    new Date("2025-02-11"),
    new Date("2025-02-23"),
    new Date("2025-02-24"),
    new Date("2025-03-20"),
    new Date("2025-04-29"),
    new Date("2025-05-03"),
    new Date("2025-05-04"),
    new Date("2025-05-05"),
    new Date("2025-05-06"),
    new Date("2025-07-21"),
    new Date("2025-08-11"),
    new Date("2025-09-15"),
    new Date("2025-09-23"),
    new Date("2025-10-13"),
    new Date("2025-11-03"),
    new Date("2025-11-23"),
    new Date("2025-11-24"),
  ],
  [],
)

return <Calendar.Root holidays={holidays} />

Hide Outside the Current Month

To hide dates outside the current month, set styles using dayProps.

<Calendar.Root
  dayProps={{
    css: { "&[data-outside]": { opacity: 0, pointerEvents: "none" } },
  }}
/>

Customize Components

You can customize components to change the display.

<Wrap gap="md">
  <Calendar.Root>
    <Calendar.Navigation>
      <Calendar.Control justifyContent="flex-start" px="3">
        {({ month }) =>
          `${month.getFullYear()}/${(month.getMonth() + 1).toString().padStart(2, "0")}`
        }
      </Calendar.Control>
      <Calendar.PrevButton gridColumn="6 / 7" />
      <Calendar.NextButton gridColumn="7 / 8" />
    </Calendar.Navigation>

    <Calendar.Month />
  </Calendar.Root>

  <Calendar.Root
    day={({ value }) => (
      <Indicator
        colorScheme="blue"
        size="sm"
        disabled={value.getDate() % 4 !== 0}
        offset="-3px"
        labelProps={{ minBoxSize: "2" }}
      >
        <Text as="span">{value.getDate()}</Text>
      </Indicator>
    )}
  />
</Wrap>

Control

const [value, setValue] = useState<Date | undefined>(new Date())

return <Calendar.Root value={value} onChange={setValue} />

If you use this code, you need to add "use client" to the top of the file.

Props

Calendar.Root

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	`"md"`	`"2xl" \| "lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`buttonProps`	-	`HTMLStyledProps<"button">` Props for the button component.
`controlProps`	-	`CalendarControlProps` Props for the control component.
`day`	-	`string \| number \| bigint \| boolean \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...> \| ((props: { ...; }) => ReactNode)` The day component to use.
`dayProps`	-	`Omit<CalendarDayProps, "value">` Props for the day component.
`defaultMonth`	`new Date()`	`Date` The initial month of the calendar.
`defaultValue`	-	`MaybeDateValue<Multiple, Range>` The initial value of the calendar.
`disabled`	`false`	`boolean` If `true`, disables the calendar.
`excludeDate`	-	`(date: Date) => boolean` Callback function to determine whether the day should be disabled.
`format`	-	`CalendarFormat` The format used for conversion. Check the docs to see the format of possible modifiers you can pass. https://day.js.org/docs/en/display/format#list-of-localized-formats
`holidays`	-	`Date[]` Define holidays.
`locale`	`"en-US"`	`AnyString \| Locale` The locale of the calendar.
`max`	-	`number` The maximum selectable value.
`maxDate`	`new Date(2099, 11, 31)`	`Date` The maximum possible date.
`minDate`	`new Date(1900, 0, 1)`	`Date` The minimum possible date.
`month`	-	`Date` The month of the calendar.
`monthProps`	-	`CalendarMonthProps` Props for the month component.
`monthSelectProps`	-	`CalendarMonthSelectProps` Props for the month select component.
`multiple`	`false`	`Multiple` If `true`, the calendar will be multiple.
`navigationProps`	-	`Omit<CalendarNavigationProps, "children">` Props for the navigation component.
`nextButtonProps`	-	`CalendarNextButtonProps` Props for the next button component.
`onChange`	-	`(value: MaybeDateValue<Multiple, Range>) => void` The callback invoked when value state changes.
`onChangeMonth`	-	`(value: Date) => void` The callback invoked when month state changes.
`prevButtonProps`	-	`CalendarPrevButtonProps` Props for the prev button component.
`range`	`false`	`Range` If `true`, enables date range selection.
`selectProps`	-	`Select.RootProps` Props for the select component.
`startDayOfWeek`	`"monday"`	`StartDayOfWeek` Define the start day of the week.
`today`	`true`	`boolean` If `true`, highlight today.
`value`	-	`MaybeDateValue<Multiple, Range>` The value of the calendar.
`weekdayProps`	-	`HTMLStyledProps<"th">` Props for the weekday component.
`weekdaysProps`	-	`HTMLStyledProps<"tr">` Props for the weekdays component.
`weekendDays`	`[0, 6]`	`number[]` Define weekend days.
`weekProps`	-	`HTMLStyledProps<"tr">` Props for the week component.
`weeksProps`	-	`HTMLStyledProps<"tbody">` Props for the weeks component.
`yearSelectProps`	-	`CalendarYearSelectProps` Props for the year select component.

Calendar.Control

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`children`	-	`ReactNodeOrFunction<{ month: Date }>` The control children to use.

Calendar.Month

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`day`	-	`ReactNodeOrFunction<{ value: Date }>` The day component to use.

Calendar.MonthSelect

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	-	`"filled" \| "flushed" \| "outline" \| "plain"` The variant of the component.
`animationScheme`	`"scale"`	`"block-end" \| "block-start" \| "inline-end" \| "inline-start" \| "none" \| "scale" ...` The animation of the element.
`autoUpdate`	`true`	`boolean` If `true`, automatically updates the position of the floating element when necessary.
`blockScrollOnMount`	`false`	`boolean` If `true`, scrolling will be disabled on the `body` when the modal opens.
`clearable`	`false`	`boolean` If `true`, display the clear icon.
`clearIcon`	-	`ReactNode` The icon to be used in the clear button.
`closeOnBlur`	`true`	`boolean` If `true`, the popover will close when you blur out it by clicking outside or tabbing out.
`closeOnEsc`	`true`	`boolean` If `true`, the popover will hide on pressing Esc key.
`closeOnScroll`	`false`	`boolean` If `true`, the popover will hide on scroll.
`closeOnSelect`	`true`	`boolean` If `true`, the list element will be closed when value is selected.
`contentProps`	-	`SelectContentProps` Props for content element.
`defaultOpen`	-	`boolean` If `true`, the element will be initially opened.
`defaultValue`	-	`string` The initial value of the select.
`disabled`	`false`	`boolean` If `true`, the combobox will be disabled.
`duration`	`0.1`	`MotionLifecycleProps<number> \| number` The animation duration.
`elementProps`	-	`InputGroup.ElementProps` The props for the end element.
`elements`	-	`{ floating?: HTMLElement \| null \| undefined; reference?: HTMLButtonElement \| null \| undefined; }` Object containing the reference and floating elements.
`errorBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is invalid.
`flip`	`true`	`boolean` If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.
`focusBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is focused.
`focusOnClear`	`true`	`boolean` If `true`, the field will be focused when the clear icon is clicked.
`groupProps`	-	`Omit<SelectGroupProps, "children" \| "label">` Props for group element.
`gutter`	`8`	`number` The distance or margin between the reference and popper. It is used internally to create an `offset` modifier.
`icon`	-	`ReactNode` The icon to be used in the select.
`iconProps`	-	`SelectIconProps` Props for icon element.
`includePlaceholder`	`true`	`boolean` If `true`, include placeholder in options.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`items`	`[]`	`ComboboxItem[]` If provided, generate options based on items.
`matchWidth`	`false`	`boolean` If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns.
`max`	-	`number` The maximum selectable value.
`middleware`	-	`(false \| { name: string; options?: any; fn: (state: { x: number; y: number; placement: Placement; platform: { detectOverflow: (state: MiddlewareState, options?: DetectOverflowOptions \| Derivable<...> \| undefined) => Promise<...>; } & Platform; ... 4 more ...; elements: Elements; }) => Promisable<...>; } \| null \| und...` Array of middleware objects to modify the positioning or provide data for rendering.
`multiple`	`false`	`false` If `true`, the select will be multiple.
`name`	-	`string` The `name` attribute of the input element.
`offset`	-	`[number, number]` The main and cross-axis offset to displace popper element from its reference element.
`onChange`	-	`(value: string) => void` The callback invoked when value state changes.
`onClose`	-	`() => void \| Promise<void>` Callback invoked to close the element.
`onOpen`	-	`() => void \| Promise<void>` Callback invoked to open the element.
`open`	-	`boolean` If `true`, the element will be opened.
`openOnClick`	`true`	`boolean` If `true`, the combobox will be opened when click on the field.
`openOnEnter`	`true`	`boolean` If `true`, the combobox will be opened when enter is pressed.
`openOnSpace`	`true`	`boolean` If `true`, the combobox will be opened when space is pressed.
`optionProps`	-	`Omit<SelectOptionProps, "children" \| "value">` Props for option element.
`placeholder`	-	`string` The placeholder for select.
`placeholderProps`	-	`Omit<SelectOptionProps, "children" \| "value">` Props for placeholder element.
`placement`	`"end"`	`"center-end-end" \| "center-end-start" \| "center-end" \| "center-start-end" \| "center-start-start" \| "center-start" \| "end-center" \| "end-end" \| "end-start" \| "end" ...` The placement of the popper relative to its reference.
`platform`	-	`Platform` Custom or extended platform object.
`preventOverflow`	`true`	`boolean` If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.
`readOnly`	`false`	`boolean` If `true`, the combobox will be readonly.
`render`	-	`(props: SelectRenderProps) => ReactNode` The function to render the selected items.
`required`	`false`	`boolean` If `true`, the field will be required.
`rootProps`	-	`InputGroup.RootProps` Props for root element.
`selectFocusRef`	-	`RefObject<HTMLElement \| null>` The `ref` of the element that should receive focus when selected.
`selectOnSpace`	`true`	`boolean` If `true`, the item will be selected when space is pressed.
`separator`	`","`	`string` The visual separator between each value.
`strategy`	`"absolute"`	`"absolute" \| "fixed"` The CSS positioning strategy to use.
`transferFocus`	`true`	`boolean` If `true`, the focus will be transferred to the popover content when the tab key is pressed.
`value`	-	`string` The value of the select.
`whileElementsMounted`	-	`(reference: HTMLButtonElement, floating: HTMLElement, update: () => void) => () => void` A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass `autoUpdate`).

Calendar.Navigation

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Calendar.NextButton

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Calendar.PrevButton

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.

Calendar.YearSelect

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`size`	-	`"lg" \| "md" \| "sm" \| "xl" \| "xs"` The size of the component.
`variant`	-	`"filled" \| "flushed" \| "outline" \| "plain"` The variant of the component.
`animationScheme`	`"scale"`	`"block-end" \| "block-start" \| "inline-end" \| "inline-start" \| "none" \| "scale" ...` The animation of the element.
`autoUpdate`	`true`	`boolean` If `true`, automatically updates the position of the floating element when necessary.
`blockScrollOnMount`	`false`	`boolean` If `true`, scrolling will be disabled on the `body` when the modal opens.
`clearable`	`false`	`boolean` If `true`, display the clear icon.
`clearIcon`	-	`ReactNode` The icon to be used in the clear button.
`closeOnBlur`	`true`	`boolean` If `true`, the popover will close when you blur out it by clicking outside or tabbing out.
`closeOnEsc`	`true`	`boolean` If `true`, the popover will hide on pressing Esc key.
`closeOnScroll`	`false`	`boolean` If `true`, the popover will hide on scroll.
`closeOnSelect`	`true`	`boolean` If `true`, the list element will be closed when value is selected.
`contentProps`	-	`SelectContentProps` Props for content element.
`defaultOpen`	-	`boolean` If `true`, the element will be initially opened.
`defaultValue`	-	`string` The initial value of the select.
`disabled`	`false`	`boolean` If `true`, the combobox will be disabled.
`duration`	`0.1`	`MotionLifecycleProps<number> \| number` The animation duration.
`elementProps`	-	`InputGroup.ElementProps` The props for the end element.
`elements`	-	`{ floating?: HTMLElement \| null \| undefined; reference?: HTMLButtonElement \| null \| undefined; }` Object containing the reference and floating elements.
`errorBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is invalid.
`flip`	`true`	`boolean` If `true`, the popper will change its placement and flip when it's about to overflow its boundary area.
`focusBorderColor`	-	`"-moz-initial" \| "AccentColor" \| "AccentColorText" \| "ActiveBorder" \| "ActiveCaption" \| "ActiveText" \| "aliceblue" \| "amber.100" \| "amber.200" \| "amber.300" ...` The border color when the input is focused.
`focusOnClear`	`true`	`boolean` If `true`, the field will be focused when the clear icon is clicked.
`groupProps`	-	`Omit<SelectGroupProps, "children" \| "label">` Props for group element.
`gutter`	`8`	`number` The distance or margin between the reference and popper. It is used internally to create an `offset` modifier.
`icon`	-	`ReactNode` The icon to be used in the select.
`iconProps`	-	`SelectIconProps` Props for icon element.
`includePlaceholder`	`true`	`boolean` If `true`, include placeholder in options.
`invalid`	`false`	`boolean` If `true`, the field will be invalid.
`items`	`[]`	`ComboboxItem[]` If provided, generate options based on items.
`matchWidth`	`false`	`boolean` If `true`, the popper will match the width of the reference at all times. It's useful for `autocomplete`, `date-picker` and `select` patterns.
`max`	-	`number` The maximum selectable value.
`middleware`	-	`(false \| { name: string; options?: any; fn: (state: { x: number; y: number; placement: Placement; platform: { detectOverflow: (state: MiddlewareState, options?: DetectOverflowOptions \| Derivable<...> \| undefined) => Promise<...>; } & Platform; ... 4 more ...; elements: Elements; }) => Promisable<...>; } \| null \| und...` Array of middleware objects to modify the positioning or provide data for rendering.
`multiple`	`false`	`false` If `true`, the select will be multiple.
`name`	-	`string` The `name` attribute of the input element.
`offset`	-	`[number, number]` The main and cross-axis offset to displace popper element from its reference element.
`onChange`	-	`(value: string) => void` The callback invoked when value state changes.
`onClose`	-	`() => void \| Promise<void>` Callback invoked to close the element.
`onOpen`	-	`() => void \| Promise<void>` Callback invoked to open the element.
`open`	-	`boolean` If `true`, the element will be opened.
`openOnClick`	`true`	`boolean` If `true`, the combobox will be opened when click on the field.
`openOnEnter`	`true`	`boolean` If `true`, the combobox will be opened when enter is pressed.
`openOnSpace`	`true`	`boolean` If `true`, the combobox will be opened when space is pressed.
`optionProps`	-	`Omit<SelectOptionProps, "children" \| "value">` Props for option element.
`placeholder`	-	`string` The placeholder for select.
`placeholderProps`	-	`Omit<SelectOptionProps, "children" \| "value">` Props for placeholder element.
`placement`	`"end"`	`"center-end-end" \| "center-end-start" \| "center-end" \| "center-start-end" \| "center-start-start" \| "center-start" \| "end-center" \| "end-end" \| "end-start" \| "end" ...` The placement of the popper relative to its reference.
`platform`	-	`Platform` Custom or extended platform object.
`preventOverflow`	`true`	`boolean` If `true`, will prevent the popper from being cut off and ensure it's visible within the boundary area.
`readOnly`	`false`	`boolean` If `true`, the combobox will be readonly.
`render`	-	`(props: SelectRenderProps) => ReactNode` The function to render the selected items.
`required`	`false`	`boolean` If `true`, the field will be required.
`rootProps`	-	`InputGroup.RootProps` Props for root element.
`selectFocusRef`	-	`RefObject<HTMLElement \| null>` The `ref` of the element that should receive focus when selected.
`selectOnSpace`	`true`	`boolean` If `true`, the item will be selected when space is pressed.
`separator`	`","`	`string` The visual separator between each value.
`strategy`	`"absolute"`	`"absolute" \| "fixed"` The CSS positioning strategy to use.
`transferFocus`	`true`	`boolean` If `true`, the focus will be transferred to the popover content when the tab key is pressed.
`value`	-	`string` The value of the select.
`whileElementsMounted`	-	`(reference: HTMLButtonElement, floating: HTMLElement, update: () => void) => () => void` A callback invoked when both the reference and floating elements are mounted, and cleaned up when either is unmounted. This is useful for setting up event listeners (e.g. pass `autoUpdate`).

Accessibility

Key	Description	State
`ArrowUp`	Moves focus to the date above.	-
`ArrowDown`	Moves focus to the date below.	-
`ArrowLeft`	Moves focus to the date to the left. If it's the first date, moves to the last date of the previous month.	-
`ArrowRight`	Moves focus to the date to the right. If it's the last date, moves to the first date of the next month.	-
`Home`	Moves focus to the first date in the same week.	-
`End`	Moves focus to the last date in the same week.	-
`PageUp`	Moves focus to the same date in the previous month. If that date doesn't exist, moves to an enabled date in that month.	-
`Shift` + `PageUp`	Moves focus to the same date in the previous year. If that date doesn't exist, moves to an enabled date in that month.	-
`PageDown`	Moves focus to the same date in the next month. If that date doesn't exist, moves to an enabled date in that month.	-
`Shift` + `PageDown`	Moves focus to the same date in the next year. If that date doesn't exist, moves to an enabled date in that month.	-
`Space`, `Enter`	Toggles the selection state of the focused date.	-

ARIA Roles and Attributes

Element	Roles and Attributes	Usage
`div.ui-calendar__select--years [role="combobox"]`	`aria-label`	Sets `"Choose the year"`.
`div.ui-calendar__select--months [role="combobox"]`	`aria-label`	Sets `"Choose the month"`.
`div.ui-calendar__control [role="status"]`	`role="status"`	Indicates that it is a status.
	`aria-live="polite"`	Indicates that it may be updated outside of focus.
`table.ui-calendar__month`	`role="grid"`	Indicates that it is a grid.
	`aria-label`	Sets the displayed month and year, like `"February 2026"`.
	`aria-multiselectable`	Sets `"true"` if multiple selection or range selection is enabled.
`button.ui-calendar__button--prev`	`aria-label`	Sets `"Go to the previous month"`.
`button.ui-calendar__button--next`	`aria-label`	Sets `"Go to the next month"`.
`td.ui-calendar__cell--day`	`aria-label`	Sets the date, like `"Thursday, February 5, 2026"`. If today, sets `"Today, Thursday, February 5, 2026"`.
	`aria-disabled`	Sets `"true"` if the date is disabled.
	`aria-selected`	Sets `"true"` if the date is selected.

Similar Components

NativeTable is a component for efficiently organizing and displaying data.

Stat is used to display numbers or data within a box.

Table is a table component equipped with column sorting, row selection, and click event features.

Uses Components & Hooks

Button is an interactive component that allows users to perform actions such as submitting forms and toggling modals.

Field is a component used to group form elements with label, helper message, error message, etc.

Icon is a general icon component that can be used in your projects.

Select is a component used for allowing a user to choose values from a list of options.

Format is used to format dates, numbers, and bytes according to a specific locale.

useDescendants is a custom hook that manages descendants.

Used By Components & Hooks

DatePicker is a component used for users to select a date.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1

Sun	Mon	Tue	Wed	Thu	Fri	Sat
28	29	30	1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31	1