时间戳

首页 > 解决方案 > Fullcalendar 防止 eventDidMount 在拖动时持续触发

fullcalendar - Fullcalendar 防止 eventDidMount 在拖动时持续触发

问题描述

我将 Tippy.js 集成到 FullCalendar.js 日历中。在日历内拖动事件时，工具提示会变得疯狂，失去对触发它的事件的引用。

我认为问题在于我正在eventDidMount钩子内创建 Tippy （工具提示）实例，并且每次拖动事件被捕捉到日历单元格时都会在拖动时调用，这就是为什么它会在此过程中触发大量工具提示.

Fullcalendar 有一个钩子，eventDragStart(eventInfo)但我不知道如何访问附加的tippy 实例来隐藏它。或者我应该在拖动时完全阻止创建工具提示？

 //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
 }

有任何想法吗？

标签： fullcalendartippyjs

解决方案

好吧，我终于找到了在 FullCalendar 中解决此问题的方法，而不是在 Tippy 中。

我_isDragging在 eventDragStart 钩子内的事件上设置了一个属性：

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

    },

这样，我可以在eventDidMount钩子中检查这个标志并防止创建 Tippy 工具提示。

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

重要提示： 我将 _isDragging 属性直接设置为日历实例中的事件实例，因为这些钩子接收的 info.event 参数没有动态创建的属性。或者至少我没有找到让它工作的方法。

推荐阅读