Update Calendar Component for [email protected] Compatibility

[HichemTab-tech]

Description:
This PR updates the Calendar component to support [email protected], which introduced breaking changes. The update includes:

Changes Implemented:

• Upgraded react-day-picker from 8.10.1 to 9.5.1 (Released: 2024-07-20) following the official upgrade guide.
• Refactored class names and structure based on the new API requirements:
  • Adjusted months, nav, nav_button, table, and related class names to align with DayPicker's new styling approach.
  • Ensured the component’s styling remains consistent with the previous version.
• Refactored icon usage:
  • Replaced ChevronLeft and ChevronRight with ChevronLeftIcon and ChevronRightIcon from lucide-react.
  • Introduced a Chevron component that dynamically renders the appropriate icon based on orientation.
• Removed date-fns from registry.json dependencies, as per react-day-picker's latest requirements.
• Updated documentation to reflect the changes:
  • Adjusted the manual installation guide for users not using the registry CLI.
  • Ensured instructions align with the latest API changes.

Why This Update?

The latest react-day-picker introduced several breaking changes, particularly in how styles and dependencies are handled. This update ensures the Calendar component remains functional and maintains styling consistency while following best practices.

Checklist:

• Upgraded react-day-picker to 9.5.1 and refactored usage.
• Updated class names to match new styling conventions. (Source: https://daypicker.dev/upgrading#3-update-the-class-names)
• Refactored icon handling to align with the new changes of the package. (Source: https://daypicker.dev/upgrading#7-update-your-custom-components)
• Removed unnecessary dependencies (date-fns). (Source: https://daypicker.dev/upgrading#1-upgrade-to-the-latest-version)
• Verified component functionality (pnpm --filter=www dev).
• Updated documentation for manual installation.
• Passed all tests (pnpm test).

Impact:

This update ensures the Calendar component remains compatible with the latest react-day-picker, aligns with the latest best practices. Let me know if any further refinements are needed!

[vercel]

@HichemTab-tech is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[bai]

Thanks @HichemTab-tech, this is very welcome!

[HichemTab-tech]

Thanks @HichemTab-tech, this is very welcome!

Thanks, glad to hear that ;)

[adiramardiani]

Hi @HichemTab-tech
Can you add some new feature about year / month selector ?
I think this is very use full, and this PR is the change to add this feature

I see some other PR #4421

Have ability to do this, may you can implement to (add give applause to all another PR)

Image credit to @flixlix

or
Demo: https://shadcn-calendar-v9-m9mh.vercel.app/
Repo: https://github.com/mateusz-kifner/shadcn-calendar-v9
credit to @mateusz-kifner

[HichemTab-tech]

Hi @HichemTab-tech Can you add some new feature about year / month selector ? I think this is very use full, and this PR is the change to add this feature

I see some other PR #4421

Have ability to do this, may you can implement to (add give applause to all another PR)

Image credit to @flixlix

or Demo: https://shadcn-calendar-v9-m9mh.vercel.app/ Repo: https://github.com/mateusz-kifner/shadcn-calendar-v9 credit to @mateusz-kifner

@adiramardiani Thanks for the suggestion! I’ll definitely use that, but I think it’s best to keep this in a separate PR, and I’ll start working on it right away.

The reason is that this PR is focused on upgrading the Shadcn Calendar component to support react-day-picker 9.5.1. Version 9 introduced breaking changes, meaning the current component cannot work at all with the latest version. It explicitly requires 8.10.1, which is why I first created a separate PR #6501 to update the documentation and ensure developers don’t install an incompatible version. That PR has already been merged.

Now that the documentation clarifies the version requirement, this PR ensures proper support for 9.5.1, making the component work exactly as it did before. New features can then be introduced in a dedicated PR. This approach keeps things structured—first ensuring compatibility, then adding enhancements.

As we say, compatibility comes first! But I really really appreciate the idea and the references—I’ll start working on it in the feature PR immediately. 🚀

[Obaydahm]

What's the status on this one? 🙏

[dstrygwyr]

@HichemTab-tech Does this issue happen?

Screen.Recording.2025-02-24.at.15.34.20.mov

[HichemTab-tech]

@HichemTab-tech Does this issue happen?

Screen.Recording.2025-02-24.at.15.34.20.mov

Nop, I already fixed it in this PR.

[dstrygwyr]

hmmm 🤔 , use tailwind 4?

[HichemTab-tech]

hmmm 🤔 , use tailwind 4?

Ah you're right, seems like they have a separated build script for the v4, i had to run it manually, thanks for notifiyng me, I fixed it now.

[dstrygwyr]

hi @HichemTab-tech i have fixing some style

<DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col gap-2 relative",
        month: "flex flex-col gap-4",
        month_caption: "flex justify-center pt-1 relative items-center w-full",
        caption_label: "text-sm font-medium",
        nav: "flex items-center gap-1 absolute h-7 w-full z-10",
        button_previous: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
          "absolute left-1",
        ),
        button_next: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
          "absolute right-1",
        ),
        month_grid: "w-full border-collapse space-x-1",
        weekdays: "flex",
        weekday: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
        week: "flex w-full mt-2",
        day: cn(
          "group relative size-8 p-0 text-center text-sm focus-within:relative focus-within:z-20",
        ),
        day_button: cn(
          "size-8 p-0 font-normal aria-selected:opacity-100",
          props.mode === "range"
            ? "group-aria-selected:group-[.day-range-start]:bg-primary group-aria-selected:group-[.day-range-end]:bg-primary group-aria-selected:group-[.day-range-end]:rounded-md group-aria-selected:group-[.day-range-start]:rounded-md"
            : "group-aria-selected:bg-primary group-aria-selected:rounded-md",
        ),
        range_start: "day-range-start rounded-l-md",
        range_end: "day-range-end rounded-r-md",
        selected: "bg-accent text-primary-foreground",
        today:
          "bg-accent text-accent-foreground hover:bg-primary hover:text-primary-foreground rounded-md",
        outside: " text-muted-foreground aria-selected:text-muted-foreground",
        disabled: "text-muted-foreground opacity-50",
        range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
        hidden: "invisible",
        ...classNames,
      }}
      components={{
        Chevron: (props) => {
          if (props.orientation === "left") {
            return <ChevronLeftIcon {...props} />;
          }
          return <ChevronRightIcon {...props} />;
        },
      }}
      {...props}
    />
    

[dstrygwyr]

before

after

[HichemTab-tech]

Thanks @dstrygwyr ;)