# Range Calendar (/forms/range-calendar)





<ComponentPreview name="range-calendar-preskok-demo" description="Range calendar built on calendar primitives." />

## Installation [#installation]

<CodeTabs>
  <TabsList>
    <TabsTrigger id="cli">
      CLI
    </TabsTrigger>

    <TabsTrigger id="manual">
      Manual
    </TabsTrigger>
  </TabsList>

  <TabsContent id="cli">
    ```bash
    npx shadcn@latest add @preskok/range-calendar
    ```
  </TabsContent>

  <TabsContent id="manual">
    <Steps>
      <Step>
        Copy and paste the following code into your project.

        <ComponentSource name="range-calendar" title="registry/preskok/ui/preskok-ui/range-calendar.tsx" />
      </Step>

      <Step>
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </TabsContent>
</CodeTabs>

## Usage [#usage]

```tsx
import { parseDate } from "@internationalized/date"

import { RangeCalendar } from "@/components/ui/preskok-ui/range-calendar"

export function RangeCalendarDemo() {
  return (
    <RangeCalendar
      defaultValue={{
        start: parseDate("2026-04-10"),
        end: parseDate("2026-04-16"),
      }}
      aria-label="Trip dates"
    />
  )
}
```

## Props [#props]

* **visibleDuration**: `DateDuration` — Number of months shown at once.
* Inherits all `react-aria-components` `RangeCalendar` props.

## Features [#features]

* **Range-first interaction** with contiguous date highlighting.
* **Single or multi-month layouts** with built-in navigation.
* **Date constraints** via `minValue`, `maxValue`, and `isDateUnavailable`.
* **Keyboard and screen reader support** from React Aria primitives.

## Examples [#examples]

### Basic [#basic]

<ComponentPreview name="range-calendar-preskok-demo" description="Select a date range in a basic range calendar." />

### Controlled [#controlled]

<ComponentPreview name="range-calendar-controlled-preskok-demo" description="Control range state and display selected dates." />

### Disabled [#disabled]

<ComponentPreview name="range-calendar-disabled-preskok-demo" description="Show a disabled range calendar with preset values." />

### Validation [#validation]

<ComponentPreview name="range-calendar-validation-preskok-demo" description="Constrain range selection window and disable weekends." />