javascripthtmlfullcalendarfullcalendar-6

modify container of event: add HTML after .fc-event-title?

Would like to modify (not: replace) the information displayed in the fullcalendar timegrid week view. So, show time + title, but also show e.g. the attendees and location (available as extendedProps).

In Fullcalendar v6 I can use content injection to completely replace the content.
E.g. eventContent: { html: '<b>hello</b>' }.
Time and title (and their classes) will no longer be shown.

Another answer refers to using eventDidMount.
But this adds HTML outside the existing element.
Would like it to appear after .fc-event-title. E.g.

eventDidMount: function(arg) {
  console.log(arg.el);
  arg.el.innerHTML += "<b>hello</b>";
}

Generates:

<a tabindex="0" class="fc-event fc-event-start fc-event-end fc-event-future fc-timegrid-event fc-v-event">
  <div class="fc-event-main">
    <div class="fc-event-main-frame">
      <div class="fc-event-time">10:00 - 12:00</div>
      <div class="fc-event-title-container">
        <div class="fc-event-title fc-sticky">My title</div>
        <!-- would like the HTML to appear here -->
      </div>
    </div>
  </div>
  <!-- instead of here -->
  <b>hello</b> 
</a>

Suggestions how to add extra HTML after the .fc-event-title div?

Solution

  • You can use the standard JavaScript DOM manipulation functions (which are not specific to fullCalendar) to do whatever you want to anything with or within the HTML element represented by el. (The example in the other answer you quoted was intentionally a simplistic one to demonstrate the basic usage of eventDidMount, and is described as such.)

    Here's an example of using such DOM manipulation functions to perform the specific task you've asked about:

    eventDidMount: function(args)
{
  args.el.querySelector(".fc-event-title").insertAdjacentHTML("afterend", "<b>Hello</b>");
}

    Live demo: https://codepen.io/ADyson82/pen/eYxoXzW

    Reference material: