如何使用 react-big-calendar 的 slotPropGetter 为特定时间的特定日期着色？

Question

我有一个react-big-calendar，我想获得相同的信息，例如日期、开始和结束（作为时间），以便使用 slotPropGetter 为时间和日期槽着色。

我的后台信息是：

    {   "start": "2019-08-23T13:30:00",
        "end": "2019-08-23T18:00:00",
        "rendering": "background",
        "color": "#f740f7"
    }

我尝试使用slotPropGetter：

slotPropGetter={
                (date) => {
                    for(let i =0; i<this.state.eventsPlanning.length; i++) {
                      if(this.state.eventsPlanning[i].rendering === 'background') {
                        let newStyle ={
                          backgroundColor:'red'
                        }
                        return {
                          className: "rbc-day-slot rbc-time-slot",
                          style: newStyle
                        }
                      }
                    }
                  }
                }

当我运行它时，似乎所有的日子都被着色了，但我只想根据信息的start和end着色。

我该如何解决这个问题？

Answer 1

在Day 和Week 视图中渲染每个timeslot 时调用slotPropGetter 方法，传递的date 对象是完整的日期/时间js Date 对象插槽的开始时间。在这些视图中，每小时长块调用此方法的次数取决于您日历的step 和timeslots 属性。因此，例如，默认的step 是30 和timeslots 是2，这将传递一个日期与HH:00 和HH:30 它被调用两次（HH 是实际的 24小时hour)。如果您将其更改为15 的step 和4 的timeslots，则该方法将每小时调用四次，每次递增十五分钟。您必须使用自己的日期数学来确定正在调整哪些槽单元格。