Skip to content Skip to sidebar Skip to footer

Fullcalendar Mousewheel Event Prev Next

i'm trying to do a simple think in Fullcalendar ( 1.6.2 ) and is to simulate the prev and next button throught the mouse wheel up and down, similar to google calendar. Here is the

Solution 1:

I think i got it, its a bit hacky but it does the trick!!! Any constructive critics are welcome. This is now working in IE, Firefox, Chrome recent versions.

//This checks the browser in use and populates da var accordingly with the browser
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";

//Prevents the scroll event for the windows so you cant scroll the window       
function preventDefault(e) {
  e = e || window.event;
  if (e.preventDefault)
      e.preventDefault();
  e.returnValue = false;  
}       

//I think this could be eliminated but in the examples i found used it  
function wheel(e) {
  preventDefault(e);        
}
//adds the scroll event to the window       
function disable_scroll(){
    if (document.attachEvent) //if IE (and Opera depending on user setting)
        document.attachEvent("on"+mousewheelevt, wheel);
    else if (document.addEventListener) //WC3 browsers
        document.addEventListener(mousewheelevt, wheel, false);                 
}   

//removes the scroll event to the window    
function enable_scroll() 
{
    if (document.removeEvent) //if IE (and Opera depending on user setting)
        document.removeEvent("on"+mousewheelevt, wheel);
    else if (document.removeEventListener) //WC3 browsers
        document.removeEventListener(mousewheelevt, wheel, false);  
}           

//binds the scroll event to the calendar's DIV you have made    
calendar.bind(mousewheelevt, function(e){
    var evt = window.event || e; //window.event para Chrome e IE || 'e' para FF
    var delta;          
    delta = evt.detail ? evt.detail*(-120) : evt.wheelDelta;                    
    if(mousewheelevt === "DOMMouseScroll"){
        delta = evt.originalEvent.detail ? evt.originalEvent.detail*(-120) : evt.wheelDelta;
    }           

 if(delta > 0){  
    calendar.fullCalendar('next');      
     }
     if(delta < 0){             
        calendar.fullCalendar('prev');      
     }  

});

//hover event to disable or enable the window scroll    
calendar.hover(
    function(){
        enable_scroll();
        console.log("mouseEnter");
    },
    function(){
        disable_scroll();
        console.log("mouseLeave");
    }
);

//binds to the calendar's div the mouseleave event      
calendar.bind("mouseleave", function() 
{
     enable_scroll();
});

//binds to the calendar's div the mouseenter event   
calendar.bind("mouseenter", function() 
{
     disable_scroll();
});

Post a Comment for "Fullcalendar Mousewheel Event Prev Next"