How to handle both dblclick and click events on Calendar Event

Question

I am attempting to perform one action when single clicking on an event in fullCalendar, and perform another action when double clicking on the same event, and am running into problems with the single click event firing on a dblClick.

I want to change the border color on a series of events on a single click, and open an edit dialog box on a double click.

I have tried this in the eventRender function like this but it hasnt worked. Also, leaving the click event out of eventRender and using the eventClick function for single click, it behaves the same way.

        element.bind('dblclick', function(ev) {
            editEvent(event,element,view);
            alert('double click!');
        });
        element.bind('click', function(ev) {
            var eventSeries=$('#calendar').fullCalendar('clientEvents', event.id);
            $(eventSeries).each(function(){this.borderColor='red'});
            $('#calendar').fullCalendar('updateEvent', eventSeries);
            alert('single click!');
        });

dblclick fires fine when there is nothing in eventClick or the click binding, but as soon as I have code in the click binding or eventClick, dblclick never fired. Does anyone know how I can handle both types of events?

Nate Nate · Accepted Answer · 2012-01-10T20:32:22

You could roll your own single click / double click event, essentially, using a setTimeout to trigger a single-click event after giving enough time for the user to complete a second click if they're trying to double click.

Here's the fiddle: http://jsfiddle.net/wfG6k/

$button.bind( 'click', function( event ) {

    var doubleClickOpportunity = 200, // Adjust this to whatever feels right
        $elem = $( event.target ),
        clicker = $elem.data( 'clicker' ); // Holder for the doubleclick setTimeout

    if ( clicker ) {
        // If there's a setTimeout stored in clicker, then this is a double click
        clearTimeout( clicker );
        $elem.data( 'clicker', '' );
        $elem.trigger( 'doubleclick' );
    } else {
        // Otherwise, it's either a single click or the beginning of a double click

        // So set a timer to decide which it is - if the timer runs out,
        // it's just a single click.
        $elem.data( 'clicker', setTimeout(function() {
            $elem.data( 'clicker', '' );
            $elem.trigger( 'singleclick' );
        }, doubleClickOpportunity ));
    }

});

$button.bind( 'singleclick', function() {
    // I'm a single click!
});

$button.bind( 'doubleclick', function() {
    // I'm a double click!
});

How to handle both dblclick and click events on Calendar Event

1 Answers