CODEWITHSUNDEEP
javascriptreactjsfullcalendarfullcalendar-4
matteo
matteo

Reputation: 2401

Set eventRender in fullCalendar 4 and React

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>

Upvotes: 5

Views: 3116

Answers (1)

matteo
matteo

Reputation: 2401

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

Upvotes: 1

Related Questions