CODEWITHSUNDEEP
javascriptjqueryfullcalendarfullcalendar-2
Linga
Linga

Reputation: 10555

Fullcalendar handle double click

I'm using fullcalendar for my calendar functionality. I'm using dayClick and select. In fullcalendar, select will be called even though it is a single day click. So, I changed the dayClick event like below to handle the day click. Here is my code

dayClick: function(date, jsEvent, view) {
    isClicked = true;
},
select: function(startDate, endDate){
    if(isClicked){
        console.log('click');
        return;
    }
    var start_date = moment(startDate).format('Y-MM-DD');
    var end_date = moment(endDate).format('Y-MM-DD');
    if(start_date != end_date){
        end_date = moment(endDate).subtract(1, 'days').format('Y-MM-DD');
    }

    var set_default_duration = isClicked == true ? true : false ;
    isClicked = false;

    var user = $(t).attr('data-code');
    // Some other stuff
 },

Actually, I want to handle double click to create new events. I tried with dblclick event function from jquery with the calendar but always single click only triggers. The problem is, immediately after the click made, select is fired, so I'm unable to handle the double click. Can someone help me to handle the double click in this case.

Here is the Fiddle

EDIT: I'm trying to handle double click of the empty slots to create new event. Currently, single click is doing this

Upvotes: 3

Views: 3805

Answers (3)

Marcelo Molina
Marcelo Molina

Reputation: 1

How I solved this: ...

dateClick: function() { 
    dateClickCallback();
  },

....

var dblclick = false;
function clear_click(){
    dblclick = false;
}

function dayClickCallback(){
    if(dblclick){
        alert('ok')
        dblclick = false;
    }else{
        dblclick = true;
        const myTimeout = setTimeout(clear_click, 300);
    }
}

Upvotes: 0

Linga
Linga

Reputation: 10555

I found the answer. The problem is with the selection. It is selected once the day is clicked. So, I used unselect method to clear the selection and it seems fine now. Here is the code

dayClick: function(date, jsEvent, view) {
    if(isClicked){
        isDblClicked = true;
        isClicked = false;
    }
    else{
        isClicked = true;
    }
    setTimeout(function(){
        isClicked = false;
    }, 250);
 },
 select: function(startDate, endDate, jsEvent){
    if(isClicked){
        $(t).fullCalendar('unselect');
        return;
    }
    // Other stuff
}

Upvotes: 2

Kris J.
Kris J.

Reputation: 134

Well you could assign a new variable thats called clickedTimes or something like that and set it to zero. Whenever you get a click you set clickedTimes to one and then two and you check if clickedTimes is at 2. When it gets to two let it do the thing you want and set it back to zero.

Upvotes: 1

Related Questions