javascriptfullcalendarfullcalendar-4

FullCalendar display HTML in event title


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.


Solution

  • 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.