Change color of react-big-calendar events
Sorry, I haven't read the documentation really well. It can be done with the help of eventPropGetter
attribute. I've made it like this:
eventStyleGetter: function(event, start, end, isSelected) { console.log(event); var backgroundColor = '#' + event.hexColor; var style = { backgroundColor: backgroundColor, borderRadius: '0px', opacity: 0.8, color: 'black', border: '0px', display: 'block' }; return { style: style };},render: function () { return ( <Layout active="plan" title="Planning"> <div className="content-app fixed-header"> <div className="app-body"> <div className="box"> <BigCalendar events={this.events} defaultDate={new Date()} defaultView='week' views={[]} onSelectSlot={(this.slotSelected)} onSelectEvent={(this.eventSelected)} eventPropGetter={(this.eventStyleGetter)} /> </div> </div> </div> </Layout> );}
Additional tip on how to style different kinds of events: In the myEvents
array of event objects, I gave each object a boolean property isMine
, then I defined:
<BigCalendar // other props here eventPropGetter={ (event, start, end, isSelected) => { let newStyle = { backgroundColor: "lightgrey", color: 'black', borderRadius: "0px", border: "none" }; if (event.isMine){ newStyle.backgroundColor = "lightgreen" } return { className: "", style: newStyle }; } }/>
This solution is simple !
eventPropGetter={(event) => { const backgroundColor = event.allday ? 'yellow' : 'blue'; return { style: { backgroundColor } }}}
change the condition according to your need and it is done.