Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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}"
like image 968
Szymon Rut Avatar asked Apr 07 '15 12:04

Szymon Rut


2 Answers

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!');
    });
},
like image 147
valar morghulis Avatar answered Sep 18 '22 05:09

valar morghulis


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);
    }
});
like image 35
scottysmalls Avatar answered Sep 21 '22 05:09

scottysmalls