Calendar RTL support
To enable RTL support for Calendar in shadcn/ui, follow the RTL configuration guide at /docs/rtl. Also refer to the International Calendars Guide for enabling Persian, Hijri, or Jalali calendars.
shadcn/ui · Components · all subjects
calendar/rtl
11 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Calendar RTL general setup reference
To enable RTL support in shadcn/ui, refer to the RTL configuration guide. The Calendar component also supports locale-specific formatting for RTL languages.
Calendar RTL locale configuration
When using RTL (right-to-left) languages, import the locale from react-day-picker/locale and pass both the locale and dir props to the Calendar component: ```tsx import { arSA } from "react-day-picker/locale" <Calendar mode="single" selected={date} onSelect={setDate} locale={arSA} dir="rtl" /> ```
Calendar RTL migration - add locale prop to component
When upgrading the Calendar component for RTL support, add the locale prop to the Calendar component's props signature: function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & { buttonVariant?: React.ComponentProps<typeof Button>["variant"] })
Calendar RTL migration - pass locale to DayPicker
When upgrading the Calendar component for RTL support, pass the locale prop to the DayPicker component and update the month dropdown formatter: <DayPicker showOutsideDays={showOutsideDays} className={cn(...)} captionLayout={captionLayout} locale={locale} formatters={{ formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }), ...formatters, }} ... />
Calendar RTL migration - CalendarDayButton locale support
When upgrading the Calendar component for RTL support, update the CalendarDayButton component to accept and use locale: function CalendarDayButton({ className, day, modifiers, locale, ...props }: React.ComponentProps<typeof DayButton> & { locale?: Partial<Locale> }) { ... <Button variant="ghost" size="icon" data-day={day.date.toLocaleDateString(locale?.code)} ... /> ... }
Calendar RTL migration - DayButton component locale passing
When upgrading the Calendar component for RTL support, update the DayButton component usage to pass the locale prop: components={{ ..., DayButton: ({ ...props }) => (<CalendarDayButton locale={locale} {...props} />), ... }}
Calendar RTL migration - logical CSS properties
When upgrading the Calendar component for RTL support, replace physical directional CSS classes with logical properties for better RTL support: Replace rounded-r-(--cell-radius) with rounded-e-(--cell-radius), replace rounded-l-(--cell-radius) with rounded-s-(--cell-radius), replace after:right-0 with after:end-0, and replace after:left-0 with after:start-0.
Calendar with locale example
To use the Calendar component with locale support after RTL upgrade, use: import { enUS } from "react-day-picker/locale"; <Calendar mode="single" selected={date} onSelect={setDate} locale={enUS} />
Calendar RTL support setup
To enable RTL support in the Calendar component, import the locale from react-day-picker/locale and pass both the locale and dir props to the Calendar component. Example: import { arSA } from "react-day-picker/locale"; <Calendar mode="single" selected={date} onSelect={setDate} locale={arSA} dir="rtl" />
Calendar RTL migration steps - Locale type import
When upgrading from a previous version of the Calendar component to add RTL locale support, add Locale to imports from react-day-picker: import { DayPicker, getDefaultClassNames, type DayButton, type Locale } from "react-day-picker"