Change the color of calendar dates (react big calendar)

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.

score 1 · Answer 1 · answered May 24 '21 at 19:24

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}
/>

answered May 24 '21 at 19:24

Rakhil

11
1

The style prop to ` – Vijay Dev May 25 '21 at 06:59

score 1 · Answer 2 · answered Jun 03 '21 at 05:57

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:

Change the color of calendar dates (react big calendar)

2 Answers2