我有一个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
进行着色。
我该如何解决?
slotPropGetter
方法在timeslot
和Day
视图中渲染每个单独的Week
时被调用,并且传递的date
对象是starting]的完整日期/时间js Date
对象时间。在这些视图中,每个小时长的块被调用此方法的次数取决于日历的step
和timeslots
属性。因此,例如,默认的step
为30
,timeslots
为2
,这将两次传递带有HH:00
和HH:30
的日期(HH
是实际的24小时hour
)。如果将其更改为step
的15
和timeslots
的4
,则该方法将每小时被调用四次,每次增加十五分钟。您将必须使用自己的日期数学来确定要调整的插槽单元。