Change the color of calendar dates

[bbeckkk]

I'm using react big calendar and need to change the color of the text for dark mode. The background color changes of the calendar changes, however the text color of date doesn't change. How to make it work?

const calendarStyle = () => {
    return {
      style: {
        backgroundColor: 'red', //this works
        color: 'green' //but why doesn't this work?
      }
    }
}   

<Calendar
      localizer={localizer}
      events={eventsData}
      startAccessor="start"
      endAccessor="end"
      style={{ height: 500 }}
      views={{ month: true }}
      step={155}
      dayPropGetter={calendarStyle}
/>

Moreover how to change the color of the headers like sun, mon etc and back, next button as well.

[da7a90]

for the days it inherits the color of body if you change the color of body they should change as well

[bladerunner2020]

I would consider this as a bug - dayPropGetter should allow to change the text style. I am trying to change color of text for holidays and I can't...

[RoniqueRicketts]

@da7a90 Yes it works for the body but it doesn't for the Views buttons. How can I access the Views buttons to style them?

[abdul737]

You can change them via passing components with the components prop of the react-big-calendar. For example:

<Calendar
  className={classes.calendar}
  localizer={localizer}
  events={events}
  startAccessor="start"
  endAccessor="end"
  dayPropGetter={getDayProps}
  eventPropGetter={getEventProps}
  components={{
    event: CalendarEvent,
    month: {
      header: HeaderCellContent,
      dateHeader: DateCellContent,
    },
  }}
/>

Example of the HeaderCellContent component:

const HeaderCellContent: React.FC<any> = (props: any) => {
  const { date } = props;
  const classes = useStyles();
  const dayOfWeek = date.getDay();

  const className = dayOfWeek === 0 || dayOfWeek === 6 ? classes.day_weekend : classes.day_working;
  return (
    <Box component="span" className={className}>
      {props.label}
    </Box>
  );
};

With the className or style props in the example above you can pass your own styles to the content of each header cells, and dateHeader is for customizing the content of the calendar days.

I couldn't find much info about components prop but since I'm using typescript I found the details through inspecting the types file, I'm including the link below.

References:

• More details about what components you can pass
• Official docs for the components prop

[bartvanandel]

Alternatively, you can include a custom style sheet beside the default calendar style. We are employing a similar solution to apply some custom styling. For instance, the header uses .rbc-header class, date cell header uses .rbc-date-cell > a, and the buttons are in a container div with class .rbc-btn-group.

The custom component approach may be a cleaner approach. Just providing an alternative.