FullCalendar display HTML in event title

Question

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.

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: https://stackoverflow.com/questions/56033273/fullcalendar-js-v4-how-to-set-html-in-title — ADyson, Mar 31 '20 at 08:51
That was pretty much what I found in on of the issues on GitHub. I wish I had come across your post earlier. Thanks for the comment. — Dan Tappin, Mar 31 '20 at 14:59

Fevzi Altay Güvenli · Answer 1 · 2022-06-04T04:53:59.507

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();
})

Please add supporting details to your answer to improve it. – Ethan Jun 06 '22 at 15:01 — Ethan, Jun 06 '22 at 15:01

score 1 · Accepted Answer · answered Mar 31 '20 at 14:57

1

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.

answered Mar 31 '20 at 14:57

Dan Tappin

2,692
3
37
77

this looks like it would just replace the text with itself?? – ADyson Mar 31 '20 at 15:49
It does work - without this the html is rendered as text i.e. "\span text\". – Dan Tappin Apr 01 '20 at 15:20
oh I see, I didn't realise you had HTML in your title, I see now you mentioned it in the question but didn't see it as significant to the issue at the time. – ADyson Apr 01 '20 at 15:27

FullCalendar display HTML in event title

2 Answers2