reactjs - How to highlight selected day or days in react big calendar
问题描述
I want to create an calendar similar to airbnb and therefore I would like to be able to highlight the selected days in react big calendar.
I have found a similar question, but it doesn't really answer what I need:
How to select multiple days in react-big-calendar
I have tried using onSelectSlot, but it doesn't change the color for example.
<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' } };
};
Does anybody know how I could achieve this?
解决方案
如果还没有解决。请尝试如下。否则,希望它对某人有所帮助。
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)});
}
推荐阅读
- python - ValueError: I/O operation on closed file 为什么会这样?用 python book 自动化无聊的东西
- c - 为什么 FILE 结构总是用指针表示而不是自动变量?
- lua - 如何在 roblox 上获取模型的大小值
- javascript - 给我一些关于如何为 deno 安装liquid.js 库的提示
- php - 如何从数据库中获取数据作为 utf-8 CodeIgniter
- javascript - 按钮上的脉轮 UI colorScheme 道具
- c# - 我收到在 C# 中使用 bool 方法的错误消息
- c# - 如何使用 if-else 语句修复 C# 中的隐式转换错误?
- javascript - const 和 json 的一些问题
- css - 尝试构建 css 时出现 Tailwindcss 错误