> ## Documentation Index
> Fetch the complete documentation index at: https://docs.getsabo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Calendar

> Date picker component.

<Frame>
  <img src="https://mintcdn.com/aristotechnologiesinc/AI-6KNJJN4jkkZTo/images/ui/calendar-light.png?fit=max&auto=format&n=AI-6KNJJN4jkkZTo&q=85&s=da3a946e516097fbfb1ba5a3ebcc3f8b" alt="Calendar component preview (light)" width="180" data-path="images/ui/calendar-light.png" />
</Frame>

* **Location**: `sabo/src/components/ui/calendar.tsx`

## When to use

* Select a single date or a range; shows month navigation and keyboard focus.
* Good for filters, booking flows, analytics time windows.

## Usage

```tsx sabo/src/components/ui/calendar.tsx theme={null}
import { Calendar } from "@/components/ui/calendar";

export function Example() {
  return <Calendar showOutsideDays captionLayout="dropdown" />;
}
```

## Key props

<ParamField path="showOutsideDays" type="boolean" default="true">
  Render days from adjacent months.
</ParamField>

<ParamField path="captionLayout" type="string" default="label">
  <code>label</code> | <code>dropdown</code>. Dropdown adds month/year selects.
</ParamField>

<ParamField path="classNames" type="object">
  Customize internal slots from <code>react-day-picker</code> (e.g., <code>month\_caption</code>, <code>day</code>).
</ParamField>

<ParamField path="buttonVariant" type="ghost">
  Applies Button variants to the nav buttons.
</ParamField>

## Styling tip

* Control cell size with <code>\[--cell-size:--spacing(8)]</code>.
* Use <code>buttonVariant</code> to align navigation buttons with your design.

## Accessibility

* Keyboard navigation is supported; focus outlines are prominent.
* Provide labels for the filter context (“From/To date”).