我需要制作一个包含事件的日历,我决定使用react-big-calendar.但我需要制作不同颜色的活动.因此每个事件都有一些类别,每个类别都有相应的颜色.如何通过反应改变事件的颜色?
结果看起来应该是这样的
对不起,我还没有很好地阅读文档.它可以在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 (); }
关于如何设置不同类型事件样式的附加提示:在myEvents
事件对象数组中,我给每个对象一个布尔属性isMine
,然后我定义了:
{
let newStyle = {
backgroundColor: "lightgrey",
color: 'black',
borderRadius: "0px",
border: "none"
};
if (event.isMine){
newStyle.backgroundColor = "lightgreen"
}
return {
className: "",
style: newStyle
};
}
}
/>