8

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

ADyson
  • 57,178
  • 14
  • 51
  • 63
John Greer
  • 83
  • 1
  • 1
  • 4
  • Looking for the equivalent of this in v4 in the eventRender. v2 was: element.find('.fc-content').html( '
    html text or image
    ' );     – John Greer May 08 '19 at 13:17

1 Answers1

25

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

ADyson
  • 57,178
  • 14
  • 51
  • 63
  • This works, but the HTML could sometimes mess with the HTML ouput that fullcalender generates, throwing a "Failure parsing JSON" error (in my case happens when changing view). If anyone else gets this error, I solved adapting this solution https://stackoverflow.com/a/60061879/3075616 – z3d0 May 16 '20 at 11:54