Calendar uses typed objects from [`@internationalized/date`](https://react-aria.adobe.com/internationalized/date/) instead of native JavaScript `Date`. Import date utilities from `@cfa/react-core/dates` and components from `@cfa/react-core`. See the [Dates and Times guide](/guides/dates-and-times) for how to create values and convert to and from `Date`.

For date range selection, use [RangeCalendar](RangeCalendar.md).

## Import

```jsx
import { Calendar, CalendarGrid, CalendarCell } from "@cfa/react-core";

import { CalendarDate } from "@cfa/react-core/dates";
```

### Live Editor

The Calendar component allows users to select a single date.

```jsx
<Calendar defaultValue={new CalendarDate(2025, 1, 15)} />
```

## Guidelines

### When to use

- Calendar is an always-visible date grid for selecting a single date.

### Do

- Use Calendar on its own, or inside DatePicker and DateRangePicker.
- Always highlight today's date.
- Disable or constrain dates that fall outside allowed ranges or business rules, including minimums, maximums, and specific blocked dates.

### Avoid

- Using Calendar as the only way to enter a date when people already know it. Use DatePicker with a typeable field.
- Using Calendar on its own for date ranges. Use DateRangePicker.
- Using Calendar for time of day. Use TimeInput.
- Using Calendar when the choice is one of a few fixed dates. Use Select or RadioGroup.

### Date Highlighting

Highlight specific dates in the calendar using the `isDateHighlighted` prop. This example highlights the 1st and 15th of each month.

```jsx
<Calendar
  defaultValue={new CalendarDate(2025, 1, 16)}
  isDateHighlighted={(date) => date.day === 1 || date.day === 15}
/>
```

### Date Restrictions

Set minimum and maximum dates to restrict selection, or disable specific dates.

```jsx
<Calendar minValue={new CalendarDate(2025, 12, 15)} maxValue={new CalendarDate(2025, 12, 25)} />
```

### Multiple Months

Display multiple months at once using the `visibleDuration` prop.

```jsx
<Calendar defaultValue={new CalendarDate(2025, 1, 15)} visibleDuration={{ months: 2 }} />
```

## Subcomponents

### CalendarGrid & CalendarCell

The `CalendarGrid` component renders the calendar grid structure. It's typically used internally but can be used for custom calendar layouts.

The `CalendarCell` component renders individual date cells within the calendar grid.

```jsx
<Calendar defaultValue={new CalendarDate(2025, 1, 15)}>
  <CalendarGrid>{(date) => <CalendarCell date={date} />}</CalendarGrid>
</Calendar>
```

## Props

### Calendar

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| errorMessage | `string` | - | - |
| 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)` | - | - |
| aria-describedby | `string` | - | Identifies the element (or elements) that describes the object. |
| aria-details | `string` | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| aria-label | `string` | - | Defines a string value that labels the current element. |
| aria-labelledby | `string` | - | Identifies the element (or elements) that labels the current element. |
| autoFocus | `boolean` | `false` | Whether to automatically focus the calendar when it mounts. |
| children | `ChildrenOrFunction<CalendarRenderProps<"single">>` | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | `ClassNameOrFunction<CalendarRenderProps<"single">>` | `'react-aria-Calendar'` | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| createCalendar | `((identifier: CalendarIdentifier) => Calendar)` | - | A function to create a new \[Calendar]\(https\://react-spectrum.adobe.com/internationalized/date/Calendar.html) object for a given calendar identifier. If not provided, the \`createCalendar\` function from \`@internationalized/date\` will be used. |
| defaultFocusedValue | `DateValue \ | null` | - | The date that is focused when the calendar first mounts (uncontrolled). |
| defaultValue | `DateValue \ | null` | - | The default value (uncontrolled). |
| dir | `string` | - | - |
| 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. |
| hidden | `boolean` | - | - |
| id | `string` | - | The element's unique identifier. See \[MDN]\(https\://developer.mozilla.org/en-US/docs/Web/HTML/Global\_attributes/id). |
| inert | `boolean` | - | - |
| isDateUnavailable | `((date: DateValue) => boolean)` | - | Callback that is called for each date of the calendar. If it returns true, then the date is unavailable. |
| 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. |
| lang | `string` | - | - |
| maxValue | `DateValue \ | null` | - | The maximum allowed date that a user may select. |
| minValue | `DateValue \ | null` | - | The minimum allowed date that a user may select. |
| onAnimationEnd | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLDivElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onChange | `((value: MappedDateValue<T>) => void)` | - | Handler that is called when the value changes. |
| onClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLDivElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLDivElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onFocusChange | `((date: CalendarDate) => void)` | - | Handler that is called when the focused date changes. |
| onGotPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLDivElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLDivElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLDivElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLDivElement>` | - | - |
| onScroll | `UIEventHandler<HTMLDivElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLDivElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLDivElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLDivElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLDivElement>` | - | - |
| pageBehavior | `PageBehavior` | `visible` | Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration. |
| render | `DOMRenderFunction<"div", CalendarRenderProps<"single">>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;- You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;- Only a single root DOM element can be rendered (no fragments).&#xA;- You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| 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. |
| selectionMode | `"single"` | `'single'` | Whether single or multiple selection is enabled. |
| slot | `string \ | null` | - | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit \`null\` value indicates that the local props completely override all props received from a parent. |
| style | `StyleOrFunction<CalendarRenderProps<"single">>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| suppressHydrationWarning | `boolean` | - | A React-only flag that suppresses the warning React normally logs when an element's server-rendered content doesn't match the client render during hydration. See \[React docs]\(https\://react.dev/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors). |
| translate | `"no" \ | "yes"` | - | - |
| value | `DateValue \ | null` | - | The current value (controlled). |
| 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. |

### CalendarCell

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| date\* | `CalendarDate` | - | The date to render in the cell. |
| className | `string` | - | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| children | `ChildrenOrFunction<CalendarCellRenderProps>` | - | The children of the component. A function may be provided to alter the children based on component state. |
| dir | `string` | - | - |
| hidden | `boolean` | - | - |
| inert | `boolean` | - | - |
| lang | `string` | - | - |
| onAnimationEnd | `AnimationEventHandler<HTMLTableCellElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLTableCellElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLTableCellElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLTableCellElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLTableCellElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLTableCellElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onClick | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onHoverChange | `((isHovering: boolean) => void)` | - | Handler that is called when the hover state changes. |
| onHoverEnd | `((e: HoverEvent) => void)` | - | Handler that is called when a hover interaction ends. |
| onHoverStart | `((e: HoverEvent) => void)` | - | Handler that is called when a hover interaction starts. |
| onLostPointerCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLTableCellElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLTableCellElement>` | - | - |
| onScroll | `UIEventHandler<HTMLTableCellElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLTableCellElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLTableCellElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLTableCellElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLTableCellElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLTableCellElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLTableCellElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLTableCellElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLTableCellElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLTableCellElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLTableCellElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLTableCellElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLTableCellElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLTableCellElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLTableCellElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLTableCellElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLTableCellElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLTableCellElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLTableCellElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLTableCellElement>` | - | - |
| render | `DOMRenderFunction<"div", CalendarCellRenderProps>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;- You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;- Only a single root DOM element can be rendered (no fragments).&#xA;- You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| style | `StyleOrFunction<CalendarCellRenderProps>` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| suppressHydrationWarning | `boolean` | - | A React-only flag that suppresses the warning React normally logs when an element's server-rendered content doesn't match the client render during hydration. See \[React docs]\(https\://react.dev/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors). |
| translate | `"no" \ | "yes"` | - | - |

### CalendarGrid

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| className | `string` | - | The CSS \[className]\(https\://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. |
| children | `ReactElement<unknown, string \ | JSXElementConstructor<any>>[] \ | ReactElement<unknown, string \ | JSXElementConstructor<any>> \ | ((date: CalendarDate) => ReactElement<...>)` | - | Either a function to render calendar cells for each date in the month, or children containing a \`\<CalendarGridHeader>\`\` and \`\<CalendarGridBody>\` when additional customization is needed. |
| dir | `string` | - | - |
| hidden | `boolean` | - | - |
| inert | `boolean` | - | - |
| lang | `string` | - | - |
| offset | `DateDuration` | - | An offset from the beginning of the visible date range that this CalendarGrid should display. Useful when displaying more than one month at a time. |
| onAnimationEnd | `AnimationEventHandler<HTMLTableElement>` | - | - |
| onAnimationEndCapture | `AnimationEventHandler<HTMLTableElement>` | - | - |
| onAnimationIteration | `AnimationEventHandler<HTMLTableElement>` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler<HTMLTableElement>` | - | - |
| onAnimationStart | `AnimationEventHandler<HTMLTableElement>` | - | - |
| onAnimationStartCapture | `AnimationEventHandler<HTMLTableElement>` | - | - |
| onAuxClick | `MouseEventHandler<HTMLTableElement>` | - | - |
| onAuxClickCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onClick | `MouseEventHandler<HTMLTableElement>` | - | - |
| onClickCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onContextMenu | `MouseEventHandler<HTMLTableElement>` | - | - |
| onContextMenuCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onDoubleClick | `MouseEventHandler<HTMLTableElement>` | - | - |
| onDoubleClickCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onGotPointerCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onLostPointerCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onMouseDown | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseDownCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseEnter | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseLeave | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseMove | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseMoveCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseOut | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseOutCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseOver | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseOverCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseUp | `MouseEventHandler<HTMLTableElement>` | - | - |
| onMouseUpCapture | `MouseEventHandler<HTMLTableElement>` | - | - |
| onPointerCancel | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerCancelCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerDown | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerDownCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerEnter | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerLeave | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerMove | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerMoveCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerOut | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerOutCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerOver | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerOverCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerUp | `PointerEventHandler<HTMLTableElement>` | - | - |
| onPointerUpCapture | `PointerEventHandler<HTMLTableElement>` | - | - |
| onScroll | `UIEventHandler<HTMLTableElement>` | - | - |
| onScrollCapture | `UIEventHandler<HTMLTableElement>` | - | - |
| onTouchCancel | `TouchEventHandler<HTMLTableElement>` | - | - |
| onTouchCancelCapture | `TouchEventHandler<HTMLTableElement>` | - | - |
| onTouchEnd | `TouchEventHandler<HTMLTableElement>` | - | - |
| onTouchEndCapture | `TouchEventHandler<HTMLTableElement>` | - | - |
| onTouchMove | `TouchEventHandler<HTMLTableElement>` | - | - |
| onTouchMoveCapture | `TouchEventHandler<HTMLTableElement>` | - | - |
| onTouchStart | `TouchEventHandler<HTMLTableElement>` | - | - |
| onTouchStartCapture | `TouchEventHandler<HTMLTableElement>` | - | - |
| onTransitionCancel | `TransitionEventHandler<HTMLTableElement>` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler<HTMLTableElement>` | - | - |
| onTransitionEnd | `TransitionEventHandler<HTMLTableElement>` | - | - |
| onTransitionEndCapture | `TransitionEventHandler<HTMLTableElement>` | - | - |
| onTransitionRun | `TransitionEventHandler<HTMLTableElement>` | - | - |
| onTransitionRunCapture | `TransitionEventHandler<HTMLTableElement>` | - | - |
| onTransitionStart | `TransitionEventHandler<HTMLTableElement>` | - | - |
| onTransitionStartCapture | `TransitionEventHandler<HTMLTableElement>` | - | - |
| onWheel | `WheelEventHandler<HTMLTableElement>` | - | - |
| onWheelCapture | `WheelEventHandler<HTMLTableElement>` | - | - |
| render | `DOMRenderFunction<"table", undefined>` | - | Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components.&#xA;&#xA;Requirements:&#xA;&#xA;- You must render the expected element type (e.g. if \`\<button>\` is expected, you cannot render an \`\<a>\`).&#xA;- Only a single root DOM element can be rendered (no fragments).&#xA;- You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate. |
| style | `CSSProperties` | - | The inline \[style]\(https\://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. |
| suppressHydrationWarning | `boolean` | - | A React-only flag that suppresses the warning React normally logs when an element's server-rendered content doesn't match the client render during hydration. See \[React docs]\(https\://react.dev/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors). |
| translate | `"no" \ | "yes"` | - | - |
| weekdayStyle | `"long" \ | "narrow" \ | "short"` | `'narrow'` | The style of weekday names to display in the calendar grid header, e.g. single letter, abbreviation, or full day name. |