React Big Calendar how to style a single day in the month view

Question

So as seen on the picture, I want to style individual events.

Example of how it should look

With the slotpropgetter it\'s possible to conditionally render styles

Answer 1

The components prop can be used to individually change how parts of the calendar are rendered:

import React, {Children} from 'react';
import BigCalendar from 'react-big-calendar';
import moment from 'moment';

BigCalendar.momentLocalizer(moment);

const CURRENT_DATE = moment().toDate();

// example implementation of a wrapper
const ColoredDateCellWrapper = ({children, value}) =>
    React.cloneElement(Children.only(children), {
        style: {
            ...children.style,
            backgroundColor: value < CURRENT_DATE ? 'lightgreen' : 'lightblue',
        },
    });

const MyCalendar = props => (
    

        
    
);

Working Example:

It has the following type definition:

{
  event?: ReactClass,
  eventWrapper?: ReactClass,
  dayWrapper?: ReactClass,
  dateCellWrapper?: ReactClass,
  toolbar?: ReactClass,
  agenda?: {
    date?: ReactClass,
    time?: ReactClass,
    event?: ReactClass
  },
  day?: {
    header?: ReactClass,
    event?: ReactClass
  },
  week?: {
    header?: ReactClass,
    event?: ReactClass
  },
  month?: {
    header?: ReactClass,
    dateHeader?: ReactClass,
    event?: ReactClass
  }
}