Is there a way to modify the event output rather than re-building it completely with eventContent?

Question

In v3 of fullCalendar, content with HTML entities was rendered correctly in the browser. With fullCalendar v6, it's displayed as-is:

https://codepen.io/brianhogg/pen/LYqBaWz?editors=001

While I've come up with a hacky way to strip out the HTML entities, it looks like the only way to put the newly formatted title is to rebuild all the output from scratch. For example using the solution from this SO thread:

eventContent: function (arg) {
    const txt = document.createElement("textarea");
    const titleElement = document.createElement('div');
    const timeElement = document.createElement('div');
    timeElement.className = 'fc-event-time';
    timeElement.innerHTML = arg.timeText;
    titleElement.className = 'fc-event-title';
    txt.innerHTML = arg.event.title;
    titleElement.innerHTML = txt.value;
    if (arg.event.start.getDate() !== arg.event.end.getDate()) {
        const frameElement = document.createElement('div');
        frameElement.className = 'fc-event-main-frame';
        const titleContainer = document.createElement('div');
        titleContainer.className = 'fc-event-title-container';
        titleElement.className += ' fc-sticky';
        titleContainer.appendChild(titleElement);
        frameElement.appendChild(timeElement);
        frameElement.appendChild(titleContainer);
        return { domNodes: [ frameElement ] };
    }

    return { domNodes: [ timeElement, titleElement ] };
},

This feels pretty fragile and I haven't tested it in all fullCalendar v6 views yet.

Is there a way to get the default eventContent and filter it (ie. replace the value in the .fc-event-title div)? Or another, cleaner way to replicate the functionality in fullCalendar v3 to output the content with the entity rendered?

Answer 1

As per the event render hooks documentation, the eventDidMount callback provides el which is a copy of the HTML element being rendered. So this gives you the starting point that I think you're looking for.

Here's a very simple usage example:

eventDidMount: function(arg) {
  console.log(arg.el);
  arg.el.innerHTML += "hello";
}

Live demo: https://codepen.io/ADyson82/pen/YzBOwPd