[bug]: Calendar not work : the style is not applying

[jercomio]

Describe the bug

The Shadcn style does not applying when I use this component in Nextjs 14.2.14. And if I try to re-install component, I have this error in the terminal :

npx shadcn@latest add calendar
✔ Checking registry.
⠴ Installing dependencies.
Something went wrong. Please check the error below for more details.
If the problem persists, please open an issue on GitHub.

Command failed with exit code 1: npm install [email protected] date-fns @radix-ui/react-slot
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/date-fns
npm ERR!   date-fns@"^4.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer date-fns@"^2.28.0 || ^3.0.0" from [email protected]
npm ERR! node_modules/react-day-picker
npm ERR!   react-day-picker@"8.10.1" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 

I have this dependancies : "date-fns": "^4.1.0", "react-day-picker": "^9.4.4",

Affected component/components

Calendar

How to reproduce

1. npx shadcn@latest add calendar

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

MacOS 11.7.10, Arc browser

Before submitting

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

[huybuidac]

Shadcn does not use the latest Calendar component. You should consider using an alternative component like this.

https://github.com/huybuidac/shadcn-datetime-picker https://shadcn-datetime-picker-pro.vercel.app/

[francescotau]

Same issue. React DayPicker 9.4.4 introduced timezone support.

[jercomio]

Shadcn does not use the latest Calendar component. You should consider using an alternative component like this.

https://github.com/huybuidac/shadcn-datetime-picker https://shadcn-datetime-picker-pro.vercel.app/

Yes, thanks to this alternative. It works !

[olegshilov]

Same issue here

ps: downgrade to 8.x still works

pnpm add [email protected]

[huybuidac]

Same issue. React DayPicker 9.4.4 introduced timezone support.

@francescotau If you need timezone support, this component can help: https://shadcn-datetime-picker-pro.vercel.app/?path=/story/datetimepicker--timezone&args=timezone:UTC

[hirenchauhan2]

@shadcn any plans to fixing this? I was scratching my head as to what's wrong with my code and shadcn docs, they look the same and yet I don't see the same styles 🤯.

As mentioned by @olegshilov, downgrading the react-day-picker to 8.x works; but, it will give warning/error for peer deps for date-fns library depending on the package manager.

Thanks for the great work on this btw. Enjoy the holidays!

[francescotau]

Same issue. React DayPicker 9.4.4 introduced timezone support.

@francescotau If you need timezone support, this component can help: https://shadcn-datetime-picker-pro.vercel.app/?path=/story/datetimepicker--timezone&args=timezone:UTC

@huybuidac great work, but I prefer to use official components from the library and avoid external deps.

[sibteali786]

This issue is related with dependencies and for latest react-day-picker or at least v9.10 you can use solution here https://github.com/shadcn-ui/ui/issues/5799

[francescotau]

This issue is related with dependencies and for latest react-day-picker or at least v9.10 you can use solution here

https://github.com/shadcn-ui/ui/issues/5799

Do you know if there are PRs addressing the issue? I would like to avoid creating an extra Calendar component 😢

[dvrfluxchat]

Shadcn does not use the latest Calendar component. You should consider using an alternative component like this.

https://github.com/huybuidac/shadcn-datetime-picker https://shadcn-datetime-picker-pro.vercel.app/

Do you support range queries?

[TheSisb]

You have to update the classNames as they were renamed in v9 of react-daypicker. Here's an example that isn't perfect, but gets you close

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

[ninefloor]

In v9 of react-daypicker, a lot of props names were changed. This is how I made the changes while keeping the existing style as much as possible (though it's not perfect.)

I'm hoping the shadcn team will catch this issue quickly and fix it.

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: React.ComponentProps<typeof DayPicker>) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row 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: "absolute left-0 flex w-full justify-between z-1",
        button_previous: cn(
          buttonVariants({ variant: "outline" }),
          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
        ),
        button_next: cn(
          buttonVariants({ variant: "outline" }),
          "size-7 bg-transparent p-0 opacity-50 hover:opacity-100"
        ),
        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(
          buttonVariants({ variant: "ghost" }),
          "size-8 p-0 font-normal aria-selected:opacity-100",
          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent"
        ),
        range_start:
          "aria-selected:bg-primary aria-selected:text-primary-foreground rounded-l-md",
        range_middle:
          "aria-selected:bg-accent aria-selected:text-accent-foreground",
        range_end:
          "aria-selected:bg-primary aria-selected:text-primary-foreground rounded-r-md",
        selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-none",
        today: "bg-accent text-accent-foreground",
        outside:
          "day-outside text-muted-foreground aria-selected:text-muted-foreground",
        disabled: "text-muted-foreground opacity-50",
        hidden: "invisible",
        ...classNames,
      }}
      components={{
        Chevron: ({ className, orientation, ...props }) => {
          switch (orientation) {
            case "left":
              return <ChevronLeftIcon className="h-4 w-4" {...props} />;
            case "right":
              return <ChevronRightIcon className="h-4 w-4" {...props} />;
            case "up":
              return <ChevronUpIcon className="h-4 w-4" {...props} />;
            case "down":
              return <ChevronDownIcon className="h-4 w-4" {...props} />;
            default:
              return <></>;
          }
        },
      }}
      {...props}
    />
  );
}