Change color of react-big-calendar events Change color of react-big-calendar events javascript javascript

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.