Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add class names allowing for styling specific weekday tile headers #967

Open
1 task done
tilden opened this issue Jan 1, 2025 · 0 comments
Open
1 task done

Add class names allowing for styling specific weekday tile headers #967

tilden opened this issue Jan 1, 2025 · 0 comments
Labels
enhancement New feature or request

Comments

@tilden
Copy link

tilden commented Jan 1, 2025

Before you start - checklist

  • I have checked if this feature request is not already reported

Description

I'm working on a calendar app where I want Sundays to be highlighted in red and Saturdays to be highlighted in blue (this is fairly typical design for physical calendars in Japan).

For the day tiles themselves, the tileClassName prop makes it fairly easy to apply this custom styling to Saturdays/Sundays. However, as far as I can tell, there's no way to add a custom style to the title row (react-calendar__month-view__weekdays).

The closest provided class is react-calendar__month-view__weekdays__weekday--weekend, which allows me to style the weekend tile headers with a different color than weekdays. However, there's no differentiation between Sunday and Saturday with this class alone. I can attempt target Saturdays with Nth child selectors, but this doesn't work properly if the user's locale specifies weeks starting on Monday instead of Sunday (or vice-versa).

Proposed solution

Add targetable class names to the weekdays header tiles that uniquely identify each day. Something like react-calendar__month-view__weekdays--day0, etc. The numbers could just be the ones coming from Date.prototype.getDay() for consistency with other JS date functions. (Where "day 0" is always Sunday and "day 6" is always Saturday.).

Alternatives

Alternatively, there could be a prop that functions like tileClassName, but for header tiles.

Additional information

Example of the visual I'm trying to achieve:

image
@tilden tilden added the enhancement New feature or request label Jan 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant