Search code examples
javascriptfullcalendarfullcalendar-5

Find display type in FullCalendar callbacks

I am using FullCalendar to display events from two sources. I have one source to display them as background events and the other set to display as block events.

This works fine, but then I am using the eventClick callback. When I check the info.event.display property of the event clicked on, it returns as auto. In this callback I need to check this property to determine whether to do something or not.

This also is a problem with the eventDidMount callback. I was using that but have disabled it for now.

IE: In this case I only want a modal to appear if the display type is block.

Code:

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')
            }
        })

Any suggestions?

Solution

  • It's because "background" is a property of the event source, not the event. Whilst that rule may then be applied when rendering, to control how the event appears, the event itself doesn't automatically have the value "background" set as the value for its own "display" property (because an individual event can potentially override the event source value for any given property).

    Fortunately the event will contain a reference to the event source and, although the path to the information is convoluted (but fortunately discoverable by logging the event object to the Console), you can get the "display" property of the event source from it:

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

    Live demo: https://codepen.io/ADyson82/pen/BaQVyRO