我如何使用react-big-calendar的slotPropGetter在特定的时间为特定的一天着色?

问题描述 投票:2回答:1

我有一个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
                        }
                      }
                    }
                  }
                }

[运行时,似乎所有日子都是彩色的,但是我只想根据信息的startend进行着色。

我该如何解决?

javascript reactjs fullcalendar react-big-calendar
1个回答
0
投票

slotPropGetter方法在timeslotDay视图中渲染每个单独的Week时被调用,并且传递的date对象是starting]的完整日期/时间js Date对象时间。在这些视图中,每个小时长的块被调用此方法的次数取决于日历的steptimeslots属性。因此,例如,默认的step30timeslots2,这将两次传递带有HH:00HH:30的日期(HH是实际的24小时hour)。如果将其更改为step15timeslots4,则该方法将每小时被调用四次,每次增加十五分钟。您将必须使用自己的日期数学来确定要调整的插槽单元。

© www.soinside.com 2019 - 2024. All rights reserved.