ui feat(calendar): upgrade react-day-picker to v9.6.1 and customize component

feat(calendar): upgrade react-day-picker to v9.6.1 and customize component

Upgraded react-day-picker from v8.7.1 to v9.6.1 for improved performance and compatibility
Refactored and customized the Calendar component to enhance functionality and UI
Ensured seamless integration with existing features and maintained backward compatibility

Mar 11 '25 05:03 LeonardoSeptaVN

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

A member of the Team first needs to authorize it.

Mar 11 '25 05:03 vercel[bot]

I reviewed the code carefully.

It seems that two modifications are needed in both 'calendar.tsx'

Before

<MonthGrid
  children={children}
  className={className}
  displayYears={displayYears}
  startMonth={startMonth}
  endMonth={endMonth}
  navView={navView}
  setNavView={setNavView}
  {...props}
/>

After

<MonthGrid
  className={className}
  displayYears={displayYears}
  startMonth={startMonth}
  endMonth={endMonth}
  navView={navView}
  setNavView={setNavView}
  {...props}
>
  {children}
</MonthGrid>

This change follows the ESLint rule: "Do not pass children as props. Instead, nest children between the opening and closing tags."

Before

Nav: ({ className }) => (
  <Nav
    className={className}
    displayYears={displayYears}
    navView={navView}
    setDisplayYears={setDisplayYears}
    startMonth={startMonth}
    endMonth={endMonth}
    onPrevClick={onPrevClick}
  />
),

After

Nav: ({ className }) => (
  <Nav
    className={className}
    displayYears={displayYears}
    navView={navView}
    setDisplayYears={setDisplayYears}
    startMonth={startMonth}
    endMonth={endMonth}
    onPrevClick={onPrevClick}
    onNextClick={onNextClick}
  />
),

It looks like onNextClick was mistakenly omitted from the props.

Thank you!

Mar 12 '25 08:03 TeTedo

Any updates on when this will be merged?

Mar 17 '25 16:03 Shaker-Hamdi

@LeonardoSeptaVN I tried your PR on my newly created project, it works great. I noticed a small bug in the "range" selection. The first click to select the "from" works, the second click to select the "to" doesn't work, and the third click however works. I tried that behaviour many times and I can confirm it.

Mar 17 '25 19:03 Shaker-Hamdi

I reviewed the code carefully.

It seems that two modifications are needed in both 'calendar.tsx'

Before

<MonthGrid
  children={children}
  className={className}
  displayYears={displayYears}
  startMonth={startMonth}
  endMonth={endMonth}
  navView={navView}
  setNavView={setNavView}
  {...props}
/>

After

<MonthGrid
  className={className}
  displayYears={displayYears}
  startMonth={startMonth}
  endMonth={endMonth}
  navView={navView}
  setNavView={setNavView}
  {...props}
>
  {children}
</MonthGrid>

This change follows the ESLint rule: "Do not pass children as props. Instead, nest children between the opening and closing tags."

Before

Nav: ({ className }) => (
  <Nav
    className={className}
    displayYears={displayYears}
    navView={navView}
    setDisplayYears={setDisplayYears}
    startMonth={startMonth}
    endMonth={endMonth}
    onPrevClick={onPrevClick}
  />
),

After

Nav: ({ className }) => (
  <Nav
    className={className}
    displayYears={displayYears}
    navView={navView}
    setDisplayYears={setDisplayYears}
    startMonth={startMonth}
    endMonth={endMonth}
    onPrevClick={onPrevClick}
    onNextClick={onNextClick}
  />
),

It looks like onNextClick was mistakenly omitted from the props.

Thank you!

I reviewed the code carefully.

It seems that two modifications are needed in both 'calendar.tsx'

Before

<MonthGrid
  children={children}
  className={className}
  displayYears={displayYears}
  startMonth={startMonth}
  endMonth={endMonth}
  navView={navView}
  setNavView={setNavView}
  {...props}
/>

After

