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

【问题标题】：React Big Calendar style dates which have events反应有事件的大日历样式日期
【发布时间】：2019-01-09 07:37:17
【问题描述】：

我想更改月历视图中包含事件的日期样式。

这是我正在开发的设计：

所以我需要将每个日期的.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 与日期单元格位于不同的父级中。我不想遍历/操作 DOM 来设置这些单元格的样式。

肯定有一种方法来设置日期单元格的样式吗？我在 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>

【问题讨论】：

你试过什么代码？您引用的复杂 HTML 应该在问题本身中。运行代码总是比一个段落好。克隆 codesandbox.io/s/jp1931172w 并解释您尝试过的方法以及它是如何不起作用的。
@JuanMendes 我已经尝试创建一个自定义日期单元格，方法与代码框中显示的相同，我也尝试过自定义插槽道具和 eventPropgetter，但无法直接操作 .rbc 的呈现-date-cell
样式是通过特殊的类名还是使用 style={} 添加的因此。例如<div className={"rbc-date-cell " + (hasEvent ? 'specialStyleClass' : '')}>.
@Muljayan 更新了我的问题以显示事件标记
您是手动生成这些代码还是通过日历日期列表生成这些代码？还有一个状态或道具给出哪些日期有事件？

标签： reactjs customization react-big-calendar

【解决方案1】：

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

【讨论】：

谢谢@SerenityTn！！！这正是我想要的。这不在文档中