在 FullCalendar 回调中查找显示类型

Question

我正在使用 FullCalendar 显示来自两个来源的事件。我有一个源将它们显示为背景事件，另一个设置为显示为块事件。

这工作正常，但我正在使用 eventClick 回调。当我检查单击事件的 info.event.display 属性时，它 returns 为 auto。在此回调中，我需要检查此属性以确定是否执行某些操作。

这也是 eventDidMount 回调的问题。我正在使用它，但现在已将其禁用。

IE：在这种情况下，如果显示类型是块，我只希望出现一个模式。

代码：

let calendarEl = document.getElementById('calendar')
        let loader = document.querySelector('.calendar-wrapper .loader')
        let tooltip

        let calendar = new Calendar(calendarEl, {
            plugins: [dayGridPlugin],
            firstDay: 1,
            contentHeight: "auto",
            aspectRatio: 1.5,
            eventSources: [
                {
                    url: '/api/trips.json',
                    display: 'background'
                },
                {
                    url: '/parks/visits.json',
                    display: 'block'
                }
            ],
            startParam: 'start',
            endParam: 'end',
            showNonCurrentDates: true,
            loading: function (isLoading) {
                if (isLoading) {
                    loader.style.display = 'flex'
                } else {
                    loader.style.display = 'none'
                }
            },
            headerToolbar: {
                start:   'title',
                center: 'prevYear,nextYear',
                end:  'today prev,next'
            },
            // eventDidMount: function(info) {
            //     console.log(info.event);
            //     tooltip = new tippy(info.el, {
            //         theme: 'light-border',
            //         trigger: 'mouseenter',
            //         allowHTML: true,
            //         content: info.event.extendedProps.tooltipcontent,
            //         interactive: false,
            //         interactiveBorder: 0,
            //         animation: 'shift-away',
            //         moveTransition: 'transform 0.2s ease-out',
            //         zIndex: 99999,
            //         inertia: true,
            //         placement: 'top',
            //         touch: 'hold'
            //     })
            // },
            eventClick: function(info) {
                console.log(info)
                info.jsEvent.preventDefault()
                let modal = document.querySelector('#modal-container')
                modal.innerHTML = info.event.extendedProps.modalcontent
                // tooltip.hide()
                MicroModal.show('modal-visit')
            }
        })

有什么建议吗？

Answer 1

这是因为“背景”是事件源的属性，而不是事件。虽然在渲染时可以应用该规则来控制事件的显示方式，但事件本身不会自动将值“background”设置为其自身“display”的值属性（因为单个事件可能会覆盖任何给定属性) 的事件源值。

幸运的是，事件将包含对事件源的引用，尽管信息的路径很复杂（但幸运的是，通过将事件对象记录到控制台可以发现），您可以获得“显示”属性来自它的事件源：

eventClick: function(info) {
  alert(info.event.source.internalEventSource.ui.display);
}

现场演示：https://codepen.io/ADyson82/pen/BaQVyRO

在 FullCalendar 回调中查找显示类型

Find display type in FullCalendar callbacks

javascript

fullcalendar

fullcalendar-5