javascript - 如何使用 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
                        }
                      }
                    }
                  }
                }

当我运行它时，似乎所有的日子都是彩色的，但我只想根据信息的开始和结束来着色。

我该如何解决？

Answer 1

在 Day 和 Week View 中呈现每个单独的 timeslot 时调用 slotPropGetter 方法，并且传递的 date 对象是一个完整的日期/时间 js Date 对象，表示广告位的开始时间。在这些 View 中，每小时长 block 调用此方法的次数由日历的 step 和 timeslots 属性决定。因此，例如，默认的 step 是 30 而 timeslots 是 2，这将通过 传递日期code>HH:00 和 HH:30 两次被调用(HH 是实际的 24 小时 hour)。如果您将其更改为 15 的 step 和 4 的 timeslots 该方法将每小时调用四次，每次增加十五分钟。您必须使用自己的日期数学来确定要调整的插槽单元格。