反应有事件的大日历样式日期

Question

我想更改具有事件的月份日历视图中日期的样式。

这是我正在开发的设计：

因此，对于每个带有事件的日期，我需要将.rbc-date-cell的样式更改为蓝色。我一直在寻找解决方案，最常见的例子是为dateCellWrapper创建CustomDateCell的示例，该示例将有条件地设置单元格的样式，这是我尝试过的一个示例：

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

这将更改.rbc-day-bg而不是.rbc-date-cell的样式。 RBC上的标记非常复杂，因为开发人员将其标记为可以持续数天的活动。这意味着背景div与datecell在不同的父级中。我不希望遍历/操纵DOM来设置这些单元格的样式。

肯定有一种样式设置datecell的方法吗？到目前为止，我在SO和github上找到的文档和所有答案都还没有得到解决。可以用eventPropGetter完成吗？

编辑

HTML如下。我还尝试了自定义广告位道具和eventPropgetter，但无法直接操作.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与rbc-date-cell存在于不同的行中，在此标记中，事件在23日和24日出现。我不想遍历DOM来有条件地对div进行样式化，因为这不是一种非常React的工作方式，应该在呈现之前完成

<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

签出此沙盒代码https://codesandbox.io/s/73ky8rj2qj 如果这是您要实现的目标，那么主要思想是覆盖月份dateHeader，然后使用每个dateHeader进行渲染，以检查其date道具是否在任何事件startDate和{{1}之间}，并以所需的样式进行渲染