203 lines
4.2 KiB
Plaintext
203 lines
4.2 KiB
Plaintext
---
|
|
title: Calendar
|
|
description: A calendar component that allows users to select a date or a range of dates.
|
|
base: aria
|
|
component: true
|
|
links:
|
|
doc: https://react-aria.adobe.com/Calendar
|
|
api: https://react-aria.adobe.com/Calendar#api
|
|
---
|
|
|
|
<ComponentPreview
|
|
styleName="aria-nova"
|
|
name="calendar-demo"
|
|
previewClassName="h-96"
|
|
/>
|
|
|
|
## Installation
|
|
|
|
<CodeTabs>
|
|
|
|
<TabsList>
|
|
<TabsTrigger value="cli">Command</TabsTrigger>
|
|
<TabsTrigger value="manual">Manual</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="cli">
|
|
|
|
```bash
|
|
npx shadcn@latest add calendar
|
|
```
|
|
|
|
</TabsContent>
|
|
|
|
<TabsContent value="manual">
|
|
|
|
<Steps className="mb-0 pt-2">
|
|
|
|
<Step>Install the following dependencies:</Step>
|
|
|
|
```bash
|
|
npm install react-aria-components @internationalized/date
|
|
```
|
|
|
|
<Step>Add the `Button` component to your project.</Step>
|
|
|
|
The `Calendar` component uses the `Button` component. Make sure you have it installed in your project.
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource
|
|
name="calendar"
|
|
title="components/ui/calendar.tsx"
|
|
styleName="aria-nova"
|
|
/>
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsContent>
|
|
|
|
</CodeTabs>
|
|
|
|
## Usage
|
|
|
|
```tsx showLineNumbers
|
|
import {
|
|
getLocalTimeZone,
|
|
today,
|
|
type CalendarDate,
|
|
} from "@internationalized/date"
|
|
|
|
import { Calendar } from "@/components/ui/calendar"
|
|
```
|
|
|
|
```tsx showLineNumbers
|
|
const [date, setDate] = React.useState<CalendarDate | null>(
|
|
today(getLocalTimeZone())
|
|
)
|
|
|
|
return (
|
|
<Calendar value={date} onChange={setDate} className="rounded-lg border" />
|
|
)
|
|
```
|
|
|
|
See the [React Aria](https://react-aria.adobe.com/Calendar) documentation for more information.
|
|
|
|
## Date Picker
|
|
|
|
You can use the `<Calendar>` component to build a date picker. See the [Date Picker](/docs/components/aria/date-picker) page for more information.
|
|
|
|
## International Calendars
|
|
|
|
To use international calendar systems such as Persian, Islamic, or Buddhist, use React Aria's `I18nProvider` to set the locale.
|
|
|
|
<ComponentPreview
|
|
styleName="aria-nova"
|
|
name="calendar-hijri"
|
|
title="Persian / Hijri / Jalali Calendar"
|
|
description="A Persian calendar."
|
|
previewClassName="h-[400px]"
|
|
/>
|
|
|
|
## Basic
|
|
|
|
A basic calendar component. We used `className="rounded-lg border"` to style the calendar.
|
|
|
|
<ComponentPreview
|
|
styleName="aria-nova"
|
|
name="calendar-basic"
|
|
previewClassName="h-96"
|
|
/>
|
|
|
|
## Range Calendar
|
|
|
|
Use the `RangeCalendar` component to enable range selection.
|
|
|
|
<ComponentPreview
|
|
styleName="aria-nova"
|
|
name="calendar-range"
|
|
previewClassName="h-[36rem] md:h-96"
|
|
/>
|
|
|
|
## Month and Year Selector
|
|
|
|
Use `captionLayout="dropdown"` to show month and year dropdowns.
|
|
|
|
<ComponentPreview
|
|
styleName="aria-nova"
|
|
name="calendar-caption"
|
|
previewClassName="h-96"
|
|
/>
|
|
|
|
## Presets
|
|
|
|
<ComponentPreview
|
|
styleName="aria-nova"
|
|
name="calendar-presets"
|
|
previewClassName="h-[650px]"
|
|
/>
|
|
|
|
## Date and Time Picker
|
|
|
|
<ComponentPreview
|
|
styleName="aria-nova"
|
|
name="calendar-time"
|
|
previewClassName="h-[600px]"
|
|
/>
|
|
|
|
## Booked dates
|
|
|
|
<ComponentPreview
|
|
styleName="aria-nova"
|
|
name="calendar-booked-dates"
|
|
previewClassName="h-96"
|
|
/>
|
|
|
|
## Custom Cell Size
|
|
|
|
<ComponentPreview
|
|
styleName="aria-nova"
|
|
name="calendar-custom-days"
|
|
title="Custom Cell Size"
|
|
description="A calendar with custom cell size that's responsive."
|
|
className="**:[.preview]:h-[560px]"
|
|
/>
|
|
|
|
You can customize the size of calendar cells using the `--cell-size` CSS variable. You can also make it responsive by using breakpoint-specific values:
|
|
|
|
```tsx showLineNumbers
|
|
<Calendar
|
|
value={date}
|
|
onChange={setDate}
|
|
className="rounded-lg border [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]"
|
|
/>
|
|
```
|
|
|
|
Or use fixed values:
|
|
|
|
```tsx showLineNumbers
|
|
<Calendar
|
|
value={date}
|
|
onChange={setDate}
|
|
className="rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]"
|
|
/>
|
|
```
|
|
|
|
## RTL
|
|
|
|
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
|
|
|
|
See also the [International Calendars Guide](#international-calendars) for enabling the international calendars such as Persian / Hijri / Jalali.
|
|
|
|
<ComponentPreview
|
|
styleName="aria-nova"
|
|
name="calendar-rtl"
|
|
direction="rtl"
|
|
previewClassName="h-96"
|
|
/>
|
|
|
|
## API Reference
|
|
|
|
See the [React Aria](https://react-aria.adobe.com/Calendar) documentation for more information on the `Calendar` component.
|