); }, Chevron: ({ className, orientation, ...props }) => { if (orientation === "left") { return ( ); } if (orientation === "right") { return ( ); } return ( ); }, DayButton: CalendarDayButton, WeekNumber: ({ children, ...props }) => { return (

{children}

); }, ...components, }} {...props} /> ); } function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps) { const defaultClassNames = getDefaultClassNames(); const ref = React.useRef(null); React.useEffect(() => { if (modifiers.focused) ref.current?.focus(); }, [modifiers.focused]); return ( ))} ); } export default CalendarWithPresets; ``` ## Date and Time Picker ### Example: calendar-time ```tsx "use client"; import { Calendar } from "@workspace/ui/components/calendar"; import { Card, CardContent, CardFooter } from "@workspace/ui/components/card"; import { Field, FieldGroup, FieldLabel } from "@workspace/ui/components/field"; import { InputGroup, InputGroupAddon, InputGroupInput, } from "@workspace/ui/components/input-group"; import { Clock2Icon } from "lucide-react"; import * as React from "react"; import { useId as usePreviewId } from "react"; export function CalendarWithTime() { const previewId = usePreviewId(); const [date, setDate] = React.useState( new Date( new Date(2025, 5, 12).getFullYear(), new Date(2025, 5, 12).getMonth(), 12, ), ); return ( Start Time End Time ); } export default CalendarWithTime; ``` ## Booked dates ### Example: calendar-booked-dates ```tsx "use client"; import { Calendar } from "@workspace/ui/components/calendar"; import { Card, CardContent } from "@workspace/ui/components/card"; import * as React from "react"; export function CalendarBookedDates() { const [date, setDate] = React.useState( new Date(2025, 0, 6), ); const bookedDates = Array.from( { length: 15 }, (_, i) => new Date(2025, 0, 12 + i), ); return ( button]:line-through opacity-100", }} /> ); } export default CalendarBookedDates; ``` ## Custom Cell Size ### Example: calendar-custom-days ```tsx "use client"; import { Calendar, CalendarDayButton } from "@workspace/ui/components/calendar"; import { Card, CardContent } from "@workspace/ui/components/card"; import { addDays } from "date-fns"; import * as React from "react"; import type { DateRange } from "react-day-picker"; export function CalendarCustomDays() { const [range, setRange] = React.useState({ from: new Date(2025, 11, 8), to: addDays(new Date(2025, 11, 8), 10), }); return ( { return date.toLocaleString("default", { month: "long" }); }, }} components={{ DayButton: ({ children, modifiers, day, ...props }) => { const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6; return ( {children} {!modifiers.outside && ( {isWeekend ? "$120" : "$100"} )} ); }, }} /> ); } export default CalendarCustomDays; ``` 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 ``` Or use fixed values: ```tsx showLineNumbers ``` ## Week Numbers Use `showWeekNumber` to show week numbers. ### Example: calendar-week-numbers ```tsx "use client"; import { Calendar } from "@workspace/ui/components/calendar"; import { Card, CardContent } from "@workspace/ui/components/card"; import * as React from "react"; export function CalendarWeekNumbers() { const [date, setDate] = React.useState( new Date(2025, 0, 12), ); return ( ); } export default CalendarWeekNumbers; ``` ## RTL To enable RTL support in shadcn/ui, see the [RTL configuration guide](https://ui.shadcn.com/docs/rtl). See also the [Hijri Guide](#persian--hijri--jalali-calendar) for enabling the Persian / Hijri / Jalali calendar. ### Example: calendar-rtl ```tsx "use client"; import { Calendar } from "@workspace/ui/components/calendar"; import * as React from "react"; import { arSA, he } from "react-day-picker/locale"; import { type Translations, useTranslation } from "./support"; const translations: Translations = { en: { dir: "ltr", values: {}, }, ar: { dir: "rtl", values: {}, }, he: { dir: "rtl", values: {}, }, }; const locales = { ar: arSA, he: he, } as const; export function CalendarRtl() { const { dir, language } = useTranslation(translations, "ar"); const [date, setDate] = React.useState( new Date(2025, 5, 12), ); return ( ); } export default CalendarRtl; ``` 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" ; ``` ## API Reference See the [React DayPicker](https://react-day-picker.js.org) documentation for more information on the `Calendar` component. ## Changelog ### RTL Support If you're upgrading from a previous version of the `Calendar` component, you'll need to apply the following updates to add locale support: ### Import the `Locale` type. Add `Locale` to your imports from `react-day-picker`: ```diff import { DayPicker, getDefaultClassNames, type DayButton, + type Locale, } from "react-day-picker" ``` ### Add `locale` prop to the Calendar component. Add the `locale` prop to the component's props: ```diff function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", + locale, formatters, components, ...props }: React.ComponentProps & { buttonVariant?: React.ComponentProps["variant"] }) { ``` ### Pass `locale` to DayPicker. Pass the `locale` prop to the `DayPicker` component: ```diff - date.toLocaleString("default", { month: "short" }), + date.toLocaleString(locale?.code, { month: "short" }), ...formatters, }} ``` ### Update CalendarDayButton to accept locale. Update the `CalendarDayButton` component signature and pass `locale`: ```diff function CalendarDayButton({ className, day, modifiers, + locale, ...props - }: React.ComponentProps) { + }: React.ComponentProps & { locale?: Partial }) { ``` ### Update date formatting in CalendarDayButton. Use `locale?.code` in the date formatting: ```diff