全日历日双击回调

Question

我需要实现对 dblclick 起作用的功能，例如 dayClick 回调。我尝试了所有找到的解决方案，但对我没有任何用处，例如 Michel's answer。顺便说一句，所有的线程都很旧。

这个问题看起来很微不足道，但我运行不知道为什么它不起作用。

有谁知道在最新版本中应该怎么做？

更新

好的，我找到问题了:) 当我设置这个选项时它停止工作：selectable: true

我改为添加：

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

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

并且完美运行:)

感谢您的帮助。

更新 2

但是，上述方案并不完美。一些元素覆盖了一天的对象，它不能在一天的整个表面上工作，所以我想出了另一个解决方案：

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}"

Answer 1

fullcalendar V1.x

与 eventRender Click for jsfiddle link.

配合使用效果很好

eventRender 在呈现事件时触发。 && dayRender 是一个用于修改日期单元格的挂钩。 Click for dayRender docs

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

Answer 2

                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");
                }
            },

双击可以兑现时间

Answer 3

我运行遇到了与@Szymon Rut 相同的问题，双击在整个单元格中不起作用，在单元格的左上角没有响应。对我有用的是简单地使用 on() 而不是 bind() ...

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

Answer 4

我认为这是一个常见问题，通常需要进行一些黑客攻击。 @Valar Morghulas 的事件渲染解决方案很适合捕获事件双击。不过，对于日历的其余部分，也许这有点干净。

（您基本上可以使用 dateClick 回调记住单击一次的日期，一旦鼠标移动就忘记了）

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);
    }
});

Answer 5

将 currentTime 设为静态变量并将张庭升的代码包装在一个函数中，然后它可以在任何 'Click' 处理程序中使用：

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;
    }
}

...在 FullCalendar 处理程序中使用：

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

Answer 6

有点老套，但您可以很容易地 "emulate" 在 dayClick 回调挂钩中双击。优点是您可以在 date moment()-变量中获得点击日期和时间。

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)
        }
    }
});

全日历日双击回调

Fullcalendar day doubleclick callback

jquery

fullcalendar