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

在slotPropGetter和timeslot视图中渲染各个Day时调用Week方法，并且传递的date对象是完整日期/时间js Date对象表示广告位的开始时间。在这些视图中，每小时每小时的块调用此方法的次数取决于日历的step和timeslots属性。因此，例如，默认的step是30，而timeslots是2，这将通过日期与HH:00和HH:30两者它被称为（HH是实际的24小时hour）。如果将其更改为step的{{1}}和15的{{1}}，则每小时将调用该方法4次，每次增加15分钟。您必须使用自己的日期数学来确定要调整的插槽单元。

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

1 个答案: