So as seen on the picture, I want to style individual events.
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
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:
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>
}
}