javascript - 在 fullCalendar 4 和 React 中设置 eventRender

Question

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

    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: []
    };