javascript - 如何阻止 fullcalendar 在轮询时中断拖动和调整大小

Question

我一直在尝试让 fullcalendar 对新事件的轮询使用react，但是每当它调用 refetchEvents 时，如果我拖动或调整某些内容的大小，它就会阻止我，就好像我在当前位置释放了鼠标一样，它将事件分别移动或调整大小到错误的位置。

我有一个jsfiddle ，以实际行动展示这一点。

这里是代码，如果有帮助的话:

$(document).ready(function() {

  /* initialize the calendar
  -----------------------------------------------------------------*/

  $('#calendar').fullCalendar({
    header: {
      left: 'prev,next today',
      center: 'title',
      right: 'month,agendaWeek,agendaDay'
    },
    editable: true,
    events: [{
      title: 'event1',
      start: '2017-01-26T08:00:00',
    end: '2017-01-26T10:00:00'
    }, {
      title: 'event2',
      start: '2017-01-05',
      end: '2017-01-07'
    }, {
      title: 'event3',
      start: '2017-01-09T06:30:00',
    end: '2017-01-09T09:30:00',
    }]
  });
});
setInterval(function() {
  $('#calendar').fullCalendar('refetchEvents');
  console.log('refetchEvents called');
}, 5000);

Answer 1

可能不是最有效的，在 eventDragStart 和 eventDragStop 上使用 fetchEventsLock 引用，并且仅在释放时获取事件 ===假。

var fetchEventsLock = false;
$(document).ready(function () {

    /* initialize the calendar
    -----------------------------------------------------------------*/

    function toggleLock() {
        fetchEventsLock = !fetchEventsLock;
        console.log('Set To ' + fetchEventsLock)
    }
    $('#calendar').fullCalendar({        
        eventDragStart: toggleLock,
        eventDragStop: toggleLock,
        /* Other option removed */

    });
});
setInterval(function () { 
    if (fetchEventsLock === false) {
        $('#calendar').fullCalendar('refetchEvents');
        console.log('refetchEvents called');
    }
}, 5000);