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

您可以在弹出框不应呈现的滚动事件中添加标记。

伪代码：

$("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 2

我有一个类似的问题。基于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 3

您应该使用eventAfterRender而不是eventRender函数来获得所需的结果。因此您的代码将如下所示：

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

之所以可行，是因为在拖动时不断调用eventRender，这是因为该事件不断地“捕捉”到一个单元格中（在非月视图中），因此最终会创建所有弹出窗口，而eventAfterRender在将事件放置在日历的最终位置后触发。

您可以在操作中here in this 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'
});
            }

Answer 5

感谢Marcelo Codo，这对我有用。 Fullcalendar v4

$('.popover').remove();
$(info.el).popover({ title: 'ddd', placement:'top', trigger : 'hover', content: tooltip, container:'body' }).popover('show');

如何在拖动事件时禁用popover？

5 个答案: