fullcalendar.js v4 - How to set html in title?

Question

Does anyone have a solution for getting FullCalendar.js v4 to render the title as html? All the old ways of getting the element and replacing the text with html is not working on the new version. I have tried this below:

eventRender: function(info) {
  return $.parseHTML(info.event.title);

Semi works - the Html is rendered but its missing the rest of the html classes on the event. My guess is it needs the full info object modified but setting this is not working: eventRender: function(info) { info.event.title = info.el.innerText; return info

Answer 1

Since fullCalendar v4 no longer uses jQuery, the HTML element which is supplied during eventRender is now a standard JS DOM element object, as are all elements supplied via v4's callbacks and methods. See https://fullcalendar.io/docs/upgrading-from-v3 for more info.

This means you can use standard JavaScript DOM methods to manipulate it. For example, you could do something like this to make the title display in italics:

eventRender: function(info) {
  info.el.querySelector('.fc-title').innerHTML = "<i>" + info.event.title + "</i>";
}

Demo: https://codepen.io/anon/pen/XwmgLR?editors=1010