I am updating my Fullcalendar install to V4. I am feeding mine via JSON and I have HTML (some FontAwsome Icons) in my event title. Here is my old V3 code to render my elements:

$(function() {
  $('#calendars').fullCalendar({
    events: '/activities/calendar.json',
    contentHeight: 750,
    displayEventTime: false,
    header: {
      left: '',
      center: 'title',
      right: 'today prev,next'
    },
    businessHours: {
      dow: [1, 2, 3, 4, 5]
    },
    handleWindowResize: true,
    eventLimit: 2,
    eventLimitClick: 'popover',
    eventRender: function(event, element) {
      element.find('.fc-title').html(event.title);
    }
  });
});

The eventRender: is what fails. The new docs don't clearly explain how I my convert this to the new version. With this code in place my calendar simply fails to load with json parse error in the console. If I remove it it works but my HTML is rendered as plain text. I am sure I am missing something obvious and easy here. My JS skill set is not that great.

I am updating my Fullcalendar install to V4. I am feeding mine via JSON and I have HTML (some FontAwsome Icons) in my event title. Here is my old V3 code to render my elements:

$(function() {
  $('#calendars').fullCalendar({
    events: '/activities/calendar.json',
    contentHeight: 750,
    displayEventTime: false,
    header: {
      left: '',
      center: 'title',
      right: 'today prev,next'
    },
    businessHours: {
      dow: [1, 2, 3, 4, 5]
    },
    handleWindowResize: true,
    eventLimit: 2,
    eventLimitClick: 'popover',
    eventRender: function(event, element) {
      element.find('.fc-title').html(event.title);
    }
  });
});

The eventRender: is what fails. The new docs don't clearly explain how I my convert this to the new version. With this code in place my calendar simply fails to load with json parse error in the console. If I remove it it works but my HTML is rendered as plain text. I am sure I am missing something obvious and easy here. My JS skill set is not that great.

• javascript
• fullcalendar
• fullcalendar-4

• 1 Can you show precisely what you've done for V4 please, and specifically what the exact error is? In the meantime here's a simple example of how to use eventRender specifically in v4, maybe that will help you without needing to share further info with us: stackoverflow./questions/56033273/… – ADyson Commented Mar 31, 2020 at 8:51
• That was pretty much what I found in on of the issues on GitHub. I wish I had e across your post earlier. Thanks for the ment. – Dan Tappin Commented Mar 31, 2020 at 14:59

3 Answers 3

As of FullCalendar v5 you can use eventContent.

document.addEventListener('DOMContentLoaded', function() {
   let calendarEl = document.getElementById('calendar');
   let calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth',
            
      events: [
            {
                "id": 1,
                "title": "First Line<br>Second Line",
                "start": "2022-06-04",
                "end": null,
                "allDay": true,
                "editable": true,
                "className": "badge-soft-warning",
           
            }
        ],

      eventContent: function( info ) {
          return {html: info.event.title};
      }

    });
    calendar.render();
})

After some stubmling around I found this:

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('timeline');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      events: '/activities/timeline.json',
      plugins: [ 'resourceTimeline', 'interaction' ],
      header: {
        left: 'prev,today,next',
        center: 'title',
        right: 'resourceTimelineWeek,resourceTimelineMonth,resourceTimelineYear, '
      },
      eventRender: function(info) {
        info.el.querySelectorAll('.fc-title')[0].innerHTML = info.el.querySelectorAll('.fc-title')[0].innerText;
      }
    });

    calendar.render();
  });

I am open to alternate cleaner answers.

With FullCalendar v6 I used the following solution:

document.addEventListener('DOMContentLoaded', function () {
    let calendarEl = document.getElementById('calendar');
    let calendar = new FullCalendar.Calendar(calendarEl, {
        initialView: 'dayGridMonth',

        events: [{
            "title": "First Line<br>Second Line",
            "start": "2024-05-09T11:00:00.000Z",
            "end": "2024-05-09T13:00:00.000Z",
        }],

        eventDidMount: function (info) {
            //month, weeek and day timeview
            var _title = info.el.querySelectorAll('.fc-event-title')[0];
            if (_title) {
                _title.innerHTML = info.event.title;
            }
            else {
                //listview/agenda
                var _list_event_title = info.el.querySelectorAll('.fc-list-event-title')[0];
                if (_list_event_title) {
                    var _a = $('a', _list_event_title)[0];
                    if(_a) {
                    _a.innerHTML = info.event.title;
                    }
                }
            
            }

        }); 
        calendar.render();
});