我想在有事件的月历视图中更改日期的样式。
这是我正在开发的设计:
所以我需要将.rbc-date-cell
每个日期的样式更改为蓝色。我一直在寻找解决方案的高低,最常见的是我找到为 dateCellWrapper 创建 CustomDateCell 的示例,它将有条件地设置单元格样式,这是我尝试过的一个示例:
React Big Calendar如何在月视图中设置一天的样式
这改变了.rbc-day-bg
not的风格.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>