CODEWITHSUNDEEP
jqueryfullcalendar
mark.bjaergager
mark.bjaergager

Reputation: 39

FullCalendar event popup

Using awsome FullCalendar on my project, I'm facing a problem.

When the user hovers an Event, I display a DIV containing a menu using the code below.

This works fine (issues with finding X Y for the event is annoying)

My problem is that when the user moves the mouse over the DIV (Menu) the Event fires a eventMouseOut (as it should) - but this closes my DIV.

How can I check if the mouse is inside the menu, before removing the menu ?

eventMouseover: function(event, jsEvent, view){
            var eventid = event.id;
            var layer = "<div id='events-layer'  style='position:absolute; top:"+ jsEvent.pageY +"px; left:"+ jsEvent.pageX +"px; text-align:left; z-index:9999;background-color:#ffffff;padding-right:5px;cursor:pointer;width:100px;color:#000000;'><ul style='list-style-type: none;margin-left:0px;padding:0px;overflow:hidden;' onclick=''><li onClick='editEvent("+ eventid +");'><a><img border='0' style='' src='/images/icons/wrench.png'></a>&nbsp;<?php echo _("Rediger vagt")?></li><li onClick='showEventMembers("+ eventid +");'><a><img border='0' style='' src='/images/icons/users.png'></a>&nbsp;<?php echo _("Vis tilmeldte")?></li><li onClick='emailEventMembers("+ eventid +");'><a><img border='0' style='' src='/images/icons/email.png'></a>&nbsp;<?php echo _("Skriv mail")?></li><li onClick='printShiftplan("+ eventid +");'><a><img border='0' style='' src='/images/icons/printer.png'></a>&nbsp;<?php echo _("Udskriv vagtplan")?></li><li onClick='deleteEvent("+ eventid +");'><a><img border='0' style='' src='/images/icons/bin_closed.png' ></a>&nbsp;<?php echo _("Slet vagt")?></li></ul></div>";
            $("body").append(layer);

            console.log(jsEvent);
        },
        eventMouseout: function(calEvent, domEvent) {
            $("#events-layer").remove();
        },

I'm sorry for the ugly layer (menu) - not the most elegant solution but it works for now.

To summarize the question : How can I check if the user is actually navigating the menu, before removing it in eventMouseout ?

Upvotes: 1

Views: 2753

Answers (1)

Yann86
Yann86

Reputation: 1017

Hi you can remove the layer when the mouse leave the layer instead of remove it when the mouse leave the calendar div event like this :

eventMouseover: function(event, jsEvent, view){

                  var eventid = event.id;
                  var layer = $("<div id='events-layer'  style='position:absolute; top:"+ jsEvent.pageY +"px; left:"+ jsEvent.pageX +"px; text-align:left; z-index:9999;background-color:#ffffff;padding-right:5px;cursor:pointer;width:100px;color:#000000;'><ul style='list-style-type: none;margin-left:0px;padding:0px;overflow:hidden;' onclick=''><li onClick='editEvent("+ eventid +");'><a><img border='0' style='' src='/images/icons/wrench.png'></a>&nbsp;<?php echo _("Rediger vagt")?></li><li onClick='showEventMembers("+ eventid +");'><a><img border='0' style='' src='/images/icons/users.png'></a>&nbsp;<?php echo _("Vis tilmeldte")?></li><li onClick='emailEventMembers("+ eventid +");'><a><img border='0' style='' src='/images/icons/email.png'></a>&nbsp;<?php echo _("Skriv mail")?></li><li onClick='printShiftplan("+ eventid +");'><a><img border='0' style='' src='/images/icons/printer.png'></a>&nbsp;<?php echo _("Udskriv vagtplan")?></li><li onClick='deleteEvent("+ eventid +");'><a><img border='0' style='' src='/images/icons/bin_closed.png' ></a>&nbsp;<?php echo _("Slet vagt")?></li></ul></div>");

                  layer.mouseenter(function(){

                       $(this).addClass("mouse_in");

                   })

                  layer.mouseleave(function(){

                       $(this).remove();

                   })

                   $("body").append(layer);

                   console.log(jsEvent);
        },
        eventMouseout: function(calEvent, domEvent) {

           if(!$("#events-layer").hasClass('mouse_in')){
             $("#events-layer").remove();
           }
        },

Upvotes: 1

Related Questions