如何在反应大日历中突出显示选定的一天或几天

Question

我想创建一个类似于Airbnb的日历，因此我希望能够在反应大日历中突出显示选定的日期。

我发现了一个类似的问题，但它并没有真正回答我需要什么：

如何在反应大日历中选择多天

我尝试过使用onSelectSlot，但它不会改变颜色。

<Calendar
selectable={true}
popup
localizer={localizer}
events={events}
startAccessor="start"
endAccessor="end"
components={{
dateCellWrapper: ColoredDateCellWrapper
}}
style={{
display: 'flex',
paddingTop: '20px',
height: '75vh',
}}
onSelectSlot={handleSlotSelection}
/>

const handleSlotSelection = ({ start, end, action }) => {
return  { style: { backgroundColor: 'red' } };
};

有谁知道我如何实现这一目标？

Answer 1

如果还没有解决。请尝试如下。否则，希望对某人有所帮助。

ColoredDateCellWrapper = ({ children, value }) =>{
let selDate = this.state.selectedDate;
let valueDay = value.getFullYear()+'/'+value.getMonth()+'/'+value.getDate();
let selDay = '';
if(selDate!==''){
selDay = selDate.getFullYear()+'/'+selDate.getMonth()+'/'+selDate.getDate();
}  
let cellStyle = React.cloneElement(Children.only(children), {
//className:valueDay === selDay ? "yourclassname rbc-day-bg": "rbc-day-bg",
style: {
...children.style,
backgroundColor: valueDay === selDay ? "red": "",
},         
});  
return cellStyle;  
}

handleSlotSelection = (date)=>{      
this.setState({selectedDate:new Date(date.start)});
}