Change color of react-big-calendar events

Question

I need to make a calendar with events and I decided to use react-big-calendar. But I need to make events of different colors. So each event will have some category and each category has corresponding color. How can I change the color of the event with react?

Result should look something like this

Answer 1

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

Answer 2

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