Fullcalendar.js V4 - How To Set Html In Title?

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

Solution 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