2

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

This is the design I'm developing:

enter image description here

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>
row
Pixelomo
  • 6,373
  • 4
  • 47
  • 57
  • What code have you tried? The complex HTML you refer to should be in the question itself. Running code is always better than a paragraph. Clone https://codesandbox.io/s/jp1931172w and explain what you have tried and how it's not working. – Ruan Mendes Jan 15 '19 at 00:19
  • @JuanMendes I have tried creating a custom date cell the same way as shown in that codesandbox, I've also tried custom slot props and eventPropgetter but have not been able to directly manipulate the rendering of .rbc-date-cell – Pixelomo Jan 15 '19 at 02:12
  • Is the styling added via a special class name or using style={} either way i think you can do a check if each of the rendered cells have an event and if so change the style , class name accordingly. For example `
    `.
     – Muljayan Jan 16 '19 at 02:15
  • @Muljayan updated my question to show events markup – Pixelomo Jan 16 '19 at 02:29
  • Are you generating these codes manually or over a list of calendar date ? Also is there a state or prop which gives which dates have events ? – Muljayan Jan 16 '19 at 04:09
  • @Muljayan these are generated by the react-big-calendar plugin, I pass an events prop which generates the events `events={this.state.events}` – Pixelomo Jan 16 '19 at 04:51

1 Answers1

6

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

SerenityTn
  • 171
  • 3
  • 11