如何获取 FullCalendar v5 的 eventContent 中的元素并将其分配给小费?
How to get element in eventContent of FullCalendar v5 and to assign it to tip?
我从 v4 进入 FullCalendar v5,并尝试为任何单元格设置提示。
在 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> ';
}
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 - 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.
我尝试使用 eventContent 事件来实现相同的目标:
eventContent: function (eventInfo) {
console.log('eventContent eventInfo::')
console.log(eventInfo)
console.log('eventInfo.event::')
console.log(eventInfo.event)
但我无法访问元素以对其设置提示。
我在浏览器控制台中看到的内容:https://imgur.com/a/8CCgZ4i
如何获取我必须分配小费的元素?
谢谢!
I failed to get access to element
...是的,因为根据 [内容注入文档] (https://fullcalendar.io/docs/content-injection),您无法直接访问它。您只需 return
您想要放入其中的 HTML,无需了解您要注入的元素的任何信息。
然而,这并不是您真正要在此处执行的操作 - 您正在尝试将工具提示附加到整个元素。
再次根据 event render hooks documentation,如果您改用 eventDidMount
回调,这使您可以访问所提供数据中的 el
属性,它表示元素。
我从 v4 进入 FullCalendar v5,并尝试为任何单元格设置提示。 在 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> ';
}
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 - 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.
我尝试使用 eventContent 事件来实现相同的目标:
eventContent: function (eventInfo) {
console.log('eventContent eventInfo::')
console.log(eventInfo)
console.log('eventInfo.event::')
console.log(eventInfo.event)
但我无法访问元素以对其设置提示。 我在浏览器控制台中看到的内容:https://imgur.com/a/8CCgZ4i
如何获取我必须分配小费的元素?
谢谢!
I failed to get access to element
...是的,因为根据 [内容注入文档] (https://fullcalendar.io/docs/content-injection),您无法直接访问它。您只需 return
您想要放入其中的 HTML,无需了解您要注入的元素的任何信息。
然而,这并不是您真正要在此处执行的操作 - 您正在尝试将工具提示附加到整个元素。
再次根据 event render hooks documentation,如果您改用 eventDidMount
回调,这使您可以访问所提供数据中的 el
属性,它表示元素。