## Import
```jsx
import {
UNSTABLE_Calendar,
UNSTABLE_RangeCalendar,
UNSTABLE_CalendarGrid,
UNSTABLE_CalendarCell,
} from "@cfa/react-core";
import { CalendarDate, today, getLocalTimeZone } from "@internationalized/date";
```
### Basic Usage
The Calendar component allows users to select a single date.
```jsx
```
### Date Highlighting
Highlight specific dates in the calendar using the `isDateHighlighted` prop. This example highlights the 1st and 15th of each month.
```jsx
date.day === 1 || date.day === 15}
/>
```
### Date Restrictions
Set minimum and maximum dates to restrict selection, or disable specific dates.
```jsx
```
### Multiple Months
Display multiple months at once using the `visibleDuration` prop.
```jsx
```
## RangeCalendar
For selecting date ranges, use the `RangeCalendar` component.
## Import
```jsx
import {
UNSTABLE_Calendar as Calendar,
UNSTABLE_RangeCalendar as RangeCalendar,
UNSTABLE_CalendarGrid as CalendarGrid,
UNSTABLE_CalendarCell as CalendarCell,
} from "@cfa/react-core";
import { CalendarDate } from "@internationalized/date";
```
### Basic Range Selection
```jsx
```
## Subcomponents
```jsx
import {
UNSTABLE_Calendar as Calendar,
UNSTABLE_CalendarGrid as CalendarGrid,
UNSTABLE_CalendarCell as CalendarCell,
} from "@cfa/react-core";
import { CalendarDate } from "@internationalized/date";
```
### 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
{(date) => }
```
## Props
### Calendar
| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| errorMessage | `string` | - | - |
| 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` | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | `ClassNameOrFunction` | `'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` | - | The date that is focused when the calendar first mounts (uncontrolled). |
| defaultValue | `DateValue` | - | The default value (uncontrolled). |
| dir | `string` | - | - |
| firstDayOfWeek | `"sun" \ | "mon" \ | "tue" \ | "wed" \ | "thu" \ | "fri" \ | "sat"` | - | The day that starts the week. |
| focusedValue | `DateValue` | - | 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` | - | The maximum allowed date that a user may select. |
| minValue | `DateValue` | - | The minimum allowed date that a user may select. |
| onAnimationEnd | `AnimationEventHandler` | - | - |
| onAnimationEndCapture | `AnimationEventHandler` | - | - |
| onAnimationIteration | `AnimationEventHandler` | - | - |
| onAnimationIterationCapture | `AnimationEventHandler` | - | - |
| onAnimationStart | `AnimationEventHandler` | - | - |
| onAnimationStartCapture | `AnimationEventHandler` | - | - |
| onAuxClick | `MouseEventHandler` | - | - |
| onAuxClickCapture | `MouseEventHandler` | - | - |
| onChange | `(value: MappedDateValue) => void` | - | Handler that is called when the value changes. |
| onClick | `MouseEventHandler` | - | - |
| onClickCapture | `MouseEventHandler` | - | - |
| onContextMenu | `MouseEventHandler` | - | - |
| onContextMenuCapture | `MouseEventHandler` | - | - |
| onDoubleClick | `MouseEventHandler` | - | - |
| onDoubleClickCapture | `MouseEventHandler` | - | - |
| onFocusChange | `(date: CalendarDate) => void` | - | Handler that is called when the focused date changes. |
| onGotPointerCapture | `PointerEventHandler` | - | - |
| onGotPointerCaptureCapture | `PointerEventHandler` | - | - |
| onLostPointerCapture | `PointerEventHandler` | - | - |
| onLostPointerCaptureCapture | `PointerEventHandler` | - | - |
| onMouseDown | `MouseEventHandler` | - | - |
| onMouseDownCapture | `MouseEventHandler` | - | - |
| onMouseEnter | `MouseEventHandler` | - | - |
| onMouseLeave | `MouseEventHandler` | - | - |
| onMouseMove | `MouseEventHandler` | - | - |
| onMouseMoveCapture | `MouseEventHandler` | - | - |
| onMouseOut | `MouseEventHandler` | - | - |
| onMouseOutCapture | `MouseEventHandler` | - | - |
| onMouseOver | `MouseEventHandler` | - | - |
| onMouseOverCapture | `MouseEventHandler` | - | - |
| onMouseUp | `MouseEventHandler` | - | - |
| onMouseUpCapture | `MouseEventHandler` | - | - |
| onPointerCancel | `PointerEventHandler` | - | - |
| onPointerCancelCapture | `PointerEventHandler` | - | - |
| onPointerDown | `PointerEventHandler` | - | - |
| onPointerDownCapture | `PointerEventHandler` | - | - |
| onPointerEnter | `PointerEventHandler` | - | - |
| onPointerLeave | `PointerEventHandler` | - | - |
| onPointerMove | `PointerEventHandler` | - | - |
| onPointerMoveCapture | `PointerEventHandler` | - | - |
| onPointerOut | `PointerEventHandler` | - | - |
| onPointerOutCapture | `PointerEventHandler` | - | - |
| onPointerOver | `PointerEventHandler` | - | - |
| onPointerOverCapture | `PointerEventHandler` | - | - |
| onPointerUp | `PointerEventHandler` | - | - |
| onPointerUpCapture | `PointerEventHandler` | - | - |
| onScroll | `UIEventHandler` | - | - |
| onScrollCapture | `UIEventHandler` | - | - |
| onTouchCancel | `TouchEventHandler` | - | - |
| onTouchCancelCapture | `TouchEventHandler` | - | - |
| onTouchEnd | `TouchEventHandler` | - | - |
| onTouchEndCapture | `TouchEventHandler` | - | - |
| onTouchMove | `TouchEventHandler` | - | - |
| onTouchMoveCapture | `TouchEventHandler` | - | - |
| onTouchStart | `TouchEventHandler` | - | - |
| onTouchStartCapture | `TouchEventHandler` | - | - |
| onTransitionCancel | `TransitionEventHandler` | - | - |
| onTransitionCancelCapture | `TransitionEventHandler` | - | - |
| onTransitionEnd | `TransitionEventHandler` | - | - |
| onTransitionEndCapture | `TransitionEventHandler` | - | - |
| onTransitionRun | `TransitionEventHandler` | - | - |
| onTransitionRunCapture | `TransitionEventHandler` | - | - |
| onTransitionStart | `TransitionEventHandler` | - | - |
| onTransitionStartCapture | `TransitionEventHandler` | - | - |
| onWheel | `WheelEventHandler` | - | - |
| onWheelCapture | `WheelEventHandler` | - | - |
| 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>` | - | 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.
Requirements:
\* You must render the expected element type (e.g. if \`\