更改日历日期的颜色（反应大日历）

Question

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.

Answer 1

Use style property of calendar

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

Answer 2

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