如何在拖動事件時禁用popover？

Question

當我開始在fullcalendar中拖動事件並再次停止拖動show popover后，如何隱藏popover元素？

我有這個代碼：

eventRender: function(event, elementos, resource, view) {
        var start = $.fullCalendar.formatDate(event.start, "DD-MM-Y HH:mm");
        var end = $.fullCalendar.formatDate(event.end, "DD-MM-Y HH:mm");
        elementos.popover({
          title: start + ' — ' + end,
          content: event.title,
          trigger: 'hover',
          placement: 'top',
          container: 'body'
        });
      }

當我想調整大小或拖動事件時：

謝謝！

Answer 1

我有一個類似的問題。 基於Taha代碼，這里有一個隨時可用的代碼，供那些想知道如何使用Fullcalendar執行此操作的人使用：

eventDragStart: function( event, jsEvent, ui, view ) {
  window.eventScrolling = true;
},
eventDragStop: function( event, jsEvent, ui, view ) {
  window.eventScrolling = false;
},
eventRender: (event, elementos, resource, view) {
    if(window.eventScrolling) return;
    var start = $.fullCalendar.formatDate(event.start, "DD-MM-Y HH:mm");
    var end = $.fullCalendar.formatDate(event.end, "DD-MM-Y HH:mm");
    elementos.popover({
      title: start + ' — ' + end,
      content: event.title,
      trigger: 'hover',
      placement: 'top',
      container: 'body'
    });
  }
},
eventResize: function(event, delta, revertFunc) {
  $(".popover").remove();
},

Answer 2

您可以向彈出框不應呈現的滾動事件添加標記。

偽代碼：

$("element").on("dragstart", function(){
   window.eventScrolling = true;
});

$("element").on("dragend", function(){
   window.eventScrolling = false;
});
eventRender: function(event, elementos, resource, view) {
    if(window.eventScrolling) return;
    var start = $.fullCalendar.formatDate(event.start, "DD-MM-Y HH:mm");
    var end = $.fullCalendar.formatDate(event.end, "DD-MM-Y HH:mm");
    elementos.popover({
        title: start + ' — ' + end,
        content: event.title,
        trigger: 'hover',
        placement: 'top',
        container: 'body'
    }
});

Answer 3

您應該使用eventAfterRender而不是eventRender函數來實現所需的結果。 所以你的代碼看起來像這樣：

  eventAfterRender: function(event, elementos, resource, view) {
    // code goes here
  }

這是有效的，因為在拖動時不斷調用eventRender ，因為事件不斷被“捕捉”到單元格中（在非月視圖中），因此最終會創建所有彈出窗口，而eventAfterRender在事件放置在日歷上后觸發在最后的位置。

您可以在此codepen中看到它的運行情況

Answer 4

你只需要把$（“。Popover”）。 去掉 （）; 在element.popover之前。 像這樣。

eventRender: function(event, element, resource, view) {

       $(".popover").remove();

var start = $.fullCalendar.formatDate(event.start, "DD-MM-Y HH:mm");
var end = $.fullCalendar.formatDate(event.end, "DD-MM-Y HH:mm");
element.popover({
    title: start + ' — ' + end,
    content: event.title,
    trigger: 'hover',
    placement: 'top',
    container: 'body',
      live: true,
            html: true,
            placement: 'above'
});
            }