How to add new events on double click for fullcalendar plugin

Question

I am using fullcalendar plugin to schedule meetings and appointments.

I can retrieve all the events associated with Day/Month/Week. Now, I want to add double click event on empty cells (where there are no appointment scheduled).

I tried using dayRender, but it's not reliable because its only working for few cells not all. I tried eventRender, which works fine for all those cells who have events associated.

Right now I am using double click event of jQuery, as below:

    $(CALENDAR.Calendar).undelegate("dblclick").delegate("td", "dblclick", function () {        
    if (!isEventsLoaded) {
        common.notificationMessage("Please sit back we are loading calendar events.", 0);
        return false;
    }
    alreadyClicked = true;
    var hasEventAssigned = $(this).find("a").attr('href')
    var isFutureMonth = $(this).hasClass("fc-other-month")
    if (alreadyClicked && hasEventAssigned == undefined && !isFutureMonth) {
        openEditSALPopUp();
        alreadyClicked = false;
    }
    return false;
});

It works fine, it opens up the modal popup to add a new calendar or appointment, but i cannot find the date/time for which this appointment needs to be scheduled.

Please help me getting over this.

scottysmalls scottysmalls · Accepted Answer · 2015-11-24T15:28:57

I played around for a while and my best solution was:

Use the dayClick callback of fullcalendar to get the moment of a single click on an unoccupied slot
Remember the moment of the slot clicked
If the mouse moves, forget the moment
Bind a dblClick event handler to the calendar div. When it fires, check if there is a remembered moment and do something with it.

Code:

$('#calendar').fullCalendar({
    ...
    dayClick: dayClickCallback,
    ...
});

var slotMoment;

function dayClickCallback(date){
    slotMoment = date;
    $("#calendar").on("mousemove", forgetSlot);
}

function forgetSlot(){
    slotMoment = null;
    $("#calendar").off("mousemove", forgetSlot);
}

$("#calendar").dblclick(function() {
    if(slotMoment){
        console.log(slotMoment); //do something with the moment
    }
});

How to add new events on double click for fullcalendar plugin

1 Answers