Как получить элемент в eventConten полного календаря v5 и назначить его чаевым?

Я перехожу на fullcalendar v5 из v4 и пытаюсь установить подсказки для любой ячейки. В v4 я использовал eventRender, например:

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

Здесь https://fullcalendar.io/docs/event-render-hooks я прочитал :

eventContent - вход для внедрения контента. Сгенерированное содержимое вставляется в самую внутреннюю оболочку элемента события. Если предоставляется как функция обратного вызова, она вызывается каждый раз при изменении связанных данных события.

и я пытаюсь использовать событие eventContent для той же цели:

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

Но мне не удалось получить доступ к элементу, чтобы задать ему подсказку. Что я вижу в консоли браузера: https://imgur.com/a/8CCgZ4i

Как получить элемент, который я должен назначить подсказкой?

Спасибо!


javascript html fullcalendar fullcalendar-5
person mstdmstd    schedule 16.06.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Мне не удалось получить доступ к элементу

... да, потому что согласно [документации по внедрению контента] (https://fullcalendar.io/docs/content-injection) вы не получаете к нему прямого доступа. Вы просто return HTML, который хотите поместить в него, без необходимости ничего знать об элементе, в который вы вводите.

Однако это не совсем то, что вы здесь пытаетесь сделать - вы пытаетесь прикрепить всплывающую подсказку ко всему элементу.

Опять же, согласно документации по обработчикам событий, если вместо этого вы используете обратный вызов eventDidMount, это дает вам доступ к свойству el в предоставленных данных, которое представляет элемент.

person ADyson    schedule 16.06.2021