Range Calendar

Installation

npx shadcn@latest add @preskok/range-calendar

Usage

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

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

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

Basic

Controlled

Disabled

Validation