Блог

Главная - Вопросы по программированию - Как получить элемент в eventConten fullcalendar v5 и назначить его tip?

Как получить элемент в eventConten fullcalendar v5 и назначить его tip?

#javascript #html #fullcalendar #fullcalendar-5

Вопрос:

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

             eventRender: function (eventInfo) {
                let external_google_calendar_button = ""
                if (eventInfo.event.url != "" amp;amp; 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>amp;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

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

Спасибо!

Ответ №1:

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

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

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

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

Метки: