时间戳

首页 > 解决方案 > 在 FullCalendar 回调中查找显示类型

javascript - 在 FullCalendar 回调中查找显示类型

问题描述

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

这工作正常，但后来我使用 eventClick 回调。当我检查单击事件的 info.event.display 属性时，它返回为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')
            }
        })

有什么建议么？

标签： javascriptfullcalendarfullcalendar-5

解决方案

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

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

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

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

推荐阅读