title: React Big Calendar style dates which have events
body: <p>I would like to change the style of dates in my month calendar view which have events. </p>
  
  <p>This is the design I'm developing:</p>
  
  <p><a href="https://i.stack.imgur.com/vGhlH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vGhlH.png" alt="enter image description here"></a></p>
  
  <p>So I need to change style of <code>.rbc-date-cell</code> 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:</p>
  
  <p><a href="https://stackoverflow.com/questions/49921832/react-big-calendar-how-to-style-a-single-day-in-the-month-view">React Big Calendar how to style a single day in the month view</a></p>
  
  <p>This changes the style of <code>.rbc-day-bg</code> not <code>.rbc-date-cell</code>. 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.</p>
  
  <p><strong>Surely there must be a way to style the datecells?</strong> the docs and all answers I've found on SO and github haven't yielded anything so far. Could it be done with <code>eventPropGetter</code>?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>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</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="rbc-month-row"&gt;
    &lt;div class="rbc-row-bg"&gt;
      &lt;div class="rbc-day-bg" style="background-color: lightgreen;"&gt;&lt;/div&gt;
      &lt;div class="rbc-day-bg" style="background-color: lightgreen;"&gt;&lt;/div&gt;
      &lt;div class="rbc-day-bg rbc-today" style="background-color: lightgreen;"&gt;&lt;/div&gt;
      &lt;div class="rbc-day-bg" style="background-color: lightblue;"&gt;&lt;/div&gt;
      &lt;div class="rbc-day-bg" style="background-color: lightblue;"&gt;&lt;/div&gt;
      &lt;div class="rbc-day-bg" style="background-color: lightblue;"&gt;&lt;/div&gt;
      &lt;div class="rbc-day-bg" style="background-color: lightblue;"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="rbc-row-content"&gt;
      &lt;div class="rbc-row"&gt;
        &lt;div class="rbc-date-cell"&gt;&lt;a href="#"&gt;13&lt;/a&gt;&lt;/div&gt;
        &lt;div class="rbc-date-cell"&gt;&lt;a href="#"&gt;14&lt;/a&gt;&lt;/div&gt;
        &lt;div class="rbc-date-cell rbc-now rbc-current"&gt;&lt;a href="#"&gt;15&lt;/a&gt;&lt;/div&gt;
        &lt;div class="rbc-date-cell"&gt;&lt;a href="#"&gt;16&lt;/a&gt;&lt;/div&gt;
        &lt;div class="rbc-date-cell"&gt;&lt;a href="#"&gt;17&lt;/a&gt;&lt;/div&gt;
        &lt;div class="rbc-date-cell"&gt;&lt;a href="#"&gt;18&lt;/a&gt;&lt;/div&gt;
        &lt;div class="rbc-date-cell"&gt;&lt;a href="#"&gt;19&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="rbc-row-content"&gt;
    &lt;div class="rbc-row "&gt;
      &lt;div class="rbc-date-cell"&gt;&lt;a href="#"&gt;21&lt;/a&gt;&lt;/div&gt;
      &lt;div class="rbc-date-cell"&gt;&lt;a href="#"&gt;22&lt;/a&gt;&lt;/div&gt;
      &lt;div class="rbc-date-cell"&gt;&lt;a href="#"&gt;23&lt;/a&gt;&lt;/div&gt;
      &lt;div class="rbc-date-cell"&gt;&lt;a href="#"&gt;24&lt;/a&gt;&lt;/div&gt;
      &lt;div class="rbc-date-cell"&gt;&lt;a href="#"&gt;25&lt;/a&gt;&lt;/div&gt;
      &lt;div class="rbc-date-cell"&gt;&lt;a href="#"&gt;26&lt;/a&gt;&lt;/div&gt;
      &lt;div class="rbc-date-cell"&gt;&lt;a href="#"&gt;27&lt;/a&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="rbc-row"&gt;
      &lt;div class="rbc-row-segment" style="flex-basis: 28.5714%; max-width: 28.5714%;"&gt; &lt;/div&gt;
      &lt;div class="rbc-row-segment" style="flex-basis: 14.2857%; max-width: 14.2857%;"&gt;&lt;button class="rbc-event"&gt;&lt;div class="rbc-event-content" title="2/2"&gt;&lt;p class="event-wrapper"&gt;2/2&lt;/p&gt;&lt;/div&gt;&lt;/button&gt;&lt;/div&gt;
      &lt;div class="rbc-row-segment" style="flex-basis: 14.2857%; max-width: 14.2857%;"&gt;&lt;button class="rbc-event"&gt;&lt;div class="rbc-event-content" title="1/1"&gt;&lt;p class="event-wrapper"&gt;1/1&lt;/p&gt;&lt;/div&gt;&lt;/button&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  
  <a href="https://i.stack.imgur.com/v6qFB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/v6qFB.png" alt="row"></a></p>