I’m using shadcn/ui’s library for a project and it’s going pretty well so far. However, I have an issue with styling the inner parts of the Calendar component, particularly the weekdays head row.
Out of the box, Shadcn’s Calendar component looks like this:
I’m trying to style the calendar weekday head row into this:
Basically my problem is that I can’t find a way to change the “Su” weekday name’s text color to red.
I’ve tried manipulating the classNames object directly in the calendar.tsx file. But so far the only property that I could find that could style the weekday head row is the head_cell property, and that affects all weekday names in the row. I was wondering if there are any other alternatives to styling the weekdays.
Link to the calendar.tsx file in the official shadcn/ui github repository: https://github.com/shadcn-ui/ui/blob/main/apps/www/registry/default/ui/calendar.tsx
nevermind, I found a solution: add the ‘first’ pseudo class from tailwind css to the head_cell property