Calendar

Copy MarkdownOpen

Example

Features

There is no standalone calendar element in HTML. <input type="date"> is close, but this is very limited in functionality, lacking in internationalization capabilities, inconsistent between browsers, and difficult to style. Calendar helps achieve accessible and international 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.
• 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 @react-aria/i18n @internationalized/date

npx libravelui@latest add calendar

Anatomy

import { Calendar } from "@/components/ui/core/calendar";

<Calendar />

Select Mode

Allows users to select only a month or a year instead of a full date, useful for inputs like billing periods or birth years.

Disable Dates

Prevents users from selecting specific dates by disabling them, commonly used to block holidays, past dates, or unavailable booking days.

Custom Week Format

Lets users set a custom starting day of the week, such as Friday or Monday, instead of the default Sunday — ideal for regional or cultural preferences.

With Error State

Highlights invalid date selections, such as weekends, with an error message to guide the user toward choosing acceptable dates.

Props

Loading types…