Set eventRender in fullCalendar 4 and React

Question

in fullCalendar used with jquery I have this eventRender:

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

I'm trying to set up the same thing with React. I tried this but it doesn't work: I also tried with other various code examples found online and on the official website, but none of them worked.

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>

re your edit: "UPDATE --- this works" ...if you found the answer, can I request that you please add it in the answers section below, then others can also find it (because questions with answers show up more in search results). You're allowed and encouraged to answer your own questions. You've got enough reputation points to suggest you understand how this site works - there's a section for the question, and the section for the answer. The solution does not belong as part of the question! — ADyson, Mar 25 '20 at 08:58

score 1 · Answer 1 · edited Mar 25 '20 at 10:25

I found this solution.

In fullCalendar 4, custom properties are stored in the extendedProps property of the event object (see 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: []
    };

Set eventRender in fullCalendar 4 and React

1 Answers1