Search code examples
javascriptcssreactjsreact-big-calendar

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

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.

slotPropGetter = date => {
    const CURRENT_DATE = moment().toDate();
    let backgroundColor;

    if (moment(date).isBefore(CURRENT_DATE, "month")) {
        backgroundColor = "#f7f8f9";
    }

    var style = {
        backgroundColor
    };
    return {
        style: style
    };
};

So the "solution" is the DateCellWrapper, it either doesn't work for me, or I've implemented it in the wrong way

const DateCellWrapper = ({ value, children }) => {
    console.log("DateCellWrapper")
    const style = {
        backgroundColor: "#000",
    };

    return (
        <div style={style}>{children}</div>
    );
}

It doesn't even output my console.log, so.. anyone an idea? :p

Solution

  • 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 => (
    <div style={{height: '100vh', margin: '10px'}}>
        <BigCalendar
            events={[]}
            startAccessor="startDate"
            endAccessor="endDate"
            components={{
                // you have to pass your custom wrapper here
                // so that it actually gets used
                dateCellWrapper: ColoredDateCellWrapper,
            }}
        />
    </div>
);

    Working Example:

    Edit jp1931172w

    It has the following type definition:

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