[feat]: How to use shadcn date picker for jalali calendar

[mohammadtm]

Feature description

hi guys

I wanted to use jalali date picker but react day picker version 8.10.1 that shadcn use doesn't support it. However, in new version of react day picker 9.0.4 this future added (experimental) but due to some changes it doesn't word with shadcn right away.

but if you change code inside calendar.tsx to code down below; it works.

function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) { return ( <DayPicker dir="rtl" today={new Date()} locale={faIR} showOutsideDays={showOutsideDays} className={cn("p-2 font-IranSans", className)} classNames={{ hidden: "invisible", root: "", outside: "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30", weekdays: "text-muted-foreground", weekday: "px-1 text-center", day_button: cn(buttonVariants({ variant: "ghost" }), "h-9 w-9 p-0"), day: "", selected: "bg-secondary rounded-md text-primary-foreground hover:text-primary-foreground ", today: "bg-primary rounded-md text-accent-foreground",

    month_caption: "font-bold mt-2 mb-3",
    month: "space-y-4",
    button_next: cn(
      buttonVariants({ variant: "outline" }),
      "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
    ),
    button_previous: cn(
      buttonVariants({ variant: "outline" }),
      "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
    ),
    nav: "flex flex-row-reverse gap-x-1 absolute left-0.5 top-1 fill-foreground",
  }}
  components={{
    Chevron: ({ orientation }) => {
      if (orientation === "left") {
        return <ChevronLeft />;
      } else {
        return <ChevronRight />;
      }
    },
  }}
  {...props}
/>

); }

and remember to add css file at top import "react-day-picker/style.css";

Affected component/components

calendar.tsx

Additional Context

Additional details here...

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues and PRs

[Christophvh]

Simular issue: https://github.com/shadcn-ui/ui/issues/4518

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.