<MonthGrid
  className={className}
  displayYears={displayYears}
  startMonth={startMonth}
  endMonth={endMonth}
  navView={navView}
  setNavView={setNavView}
  {...props}
>
  {children}
</MonthGrid>

This change follows the ESLint rule: "Do not pass children as props. Instead, nest children between the opening and closing tags."

Before

Nav: ({ className }) => (
  <Nav
    className={className}
    displayYears={displayYears}
    navView={navView}
    setDisplayYears={setDisplayYears}
    startMonth={startMonth}
    endMonth={endMonth}
    onPrevClick={onPrevClick}
  />
),

After

Nav: ({ className }) => (
  <Nav
    className={className}
    displayYears={displayYears}
    navView={navView}
    setDisplayYears={setDisplayYears}
    startMonth={startMonth}
    endMonth={endMonth}
    onPrevClick={onPrevClick}
    onNextClick={onNextClick}
  />
),

It looks like onNextClick was mistakenly omitted from the props.

Thank you!

use this

"use client";

import * as React from "react";
import { DayPicker, getDefaultClassNames } from "react-day-picker";

import { cn } from "@/lib/utils";
import { buttonVariants } from "./button";
// import "react-day-picker/style.css";

function Calendar({
  className,
  classNames,
  showOutsideDays = true,
  ...props
}: React.ComponentProps<typeof DayPicker>) {
  const defaultClassNames = getDefaultClassNames();
  return (
    <DayPicker
      showOutsideDays={showOutsideDays}
      className={cn("p-3", className)}
      classNames={{
        months: `relative flex ${defaultClassNames.month}`,
        month_caption: `relative mx-10 flex h-7 items-center justify-center ${defaultClassNames.month_caption}`,
        weekdays: cn("flex flex-row", classNames?.weekdays),
        weekday: cn(
          "w-8 text-sm font-normal text-muted-foreground",
          classNames?.weekday
        ),
        month: cn("w-full", classNames?.month),

        caption_label: cn(
          "truncate text-sm font-medium",
          classNames?.caption_label
        ),
        button_next: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute right-1 [&_svg]:fill-foreground",
          classNames?.button_next
        ),
        button_previous: cn(
          buttonVariants({ variant: "outline" }),
          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute left-1 [&_svg]:fill-foreground",
          classNames?.button_previous
        ),
        nav: cn("flex items-start", classNames?.nav),
        month_grid: cn("mx-auto mt-4", classNames?.month_grid),
        week: cn("mt-2 flex w-max items-start", classNames?.week),
        day: cn(
          "flex size-8 flex-1 items-center justify-center p-0 text-sm",
          classNames?.day
        ),
        day_button: cn(
          "size-8 rounded-md p-0 font-normal transition-none aria-selected:opacity-100",
          classNames?.day_button
        ),
        range_start: cn(
          "bg-accent [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground day-range-start rounded-s-md",
          classNames?.range_start
        ),
        range_middle: cn(
          "bg-accent !text-foreground [&>button]:bg-transparent [&>button]:!text-foreground [&>button]:hover:bg-transparent [&>button]:hover:!text-foreground",
          classNames?.range_middle
        ),
        range_end: cn(
          "bg-accent [&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground day-range-end rounded-e-md",
          classNames?.range_end
        ),
        selected: cn(
          "[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground",
          classNames?.selected
        ),
        today: cn(
          "[&>button]:bg-accent [&>button]:text-accent-foreground",
          classNames?.today
        ),
        outside: cn(
          "day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
          classNames?.outside
        ),
        disabled: cn("text-muted-foreground opacity-50", classNames?.disabled),
        hidden: cn("invisible flex-1", classNames?.hidden),
        ...classNames,
      }}
      {...props}
    />
  );
}
Calendar.displayName = "Calendar";

export { Calendar };

Mar 19 '25 22:03 jsdev-robin

Would be awesome if this could be merged and released in a future version!

Apr 11 '25 20:04 olafghanizadeh

This is fixed now. Thanks @LeonardoSeptaVN for your work on this.

Oct 26 '25 10:10 shadcn