How to change the background color of the event Cells.

[chinmay4github1987]

I am using the below code to change the background color of calendar cells with the eventCellStyle prop, but not getting the colors.

<Calendar
        // ampm={true}
        theme={darkTheme}
        eventCellStyle ={renderCustomEvent(new_events)}
        mode={'month'}
        hideNowIndicator={false}
        startAccessor="start"
        endAccessor="end"
        events={new_events}
        // defaultDate={moment().toDate()}
        height={600}
        swipeEnabled={false}
        showAdjacentMonths={false}
        // defaultDate={date}
        // renderEvent={renderNewEvents()}
        date={date}
      />

  const renderCustomEvent = (eventItem) => {
     const backgroundColor = eventItem.attended ? 'green' : 'red';
     return { style: { backgroundColor } }
  }

[acro5piano]

Your code is wrong. The code should be something like this:

<Calendar
        // ampm={true}
        theme={darkTheme}
        eventCellStyle ={renderCustomEvent}  // <------------ here
        mode={'month'}
        hideNowIndicator={false}
        startAccessor="start"
        endAccessor="end"
        events={new_events}
        // defaultDate={moment().toDate()}
        height={600}
        swipeEnabled={false}
        showAdjacentMonths={false}
        // defaultDate={date}
        // renderEvent={renderNewEvents()}
        date={date}
      />

  const renderCustomEvent = (eventItem) => {
     const backgroundColor = eventItem.attended ? 'green' : 'red';
     return { backgroundColor } // <------------ here
  }