How to get element in eventContent of FullCalendar v5 and to assign it to tip?

Question

I move into FullCalendar v5 from v4 and I try to set hints for any cell. In v4 I used eventRender like:

            eventRender: function (eventInfo) {
                let external_google_calendar_button = ""
                if (eventInfo.event.url != "" && typeof eventInfo.event.url != "undefined") {
                    // alert( eventInfo.event.url + "  eventInfo.event..url ::"+( typeof eventInfo.event.url )  )
                    external_google_calendar_button = '<i class=\'fa fa-external-link\' style=\'color:#eaeaea;\' title=\'Has event at Google Calendar\'></i>&nbsp;';
                }
                let adTooltipHtml = '..."

                let editorBtnHTML= '<button type="button" class="action_btn m-0 mr-1 p-0 px-1" @click.prevent="openAdCard( \'' + eventInfo.event.id + '\' )" title="Open ad card">+</button>'


                eventInfo.el.querySelector('.fc-content').innerHTML = '<span class="flex flex-nowrap">'+editorBtnHTML +  eventInfo.el.querySelector('.fc-content').innerHTML + '</span>'

                tippy(eventInfo.el, {
                    content: adTooltipHtml,
                    allowHTML: true,
                    animation: 'fade',
                    delay: 100,
                    duration: 100,
                });

Here https://fullcalendar.io/docs/event-render-hooks I read :

eventContent - a Content Injection Input. Generated content is inserted inside the inner-most wrapper of the event element. If supplied as a callback function, it is called every time the associated event data changes.

and I try to use eventContent event for the same goal :

eventContent: function (eventInfo) {
    console.log('eventContent eventInfo::')
    console.log(eventInfo)
    console.log('eventInfo.event::')
    console.log(eventInfo.event)

But I failed to get access to element to set hint to it. What I see in browser's console : https://i.sstatic.net/H0aH4.jpg

How to get element I have to assign tip ?

Thanks!

Answer 1

I failed to get access to element

...yes because as per the content injection documentation you don't get access to it directly. You simply return the HTML you want to put within it, without any need to know anything about the element you're injecting into.

However that's not really what you're trying to do here - you're trying to attach a tooltip to the whole element.

Again as per the event render hooks documentation, if you use the eventDidMount callback instead, this gives you access to the el property within the supplied data, which represents the element.