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 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 : .jpg

How to get element I have to assign tip ?

Thanks!

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/H0aH4.jpg

How to get element I have to assign tip ?

Thanks!

• javascript
• html
• fullcalendar
• fullcalendar-5

Share Improve this question Follow edited Jun 3, 2022 at 17:14 Mike Irving 1,63011 gold badge1414 silver badges2323 bronze badges asked Jun 16, 2021 at 8:06 mstdmstdmstdmstd 3,2332222 gold badges8787 silver badges192192 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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.