如何使用 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对象是一个完整的date/time js Date 广告位 开始时间 的对象。在这些视图中，每小时长块调用此方法的次数由日历的 step 和 timeslots 属性决定。因此，例如，默认的 step 是 30 而 timeslots 是 2，这将通过 HH:00 和 HH:30 这两个日期它被调用的次数（HH 是实际的 24 小时 hour）。如果将其更改为 15 的 step 和 4 的 timeslots，该方法将每小时调用四次，每次增加十五分钟。您必须使用自己的日期数学来确定正在调整的插槽单元格。

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

How can I color a specific day with specific time with slotPropGetter of react-big-calendar?

javascript

fullcalendar

reactjs

react-big-calendar