Calender Component

[sachK01]

Hello,

i m using shadcn calender component in to my project, but when i build my project following error occurs in my build, please go through the error and suggest me to resolve the issue i m facing.

src/components/ui/calendar.tsx:62:12 - error TS2322: Type '{ style?: CSSProperties | undefined; children?: ReactNode; className: string; }' is not assignable to type 'IconProps'.
Types of property 'children' are incompatible.
Type 'ReactNode' is not assignable to type 'undefined'.
Type 'null' is not assignable to type 'undefined'.

62 <ChevronLeftIcon className={cn("h-4 w-4", className)} {...props} />
~~~~~~~~~~~~~~~

src/components/ui/calendar.tsx:65:12 - error TS2322: Type '{ style?: CSSProperties | undefined; children?: ReactNode; className: string; }' is not assignable to type 'IconProps'.
Types of property 'children' are incompatible.
Type 'ReactNode' is not assignable to type 'undefined'.
Type 'null' is not assignable to type 'undefined'.

65 <ChevronRightIcon className={cn("h-4 w-4", className)} {...props} />
~~~~~~~~~~~~~~~~

Found 2 errors.

[henkethebenke]

I've got the same problem

[BayuPrasetyaUtomo]

Hi, can you take a look at the version of react-day-picker in your package.json?

There's a breaking change from the previous major version (^8) and the current one (^9).
And as far as I know the shadcn one uses the version ^8

You can refer to the documentation here

if it helps I updated my components to the match latest version, but already made some changes to fit my project.
The structure should already match the latest version

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        dropdowns: "flex justify-around w-full",
        dropdown: cn(
          "text-sm font-medium outline-accent cursor-pointer",
          // uncomment this line if the dropdown color inconsistent with your background color
          // "bg-background",
        ),

        months:
          props.mode !== "single"
            ? "flex flex-col sm:flex-row space-y-4 sm:space-y-0"
            : "",

        month: cn("space-y-3", props.mode !== "single" ? "mx-3" : ""),

        // no visual difference
        // nav: "space-x-1 flex items-center bg-primary",

        // no visual difference
        // month_caption: "flex justify-center pt-1 relative items-center",

        // enable when using month and year dropdown
        caption_label: "hidden",

        // disable when using month and year dropdown
        // caption_label: "text-sm font-medium",

        button_previous: cn(
          buttonVariants({ variant: "outline" }),
          "space-x-1 flex items-center",
          "absolute left-1 top-[0.5625rem]",
          "size-6 bg-transparent p-0 hover:opacity-100",
        ),
        button_next: cn(
          buttonVariants({ variant: "outline" }),
          "space-x-1 flex items-center",
          "absolute right-1 top-[0.5625rem]",
          "size-6 bg-transparent p-0 hover:opacity-100",
        ),
        weekdays: "flex",
        weekday: "text-muted-foreground rounded-md w-9 font-normal text-sm",
        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-9 w-9 p-0 font-normal aria-selected:opacity-100",
        ),

        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 rounded-md",
        today: "bg-secondary rounded-md text-secondary-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={{
        Chevron: ({ ...props }) =>
          props.orientation === "left" ? (
            <ChevronLeft name="w-4 h-4" />
          ) : (
            <ChevronRight name="w-4 h-4" />
          ),
        MonthCaption({ ...props }) {
          return <div className="flex h-4 items-center">{props.children}</div>;
        },
      }}
      {...props}
    />
  );
}
Calendar.displayName = "Calendar";