adding html content to fullcalender 5.x. event

Question

I'd like to add a html-object to every event for fullcalendar. (In my case a bootstrap-pill, but any other html also fail.) I'd already manage this in other projects for fullcalender 3.x. But in 5.x this chances completly.

First idea: I put the html in the event title of the event source. This fails, because fullcalendar add the title as text not as html. (apply also to older versions of FC)

Second: Add this via hook eventContent:

    eventContent: function (args, createElement) {
          const icon = args.event._def.extendedProps.img;
          const text = "<span>test</span> "; 
          console.info("EventContent:",args.event);
          return {
            html: text
          };
    },

but this ends up, the every event has as title only "test". Original title ist vanished.

Next Try:

    eventContent: function (args, createElement) {
          const icon = args.event._def.extendedProps.img;
          const text = "<span>test</span> " + args.event._def.title;
          console.info("EventContent:",args.event);
          return {
            html: text
          };
    },

Now "test" & titlte is show. but the title isn't formatted as before (overhangs the outer edges, etc.) so title lost his format. Of cause a may can fix that for one view. But since I use multiple views this isn't posible for any view and case.

Next try:

eventContent: function (args, prepend) {
... same as above ...

doesn't work also.

Is there a way to retrive to original-item and return it? (I didn't found anything in args)

Any Idea?

Answer 1

Finally I found a solution with eventDidMount:

eventDidMount: function(info) {
            if ( $(info.el).find(".badge-pill") ) {
                var pill = document.createElement("span");
                var freikapa = info.event._def.extendedProps['freikapa'];
                if (isNaN(freikapa)) {
                    console.info("eventDidMount: freikappa icht definiert:", info.event);
                } else {
                    pill.innerText = freikapa; 
                    if (freikapa == 0) {
                        pill.classList.add("badge","badge-pill","badge-danger");
                    } else {
                        pill.classList.add("badge","badge-pill","badge-success");
                    }
                    var fcevent = info.el.querySelector('.fc-event-time'); // for gridView
                    if (fcevent ) { 
                       fcevent.textContent += " ";
                       fcevent.append(pill);
                    }
                    fcevent = info.el.querySelector('.fc-list-event-graphic');  // for listView
                    if (fcevent ) { 
                       fcevent.textContent += " ";
                       fcevent.append(pill);
                    }
                }
            } else {
                console.info("eventDidMount: pill-Klasse schon vorhanden:", info.el);
            }     
        },

This put nice Bootstrap-Pills (an a space) after the time with value out of extendedProps and color based on value. Works for all gridViews and listViews. (Sorry for the german error-messages.)