在 fullcalendar 中处理单击和双击事件

Question

I am using fullcalendar and on single click to particular day of calendar it should fire single click event and on double click it should fire double click event.But on page load when I click 1st time it is not responding and single/double click not working properly.

/* config object */
            $scope.uiConfig = {
              calendar:{
                height: 450,
                editable: false,
                    defaultView: 'month',
                    columnFormat: {
                        month: 'ddd',
                        week: 'ddd dd/MM',
                        day: 'dddd M/d'
                    },
                buttonText: {
                        month: "Mois",
                        week: "Semaine",
                        day: "Jour",
                        today:"aujourd'hui",
                },
                eventClick: $scope.alertEventOnClick,
              }
            };


$scope.alertEventOnClick = function(calEvent, jsEvent, view) {


                $("#onClick").click(function (e) {
                    var $this = $(this);
                    if ($this.hasClass('clicked')){
                        $this.removeClass('clicked'); 

                         //perform double-click action  
                    }else{
                         $this.addClass('clicked');
                         setTimeout(function() { 
                             if ($this.hasClass('clicked')){
                                 $this.removeClass('clicked'); 

                                  //perform single-click action    
                             }
                         },10);          
                    }
                });

        };

Answer 1

Use fullCalendar eventRender callback to attach your own events.

For example:

$('#calendar').fullCalendar({
    //events: [
        //....
    //],
    eventRender: function(event, element) {
         $(element).on({
             click: function() {
                 // Handle click...
             },
             dblclick: function() {
                 // Handle double click...
             }
         });
    }
});

Answer 2

I thought I would share how I address adding dblclick this through the API versus code modification with the fullcalendar version 4 that exposed the property through one object reference.

Here is the working example: Codepen

eventRender: function (info) {

  //WON'T ALLOW ALSO WORK WITH single eventClick or single Click Listener
   //info.el.addEventListener('dblclick', function () {
     //  alert('DOUBLE CLICK!'+info.event.title);
   //});

  info.el.addEventListener('click', function() {
        clickCnt++;         
    if (clickCnt === 1) {
        oneClickTimer = setTimeout(function() {
            clickCnt = 0;
            alert('SINGLE CLICK example value grab:' + info.event.title );
        }, 400);
    } else if (clickCnt === 2) {
        clearTimeout(oneClickTimer);
        clickCnt = 0;
        alert('DOUBLE CLICK example value grab:' + info.event.start );

    }          
  });
}