Search code examples
reactjscalendarreact-calendar

react-calendar highlighit only saturdays

I'm using component of react calendar in my react app. My calendar's startWeekDay is Sunday and only Saturday has to be the weekend. So if I use calendarType={'US'} the week starts from Sunday but it highlights both Sundays and Saturdays. I need to highlight only Saturdays and remove highlight from Sundays. I couldn't find any solution for this in react-calendar. Is there any way I can achieve this?

I tried keeping different calendarType provided by the library but there is no calendar type that highlights only Saturdays. I tried to style

I tried to style color for this class which is giving style on weekends but again this gives style to both saturdays and sundays.

.react-calendar__month-view__days__day--weekend{ color: #24272E }

Solution

  • Okay, As I see in the calendar sources there is no option to style it using default settings. You can do the following:

    1. Fork the calendar and highlight it your own way by updating isWeekend function in the dates.ts file.
    2. Use CSS to override default styles. so in the US calendar weekend days can have the following options:
    • Saturday or Sunday
    • be from the current month or a neighboring one(should be gray).

    I have decided to color all weekend days from the current month with black color. After that, I selected all weekends from the current month right after the weekdays and color them with weekend color. You can add CSS below to your app and that should solve your problem

    .react-calendar__month-view__days__day--weekend:not(
    .react-calendar__month-view__days__day--neighboringMonth
  ) {
  color: black !important;
}

.react-calendar__month-view__days__day:not(.react-calendar__month-view__days__day--weekend)
  + .react-calendar__month-view__days__day--weekend:not(
    .react-calendar__month-view__days__day--neighboringMonth
  ) {
  color: #d10000 !important;
}

    So the calendar with CSS looks like this:

    enter image description here