fullcalendartippyjs

Fullcalendar prevent eventDidMount triggers constanty while dragging


I have a Tippy.js integrated into a FullCalendar.js calendar. While dragging an event inside the calendar, the tooltips get crazy, losing reference to the event that triggered it.

I think the issue is that I'm creating the Tippy (tooltip) instance inside the eventDidMount hook, and this being call while dragging every time the dragged event is snaped to a calendar cell, and that is why it triggers lots of tooltips in the process.

Fullcalendar has a hook for eventDragStart(eventInfo) but I don't know how to get to the attached tippy instance to hide it. Or should I prevent creating a tooltip at all while dragging instead?

 //Other FullCalendar Initialization
 ...
 eventDidMount: function(info) {
     tippy(info.el, {
        interactive: true, 
        delay: 300,
        theme: 'light-border',
        maxWidth: 400,
        allowHTML: true,
        appendTo: document.getElementById('mainContent'),   
        content(reference) {
            //Tooltip content
            return tempRendered;
        },
      });                                     
 }
 eventDragStart(info){
   //I SUPPOSE HERE I SHOULD DO SOMETHING TO HIDE THE TIPPY TOOLTIP
 }

Any ideas?


Solution

  • Well, I finally found the way to fix this in FullCalendar, not in Tippy.

    I set an _isDragging property on the event inside the eventDragStart hook:

        eventDragStart: function(info) {                            
            calendarInstance.getEventById(info.event.id).setExtendedProp( "_isDragging", true );
    
        },
          
    

    That way, I can check this flag inside the eventDidMount hook and prevent the creation of the Tippy tooltip.

     eventDidMount: function(info) {  
                                   
           const isDragging = 
    calendarInstance.getEventById(info.event.id).extendedProps._isDragging;
           if (isDragging != null && isDragging) {
               return;
           }
        
           ...
            // Tippy Init
        },
    

    IMPORTANT: I'm setting the _isDragging property directly to the event instance inside the Calendar instance, because of the info.event args these hooks receive don't have the properties created on the fly. Or at least I didn't find a way to make it work.