[bug]: Todays date is not showing when not selected.

[ZzyzxIsAlreadyTaken]

Describe the bug

Todays date is not showing because the text color is the same as the selection box when unselected.

When selected it works as expected:

Affected component/components

Calendar

How to reproduce

1. install Calendar component as per shadcnui documentation
2. implement it in the project
3. see the unexpected behaviour

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Installed in a project using T3 stack - no real css customization at this point. Only background and text color.

Before submitting

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

[Abbasa5251]

Unable to reproduce the issue

[sergi0g]

I am experiencing the same issue. Have you found a solution @ZzyzxIsAlreadyTaken?

[ZzyzxIsAlreadyTaken]

Well kinda. I have messed with the core component and changed colors and styles there directly.

So the error is still there, but not in my current project. Ive done much back and forth because some font colors missmatch some of the background colors. Black on black, white on white light grey on white and so on.

From my examples you see that the text color is black becaus it is todaysdate, but the selection is still kind of black (you can see white around the curved borders, I think it should be white perhaps, or perhaps the text color should stay white still. A bug for sure.

[sergi0g]

Could you please share your code? I'd like to avoid having to debug the CSS manually.

[ZzyzxIsAlreadyTaken]

Yeah. Ive been back and forth with different backgrounds aswell so im not perfectly sure if its working right now. Ill check tomorrow:)

[sergi0g]

To fix the problem, I removed the day_selected and day_today classes and fixed the styles a bit. Here's what I ended up with:

day_selected: "!bg-slate-900 !text-slate-50 hover:!bg-slate-900 hover:!text-slate-50 dark:!bg-slate-50 dark:!text-slate-900 dark:hover:!bg-slate-50 dark:hover:!text-slate-900",
day_today: "bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-50",

I had to use important to override some classes. Here's what it looks like:

I also made some other changes, like switching the ring for an outline and it looks better (the ring caused some faint lines to be shown) Before (look closely at 18):

After:

It isn't identical, but quite close. Here is my final Calendar component:

"use client";

import { buttonVariants } from "@/components/ui/button";
import { cn } from "@/lib/utils";
import { ChevronLeft, ChevronRight } from "lucide-react";
import * as React from "react";
import { DayPicker } from "react-day-picker";

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-slate-500 rounded-md w-9 font-normal text-[0.8rem] dark:text-slate-400",
        row: "flex w-full mt-2",
        cell: "rounded-md p-0 relative [&:has([aria-selected].day-outside)]:bg-slate-100/50 [&:has([aria-selected])]:bg-slate-100 focus-within:relative focus-within:z-20 dark:[&:has([aria-selected].day-outside)]:bg-slate-800/50 dark:[&:has([aria-selected])]:bg-slate-800",
        day: cn(
          buttonVariants({ variant: "ghost" }),
          "size-9 font-normal aria-selected:opacity-100 !ring-offset-0 !ring-0 !outline-offset-2 !outline-2 !outline-slate-200",
        ),
        day_range_end: "day-range-end",
        day_selected: "!bg-slate-900 !text-slate-50 hover:!bg-slate-900 hover:!text-slate-50 dark:!bg-slate-50 dark:!text-slate-900 dark:hover:!bg-slate-50 dark:hover:!text-slate-900",
        day_today: "bg-slate-100 text-slate-900 dark:bg-slate-800 dark:text-slate-50",
        day_outside:
          "day-outside text-slate-500 opacity-50 aria-selected:bg-slate-100/50 aria-selected:text-slate-500 aria-selected:opacity-30 dark:text-slate-400 dark:aria-selected:bg-slate-800/50 dark:aria-selected:text-slate-400",
        day_disabled: "text-slate-500 opacity-50 dark:text-slate-400",
        day_range_middle:
          "aria-selected:bg-slate-100 aria-selected:text-slate-900 dark:aria-selected:bg-slate-800 dark:aria-selected:text-slate-50",
        day_hidden: "invisible",
        ...classNames,
      }}
      components={{
        IconLeft: ({ ...props }) => (
          <ChevronLeft className="h-4 w-4" {...props} />
        ),
        IconRight: ({ ...props }) => (
          <ChevronRight className="h-4 w-4" {...props} />
        ),
      }}
      {...props}
    />
  );
}
Calendar.displayName = "Calendar";

export { Calendar };

I hope that helps!