# Calendar

A calendar component that allows users to select a date or a range of dates.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



<ComponentPreview name="calendar-demo" previewClassName="h-96" />

## Installation [#installation]

<Tabs defaultValue="cli">
  <TabsList>
    <TabsTrigger value="cli">
      Command
    </TabsTrigger>

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

  <TabsContent value="cli">
    ```bash
    npx shadcn@latest add https://shadcn-cssinjs.com/r/calendar.json
    ```
  </TabsContent>

  <TabsContent value="manual">
    <Steps>
      <Step>
        Install the following dependencies:
      </Step>

      ```bash
      npm install react-day-picker date-fns
      ```

      <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="calendar.tsx" />

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

## Usage [#usage]

```tsx showLineNumbers
import { Calendar } from "@/components/ui/calendar";
```

```tsx showLineNumbers
const [date, setDate] = React.useState<Date | undefined>(new Date());

return (
  <Calendar
    mode="single"
    selected={date}
    onSelect={setDate}
    className="rounded-lg border"
  />
);
```

See the [React DayPicker](https://react-day-picker.js.org) documentation for more information.

## About [#about]

The `Calendar` component is built on top of [React DayPicker](https://react-day-picker.js.org).

## Date Picker [#date-picker]

You can use the `<Calendar>` component to build a date picker. See the [Date Picker](/docs/components/base/date-picker) page for more information.

## Persian / Hijri / Jalali Calendar [#persian--hijri--jalali-calendar]

To use the Persian calendar, edit `components/ui/calendar.tsx` and replace `react-day-picker` with `react-day-picker/persian`.

```diff
- import { DayPicker } from "react-day-picker"
+ import { DayPicker } from "react-day-picker/persian"
```

<ComponentPreview name="calendar-hijri" title="Persian / Hijri / Jalali Calendar" description="A Persian calendar." previewClassName="h-[400px]" />

## Selected Date (With TimeZone) [#selected-date-with-timezone]

The Calendar component accepts a `timeZone` prop to ensure dates are displayed and selected in the user's local timezone.

```tsx showLineNumbers
export function CalendarWithTimezone() {
  const [date, setDate] = React.useState<Date | undefined>(undefined);
  const [timeZone, setTimeZone] = React.useState<string | undefined>(undefined);

  React.useEffect(() => {
    setTimeZone(Intl.DateTimeFormat().resolvedOptions().timeZone);
  }, []);

  return (
    <Calendar
      mode="single"
      selected={date}
      onSelect={setDate}
      timeZone={timeZone}
    />
  );
}
```

**Note:** If you notice a selected date offset (for example, selecting the 20th highlights the 19th), make sure the `timeZone` prop is set to the user's local timezone.

**Why client-side?** The timezone is detected using `Intl.DateTimeFormat().resolvedOptions().timeZone` inside a `useEffect` to ensure compatibility with server-side rendering. Detecting the timezone during render would cause hydration mismatches, as the server and client may be in different timezones.

## Basic [#basic]

A basic calendar component. We used `className="rounded-lg border"` to style the calendar.

<ComponentPreview name="calendar-basic" previewClassName="h-96" />

## Range Calendar [#range-calendar]

Use the `mode="range"` prop to enable range selection.

<ComponentPreview name="calendar-range" previewClassName="h-[36rem] md:h-96" />

## Month and Year Selector [#month-and-year-selector]

Use `captionLayout="dropdown"` to show month and year dropdowns.

<ComponentPreview name="calendar-caption" previewClassName="h-96" />

## Presets [#presets]

<ComponentPreview name="calendar-presets" previewClassName="h-[650px]" />

## Date and Time Picker [#date-and-time-picker]

<ComponentPreview name="calendar-time" previewClassName="h-[600px]" />

## Booked dates [#booked-dates]

<ComponentPreview name="calendar-booked-dates" previewClassName="h-96" />

## Custom Cell Size [#custom-cell-size]

<ComponentPreview 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
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-lg border [--cell-size:--spacing(11)] md:[--cell-size:--spacing(12)]"
/>
```

Or use fixed values:

```tsx showLineNumbers
<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  className="rounded-lg border [--cell-size:2.75rem] md:[--cell-size:3rem]"
/>
```

## Week Numbers [#week-numbers]

Use `showWeekNumber` to show week numbers.

<ComponentPreview name="calendar-week-numbers" previewClassName="h-96" />

## RTL [#rtl]

To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).

See also the [Hijri Guide](#persian--hijri--jalali-calendar) for enabling the Persian / Hijri / Jalali calendar.

<ComponentPreview name="calendar-rtl" direction="rtl" previewClassName="h-96" />

When using RTL, import the locale from `react-day-picker/locale` and pass both the `locale` and `dir` props to the Calendar component:

```tsx showLineNumbers
import { arSA } from "react-day-picker/locale";
<Calendar
  mode="single"
  selected={date}
  onSelect={setDate}
  locale={arSA}
  dir="rtl"
/>;
```

## API Reference [#api-reference]

See the [React DayPicker](https://react-day-picker.js.org) documentation for more information on the `Calendar` component.