How to modify the css style of each event on FullCalendar during the event rendering?

Question

I am using FullCalendar v5 plugin to show events on a calendar. I am trying to find a way to alter the element by adding some styling.

In versions 4 there is a function called eventRender: function (event, element) {} that would allow me to do exactly that. However, that function does not seem to exist in version 5.

How can I FullCalendar v5 to manipulate the event element during the rending process?

Answer 1

If you look into the documentation for migration from v4 to v5, you will find the answer.

https://fullcalendar.io/docs/upgrading-from-v4

eventRender: Use the new event render hooks instead

So using v5, what is ideal for you is to use eventDidMount

For example

document.addEventListener('DOMContentLoaded', function () {
    var calendarEventsEl = document.getElementById('calendar-events');

    calendarEvents = new FullCalendar.Calendar(calendarEventsEl, {
        headerToolbar: false,
        contentHeight: 300,
        ...
        eventDidMount: function (arg) {
          // customize an event element here
        }
        ...