Saturday, May 25, 2024
 Popular · Latest · Hot · Upcoming
194
rated 0 times [  197] [ 3]  / answers: 1 / hits: 16525  / 6 Years ago, thu, april 19, 2018, 12:00:00

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


More From » css

 Answers
12

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



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

[#54617] Tuesday, April 17, 2018, 6 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
elliem

Total Points: 415
Total Questions: 117
Total Answers: 94

Location: American Samoa
Member since Fri, Aug 26, 2022
2 Years ago
;