Range Calendar

Copy MarkdownOpen

Example

Features

There is no standalone range calendar element in HTML. Two separate <input type="date"> elements could be used, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. RangeCalendar helps achieve accessible and international range calendar components that can be styled as needed.

• Flexible – Display one or more months at once, or a custom time range for use cases like a week view. Minimum and maximum values, unavailable dates, and non-contiguous selections are supported as well.
• International – Support for 13 calendar systems used around the world, including Gregorian, Buddhist, Islamic, Persian, and more. Locale-specific formatting, number systems, and right-to-left support are available as well.
• Accessible – Calendar cells can be navigated and selected using the keyboard, and localized screen reader messages are included to announce when the selection and visible date range change.
• Touch friendly – Date ranges can be selected by dragging over dates in the calendar using a touch screen, and all interactions are accessible using touch-based screen readers.
• Customizable – As with all of React Aria, the DOM structure and styling of all elements can be fully customized.

Installation

npm install react-aria-components tw-animate-css tailwindcss-react-aria-components class-variance-authority lucide-react clsx tailwind-merge motion

npx @libravelui@latest add range-calendar

Anatomy

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

<RangeCalendar label="Select a date range" />

Another Examples

Prefilled

A range calendar with preset start and end dates using default values.

Visible Duration

The visibleDuration prop lets you define how long the range calendar should be displayed. You can pass an object that specifies:

• years: How many years to include before or after.
• months: How many months to show in the range.
• weeks: Number of weeks to cover.
• days: Number of days to span.

For more details, check the react-aria-component documentation on visible durations.

Props

Loading types…