javascriptfullcalendarfullcalendar-4fullcalendar-5

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


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?


Solution

  • 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
            }
            ...