Fullcalendar day doubleclick callback

问题

I need implement function working on dblclick, like dayClick callback. I tried all solutions, which I found, but nothing work for me, eg Michel's answer. By the way, all threads are quite old.

The problem seems so trivial, but I ran out of ideas why it doesn't work.

Does anyone know how this should be done in the latest version?

UPDATE

ok, I found the problem :) it stops working when I set this option: selectable: true

I add this instead:

dayRender: (date, element, view) ->
    element.bind "dblclick", ->
        alert "double click!"

dayClick: (date, jsEvent, view) ->
    $(".fc-highlight").removeClass("fc-highlight")
    $(jsEvent.toElement).addClass("fc-highlight")

And works perfectly :)

Thanks for Your help.

UPDATE 2

However, the above solution is not perfect. Some elements cover day object and it doesn't work on entire surface of day, so I came up with another solution:

findClickedDay = (e) ->
    days = $("#calendar .fc-day")
    i = 0
    while i < days.length
        day = $(days[i])
        mouseX = e.pageX
        mouseY = e.pageY
        offset = day.offset()
        width = day.width()
        height = day.height()
        if mouseX > offset.left and mouseX < offset.left + width and mouseY > offset.top and mouseY < offset.top + height
          return day
        i++

eventAfterAllRender: (view) =>
    $("#calendar").bind "dblclick", (e) =>
        clickedDay = findClickedDay(e);
        if clickedDay.length == 0 then return
        date = new Date(clickedDay.data('date'))
        alert "dblclick on date: #{date}"

回答1:

fullcalendar V1.x

It works fine with eventRender Click for jsfiddle link.

The eventRender Triggered while an event is being rendered. && dayRender is A hook for modifying a day cell. Click for dayRender docs

eventRender: function(event, element) {
    element.bind('dblclick', function() {
       alert('double click!');
    });
},

回答2:

I Think this is a common problem that usually requires some hacking. @Valar Morghulas's event render solution is nice to catch the event doubleclicks. For the rest of the calendar though, maybe this is a bit cleaner.

(You basically remember the date on a single click using the dateClick callback and forget it once the mouse moves)

jsfiddle demo

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

var slotDate;

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

function eventRenderCallback(event,element){
    element.on("dblclick",function(){
        dblClickFunction(event.start)          
    });   
}

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

function dblClickFunction(date){
    alert(date);
}

$("#calendar").dblclick(function() {
    if(slotDate){
        dblClickFunction(slotDate);
    }
});

回答3:

                dayClick: function(date, jsEvent, view) {
                prevTime = typeof currentTime === 'undefined' || currentTime === null
                    ? new Date().getTime() - 1000000
                    : currentTime;
                currentTime = new Date().getTime();

                if (currentTime - prevTime < 500)
                {
                    //double click call back
                    console.log("this is double click");
                }
            },

you can cash time for double click

回答4:

I ran into the same issue as @Szymon Rut, with the double click not working in the whole cell, not responding in the top left of a cell. What worked for me was simply using on() instead of bind() ...

dayFunction = function(date, cell) {
    cell.on('dblclick', {date: date}, function(e) {
        var view = 'month';
        self.openAddEvent(e, view,  e.data.date)
    });
}

回答5:

Make currentTime a static variable and wrap 張庭昇s code in a function, then it could be used in any of the 'Click' handlers:

FullCalendarActions = {
    currentTime: null, 
    isDblClick : function() {
        var prevTime = typeof FullCalendarActions.currentTime === null
        ? new Date().getTime() - 1000000
        : FullCalendarActions.currentTime;
        FullCalendarActions.currentTime= new Date().getTime();
        return FullCalendarActions.currentTime - prevTime < 500;
    }
}

... Use in FullCalendar Handlers:

dayClick : function(date, jsEvent, view) {
    if (FullCalendarActions.isDblClick()){
        // whatever...
    }
}

回答6:

A bit hacky, but you can quite easily "emulate" a double click within the dayClick callback hook. The advantage is that you have the clicked date and time available in the date moment()-variable.

var doubleClick = false;
$('#calendar').fullCalendar({
    dayClick: function(date, jsEvent, view) {
        if(!doubleClick) {
            doubleClick = true;
            setTimeout(function() { doubleClick = false; }, 500); //this waits for a second click for the next 500ms
        }
        else {
            //do your double click action here (date and time available in date variable)
        }
    }
});

来源：https://stackoverflow.com/questions/29491230/fullcalendar-day-doubleclick-callback

标签

jquery

fullcalendar