You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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:
The text was updated successfully, but these errors were encountered:
Before you start - checklist
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:
The text was updated successfully, but these errors were encountered: