React Big Calendar style dates which have events

Question

I would like to change the style of dates in my month calendar view which have events.

This is the design I'm developing:

So I need to change style of .rbc-date-cell to blue for each date with an event. I have searched high and low for a solution to this, most commonly I find examples for creating a CustomDateCell for dateCellWrapper which will conditionally style cells, here's one example I've tried:

React Big Calendar how to style a single day in the month view

This changes the style of .rbc-day-bg not .rbc-date-cell. The markup on RBC is complex, because the devs made it for events which can stretch over multiple days. This means that the background divs are in a different parent to the datecells. I'd prefer not to traverse/manipulate the DOM to style these cells.

Surely there must be a way to style the datecells? the docs and all answers I've found on SO and github haven't yielded anything so far. Could it be done with eventPropGetter?

EDIT

The HTML is as follows. I've also tried custom slot props and eventPropgetter but have not been able to directly manipulate the rendering of .rbc-date-cell

<div class="rbc-month-row">
  <div class="rbc-row-bg">
    <div class="rbc-day-bg" style="background-color: lightgreen;"></div>
    <div class="rbc-day-bg" style="background-color: lightgreen;"></div>
    <div class="rbc-day-bg rbc-today" style="background-color: lightgreen;"></div>
    <div class="rbc-day-bg" style="background-color: lightblue;"></div>
    <div class="rbc-day-bg" style="background-color: lightblue;"></div>
    <div class="rbc-day-bg" style="background-color: lightblue;"></div>
    <div class="rbc-day-bg" style="background-color: lightblue;"></div>
  </div>
  <div class="rbc-row-content">
    <div class="rbc-row">
      <div class="rbc-date-cell"><a href="#">13</a></div>
      <div class="rbc-date-cell"><a href="#">14</a></div>
      <div class="rbc-date-cell rbc-now rbc-current"><a href="#">15</a></div>
      <div class="rbc-date-cell"><a href="#">16</a></div>
      <div class="rbc-date-cell"><a href="#">17</a></div>
      <div class="rbc-date-cell"><a href="#">18</a></div>
      <div class="rbc-date-cell"><a href="#">19</a></div>
    </div>
  </div>
</div>

rbc-event's exist in a different row to the rbc-date-cell, in this markup there are events on the 23rd and 24th. I don't want to traverse the DOM to conditionally style divs as this isn't a very React way of doing things, it should be done before rendering if possible

<div class="rbc-row-content">
  <div class="rbc-row ">
    <div class="rbc-date-cell"><a href="#">21</a></div>
    <div class="rbc-date-cell"><a href="#">22</a></div>
    <div class="rbc-date-cell"><a href="#">23</a></div>
    <div class="rbc-date-cell"><a href="#">24</a></div>
    <div class="rbc-date-cell"><a href="#">25</a></div>
    <div class="rbc-date-cell"><a href="#">26</a></div>
    <div class="rbc-date-cell"><a href="#">27</a></div>
  </div>
  <div class="rbc-row">
    <div class="rbc-row-segment" style="flex-basis: 28.5714%; max-width: 28.5714%;"> </div>
    <div class="rbc-row-segment" style="flex-basis: 14.2857%; max-width: 14.2857%;"><button class="rbc-event"><div class="rbc-event-content" title="2/2"><p class="event-wrapper">2/2</p></div></button></div>
    <div class="rbc-row-segment" style="flex-basis: 14.2857%; max-width: 14.2857%;"><button class="rbc-event"><div class="rbc-event-content" title="1/1"><p class="event-wrapper">1/1</p></div></button></div>
  </div>
</div>

Answer 1

checkout this sandbox code https://codesandbox.io/s/73ky8rj2qj if that's what you want to achieve so the main idea is to override month dateHeader and then with every dateHeader to render check if its date prop is between any event startDate and endDate and render it with the desired style