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";

[salimdellali]

same issue

[salimdellali]

thanks to migration documentation for react-day-picker to v9 shared by @BayuPrasetyaUtomo , I was able to solve this issue:

If your calendar.tsx file looks like this:

"use client"

import * as React from "react"
import { DayPicker } from "react-day-picker" // v8.10.1

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        caption: "flex justify-center pt-1 relative items-center",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
        ),
        nav_button_previous: "absolute left-1",
        nav_button_next: "absolute right-1",
        table: "w-full border-collapse space-y-1",
        head_row: "flex",
        head_cell:
          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
        row: "flex w-full mt-2",
        cell: 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: cn(
          buttonVariants({ variant: "ghost" }),
          "h-8 w-8 p-0 font-normal aria-selected:opacity-100"
        ),
        day_range_start: "day-range-start",
        day_range_end: "day-range-end",
        day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
        day_today: "bg-accent text-accent-foreground",
        day_outside:
          "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
        day_disabled: "text-muted-foreground opacity-50",
        day_range_middle:
          "aria-selected:bg-accent aria-selected:text-accent-foreground",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ className, ...props }) => (
          <ChevronLeftIcon className={cn("h-4 w-4", className)} {...props} />
        ),
        IconRight: ({ className, ...props }) => (
          <ChevronRightIcon className={cn("h-4 w-4", className)} {...props} />
        ),
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }

Follow these steps:

1. install the latest version for react-day-picker ( switched from "react-day-picker": "^8.10.1" to "react-day-picker": "^9.6.2", at the time of writing this comment )
2. update the calendar.tsx file to be like this

"use client"

import * as React from "react"
import { DayPicker } from "react-day-picker" // v9.6.2

import { cn } from "@/lib/utils"
import { buttonVariants } from "@/components/ui/button"
import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons"

export type CalendarProps = React.ComponentProps<typeof DayPicker>

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: CalendarProps) {
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
        month: "space-y-4",
        month_caption: "flex justify-center pt-1 relative items-center mx-8",
        caption_label: "text-sm font-medium",
        nav: "space-x-1 flex items-center",
        button_previous: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-5 top-5",
        ),
        button_next: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-5 top-5",
        ),
        month_grid: "w-full border-collapse space-y-1",
        weekdays: "flex",
        weekday:
          "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
        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].outside)]:bg-accent/50 [&:has([aria-selected].range_end)]:rounded-r-md",
          props.mode === "range"
            ? "[&:has(>.range_end)]:rounded-r-md [&:has(>.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-8 w-8 p-0 font-normal aria-selected:opacity-100",
        ),
        range_start: "range_start",
        range_end: "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-accent text-accent-foreground rounded-md",
        outside:
          "outside text-muted-foreground aria-selected:bg-accent/50 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: ({ orientation, className, ...props }) => {
          if (orientation === "left") {
            return (
              <ChevronLeftIcon
                className={cn("h-4 w-4", className)}
                {...props}
              />
            )
          }
          return (
            <ChevronRightIcon className={cn("h-4 w-4", className)} {...props} />
          )
        },
      }}
      {...props}
    />
  )
}
Calendar.displayName = "Calendar"

export { Calendar }

Overview on the changes:

• changed the components value from

components={{
        IconLeft: ({ className, ...props }) => (
          <ChevronLeftIcon className={cn("h-4 w-4", className)} {...props} />
        ),
        IconRight: ({ className, ...props }) => (
          <ChevronRightIcon className={cn("h-4 w-4", className)} {...props} />
        ),
      }}

to

components={{
        Chevron: ({ orientation, className, ...props }) => {
          if (orientation === "left") {
            return (
              <ChevronLeftIcon
                className={cn("h-4 w-4", className)}
                {...props}
              />
            )
          }
          return (
            <ChevronRightIcon className={cn("h-4 w-4", className)} {...props} />
          )
        },
      }}

this stopped Typescript complaining

• migrated the old class names to the new ones, as per the migration documentation

• the following nav_button class

nav_button: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"
        ),

became 2 classes: button_next and button-previous

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"
        ),

• because the cheverons where overlaping days on mobile view, I have added absolute left-5 top-5 and absolute left-5 top-5 to button_next and button_previous like this

button_previous: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-5 top-5",
        ),
button_next: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-5 top-5",
        ),

• because the cheverons became non clickable (because they are in absolute position, positioned behind the "March 2025" text at the top of the component, I have added mx-8 to reduce the space taken by the "March 2025" text, so from this

caption: "flex justify-center pt-1 relative items-center",

to this

month_caption: "flex justify-center pt-1 relative items-center mx-8",

• changed props.mode from this

cell: 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"
        ),

to this

day: cn(
          "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].outside)]:bg-accent/50 [&:has([aria-selected].range_end)]:rounded-r-md",
          props.mode === "range"
            ? "[&:has(>.range_end)]:rounded-r-md [&:has(>.range_start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
            : "[&:has([aria-selected])]:rounded-md",
        ),

• removed day- like from this

day_range_start: "day-range-start",
day_range_end: "day-range-end",

to this

range_start: "range_start",
range_end: "range_end",

• lastly, added rounded-md because the date selector was squared, so from this

day_selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
day_today: "bg-accent text-accent-foreground",

to this

selected:
          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-md",
today: "bg-accent text-accent-foreground rounded-md",