How can I turn off popover when I am moving an event?

Question

How can I turn off popover when I am moving an event?

Is there a way to hide the popover element when dragging an event in fullcalendar, and then show the popover again after the dragging is stopped?

Here is the code I am currently using:

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

When I try to resize or drag the event, this is what happens:

https://i.sstatic.net/04GVA.png

Any insights or suggestions are greatly appreciated. Thank you!

javascript twitter-bootstrap fullcalendar

Answer 1

Answer №1

To achieve the desired outcome, it is recommended to utilize the eventAfterRender function instead of eventRender. Update your code as follows:

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

The reason for this change is that eventRender is continuously called during dragging as the event is snapped into a cell (in non-month views), resulting in multiple popovers. On the other hand, eventAfterRender fires after the event has been positioned on the calendar in its final place.

You can observe this modification in action through this CodePen example.

Answer 2

To achieve the desired outcome, it is recommended to utilize the eventAfterRender function instead of eventRender. Update your code as follows:

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

The reason for this change is that eventRender is continuously called during dragging as the event is snapped into a cell (in non-month views), resulting in multiple popovers. On the other hand, eventAfterRender fires after the event has been positioned on the calendar in its final place.

You can observe this modification in action through this CodePen example.

Answer 3

Answer №2

Dealing with a similar issue led me to create a practical solution. Taking inspiration from Taha's code, I have crafted a ready-to-use snippet for anyone seeking guidance on integrating 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 4

Dealing with a similar issue led me to create a practical solution. Taking inspiration from Taha's code, I have crafted a ready-to-use snippet for anyone seeking guidance on integrating 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 5

Answer №3

To ensure proper functionality, make sure to include $(".Popover").Remove(); before the element.popover call within the eventRender function. An example implementation is shown below:

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 6

To ensure proper functionality, make sure to include $(".Popover").Remove(); before the element.popover call within the eventRender function. An example implementation is shown below:

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 7

Answer №4

Shoutout to Marcelo Codo, his solution really helped me out. Successfully implemented in fullcalendar version 4

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

Answer 8

Shoutout to Marcelo Codo, his solution really helped me out. Successfully implemented in fullcalendar version 4

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

Answer 9

Answer №5

To prevent the popover from rendering during scrolling events, you can set a flag to control its display.

Here is a pseudocode example:

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

$("element").on("dragend", function(){
   window.eventScrolling = false;
});

eventRender: function(event, elements, 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");
    
    elements.popover({
        title: start + ' — ' + end,
        content: event.title,
        trigger: 'hover',
        placement: 'top',
        container: 'body'
    });
}

Answer 10

To prevent the popover from rendering during scrolling events, you can set a flag to control its display.

Here is a pseudocode example:

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

$("element").on("dragend", function(){
   window.eventScrolling = false;
});

eventRender: function(event, elements, 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");
    
    elements.popover({
        title: start + ' — ' + end,
        content: event.title,
        trigger: 'hover',
        placement: 'top',
        container: 'body'
    });
}

How can I turn off popover when I am moving an event?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

The issue with the dispatch function not working in the Component props of React Redux

Ways to verify if the current date exists within a TypeScript date array

Display popup just one time (magnific popup)

Retrieving search results in JSON format from a website with NodeJs

How can I use JavaScript api calls to retrieve an image url and insert it into an image tag in an

How can I extract the page's output using JQuery?

Error encountered when attempting to display a particular user with a specific _id in MongoDB, Node, and React: Failed to convert value "undefined" to ObjectId in the "user" model

I am interested in modifying the hover effect for the text letters within the material UI container when hovering over it

The input value is displaying one value, but the output is showing a different value

Leverage JavaScript to run a snippet of PHP code directly (without utilizing a separate PHP file)

Retrieve all elements from JSON using jQuery

Collaborating with SockJS connectivity

Using jQuery to loop through a collection

When pressing the next or previous button on the slider, an error message pops up saying "$curr[action] is not a

Utilizing Three.js to Upload Images and Apply Them as Textures

[Vue alert]: Issue encountered in mounted hook: "Error: viewType "" is not accessible. Please ensure that you have loaded all essential plugins

Establish initial content for the specified div area

Leverage Jquery within the div element to manipulate the data retrieved from a post ajax request

What is the best approach for integrating HTML and JavaScript code into Flutter mobile platforms?

Refine your search by name following the implementation of a character-altering filter