javascript - How to disable popover when I dragging event? - Stack Overflow

admin管理员组

文章数量:1290951

How can I hide popover element when I start dragging event in fullcalendar and after stop dragging show popover again?

I have this code:

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'
        });
      }

And when I want to resize or dragging event this happend:

Thank you!

How can I hide popover element when I start dragging event in fullcalendar and after stop dragging show popover again?

I have this code:

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'
        });
      }

And when I want to resize or dragging event this happend:

Thank you!

• javascript
• twitter-bootstrap
• fullcalendar

Share Improve this question Follow asked Mar 30, 2018 at 8:27 Alexander FrolovAlexander Frolov 8311 silver badge66 bronze badges 1

• Don't forget to accept the answer you think it's right. We are expecting this from you. Don't just ask and go away. – Taha Paksu Commented Apr 5, 2018 at 6:08

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

You should use eventAfterRender instead of eventRender function to achieve the desired result. So your code will look like this:

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

This works because eventRender is constantly called while dragging because the event is constantly being "snapped" into a cell (in non-month views) and hence ends up creating all the popovers, while eventAfterRender is triggered after an event has been placed on the calendar in its final position.

You can see it in action here in this codepen

I had a similar issue. Based on Taha code, here is a ready-to-use code for those wondering how to do it with 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();
},

You just need to put $ (". Popover"). Remove (); before the element.popover. Like this.

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'
});
            }

Thanks Marcelo Codo, this worked for me. fullcalendar v4

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

You can add a flag to the scroll event that the popover shouldn't render.

pseudocode:

$("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'
    }
});

本文标签： javascriptHow to disable popover when I dragging eventStack Overflow