在fullCalendar 4和React中设置eventRender

Question

在与jquery一起使用的fullCalendar中，我有这个事件Render:

eventRender: function (event, element, view) {
if (event.finito == 0) {
element.css('background-color', '#FF0000');
}
},

我正试图用React设置同样的东西。我试过了，但不起作用：我还尝试了在网上和官方网站上找到的其他各种代码示例，但都不起作用。

customEventRender = info => {
info.el.className = "red";
info.el.children[0].className = "red";
return info.el
};
<FullCalendar events={this.state.events}
weekends={true}
options={this.state.fullcalendarOptions}
eventRender={this.customEventRender}
>
</FullCalendar>

Answer 1

我找到了这个解决方案。

在fullCalendar 4中，自定义属性存储在事件对象的extendedProps属性中(请参阅https://fullcalendar.io/docs/event-parsing)。

this.state = {
fullcalendarOptions: {
plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
firstDay: 1,
editable: false,
defaultDate: new Date(),
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
eventClick: (info) => {
console.log(info.event.id);
// document.location.href = 'up.php?id=' + calEvent.id;
},
eventRender: function (info) {
if (info.event.extendedProps.finito == 0) {
info.el.style.backgroundColor = "#FF0000";
}
}
},
events: []
};