我需要制作一个包含事件的日历,我决定使用react-big-calendar。但我需要制作不同颜色的事件。所以每个事件都会有一些类别,每个类别都有对应的颜色。如何通过react更改事件的颜色?
更改react大日历事件的颜色
IT技术
javascript
reactjs
calendar
2021-05-15 08:45:39
4个回答
抱歉,我没有很好地阅读文档。它可以在eventPropGetter
属性的帮助下完成。我是这样制作的:
eventStyleGetter: function(event, start, end, isSelected) {
console.log(event);
var backgroundColor = '#' + event.hexColor;
var style = {
backgroundColor: backgroundColor,
borderRadius: '0px',
opacity: 0.8,
color: 'black',
border: '0px',
display: 'block'
};
return {
style: style
};
},
render: function () {
return (
<Layout active="plan" title="Planning">
<div className="content-app fixed-header">
<div className="app-body">
<div className="box">
<BigCalendar
events={this.events}
defaultDate={new Date()}
defaultView='week'
views={[]}
onSelectSlot={(this.slotSelected)}
onSelectEvent={(this.eventSelected)}
eventPropGetter={(this.eventStyleGetter)}
/>
</div>
</div>
</div>
</Layout>
);
}
关于如何设置不同类型事件样式的附加提示:在myEvents
事件对象数组中,我给每个对象一个 boolean 属性isMine
,然后我定义:
<BigCalendar
// other props here
eventPropGetter={
(event, start, end, isSelected) => {
let newStyle = {
backgroundColor: "lightgrey",
color: 'black',
borderRadius: "0px",
border: "none"
};
if (event.isMine){
newStyle.backgroundColor = "lightgreen"
}
return {
className: "",
style: newStyle
};
}
}
/>
这个解决方案很简单!
eventPropGetter={(event) => {
const backgroundColor = event.allday ? 'yellow' : 'blue';
return { style: { backgroundColor } }
}}
根据您的需要更改条件并完成。
搜索如何更改事件的边框颜色也将我带到这里,我在其他任何地方都找不到答案,但发现添加以下内容可以解决问题:
border: "black",
borderStyle: "solid"
其它你可能感兴趣的问题