Question

我知道之前已经问过这个问题，但自那时以来已经发布了几个新版本。

是否可以处理dblclick事件以在日历中创建新约会而无需修改fullcalendar.js文件？与其他调整一起在单独的文件中处理此扩展程序会很棒。

提前致谢！

/亚当

Answer 1

Adam https://code.google.com/p/fullcalendar/issues/detail?id=231的帖子使用了这个解决方案。

只要有可能，我都希望将事情排除在外   fullcalendar，让人们通过api完成它们。唯一的理由   我有eventClick / eventMouseover / eventMouseout作为核心的一部分   b / c它们涉及一些特殊情况，例如与jquery冲突   ui dragging＆amp;调整大小，所以我需要做的事情，如检查那些   类。

我认为附加像dblclick这样的事件处理程序的最佳方法是   通过eventRender就像这样：

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

如果您有不同的感受，请告诉我。感谢

我有最新的更新，这对我很有用。

Answer 2

我遇到了同样的问题并且不想弄乱核心，所以我在dayClick回调中编写了双击逻辑。

dayClick:function( date, allDay, jsEvent, view ) {
            var singleClick = date.toUTCString();

            if(doubleClick==singleClick){
                console.log('Double-click!');
                doubleClick = null;
            }else{
                doubleClick=date.toUTCString();
                clearInterval(clickTimer);
                clickTimer = setInterval(function(){
                    doubleClick = null;
                    clearInterval(clickTimer);
                }, 500);
            }
        }

在调用初始化日历之前声明了

clickTimer和doubleClick。

Answer 3

只需添加到Juan Gonzales's回答：

$("#calendar").fullCalendar({
    dayRender: function(date, element, view){
        element.bind('dblclick', function() {
            alert('double click!');
        });
    }
});

此代码将为整个“day”事件创建dblclick事件。

Source

Answer 4

好的，所以这可能是旧线程，但我要给我的五美分。从版本2（当前为2.4.0）开始，管理点击事件的代码有点不同。所以..这就是我解决它的方式。

如前所述，打开fullcalendar.js，搜索类似＆＃34;触发器（＆＃39; eventClick＆＃39;＆＃34;并且您将点击一些看起来像这样的代码：

$.each(
{
    mouseenter: function(seg, ev) {
        _this.triggerSegMouseover(seg, ev);
    },
    mouseleave: function(seg, ev) {
        _this.triggerSegMouseout(seg, ev);
    },
    click: function(seg, ev) {
        return view.trigger('eventClick', this, seg.event, ev); // can return `false` to cancel
    },
    mousedown: function(seg, ev) {
        if ($(ev.target).is('.fc-resizer') && view.isEventResizable(seg.event)) {
            _this.segResizeMousedown(seg, ev, $(ev.target).is('.fc-start-resizer'));
        }
        else if (view.isEventDraggable(seg.event)) {
            _this.segDragMousedown(seg, ev);
        }
    }
}, and so on .......

所以要获得双击，只需在点击和mousedown（或任何适合你的愿望）之间获得这段代码：

dblclick: function(seg, ev) {
        return view.trigger('eventDoubleClick', this, seg.event, ev); // can return `false` to cancel
    },

现在，您需要做的就是在初始化对象上指定它。

eventDoubleClick: function(calEvent, jsEvent, view) {

    alert('Event: ' + calEvent.title);
    alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
    alert('View: ' + view.name);

    // change the border color just for fun
    $(this).css('border-color', 'red');
}

我在Chrome上工作过，没有在其他任何地方测试过此解决方案。

Answer 5

下面的代码显示了Event＆amp; amp;事件的双击事件。天。 对于白天，您需要双击日期单元格的下侧（下半部分）。我不知道这个

背后的原因

 $('#fullcalendar').fullCalendar({
        header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay',
      },
      events: this.EventList,
      defaultView: 'month',
      editable: true,
      //for event double click
      eventRender:function(event,element){
        element.bind('dblclick',function(){
          alert('double click event')
        });
      },
      //for day double click
      dayRender:function(date,cell)
      {
        cell.bind('dblclick',function(){
          alert(date)
        })
      }
    })

Answer 6

使用选择器jquery $(info.el).on将dblclick绑定到eventRender中注意：仅适用于全日历V4的解决方案）

$('#calendar').fullCalendar({
       eventRender: function(info) {
            $(info.el).on('dblclick', function() {
               alert('double click!');
            });
       }
})

对我有用！：）

Answer 7

我通过修改 fullcalendar.js 来实现这一点，这对我来说似乎没什么大不了的。无论如何，这里是你添加双击事件的方式：

打开fullcalendar.js，搜索“触发器（'eventClick'”

您将看到此功能：

function eventElementHandlers(event, eventElement) {
    eventElement
    .click(function (ev) {
        if (!eventElement.hasClass('ui-draggable-dragging') &&
            !eventElement.hasClass('ui-resizable-resizing')) {
            return trigger('eventClick', this, event, ev);
        }
    })
                .hover(
        function (ev) {
            trigger('eventMouseover', this, event, ev);
        },
        function (ev) {
            trigger('eventMouseout', this, event, ev);
        }
    );
    // TODO: don't fire eventMouseover/eventMouseout *while* dragging is occuring (on subject element)
    // TODO: same for resizing
}

将此函数添加到eventElement的函数（单击/悬停旁边）

  .dblclick(function (ev) {
        return trigger('eventDblClick', this, event, ev);
    })

现在，您可以通过 eventDblClick 为日历事件编写双击事件。这样的事情:(请参阅文档的 eventClick 了解参数）
```
eventDblClick: function (calEvent, jsEvent, view) {
   // Create a new appointment
}
```

注意：您可以通过这种方式向事件添加任何jquery函数！

Answer 8

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

获取dayClick的当前时间

Answer 9

将Nullorado's solution更新为v3.2.0：

从版本3（目前为3.2.0）开始，管理点击事件的代码有点不同。解决问题的好方法如下：

打开fullcalendar.js，搜索类似“bindSegHandlersToEl”的内容，你会看到一些看起来像这样的代码：

bindSegHandlersToEl: function(el) {
    this.bindSegHandlerToEl(el, 'touchstart', this.handleSegTouchStart);
    this.bindSegHandlerToEl(el, 'mouseenter', this.handleSegMouseover);
    this.bindSegHandlerToEl(el, 'mouseleave', this.handleSegMouseout);
    this.bindSegHandlerToEl(el, 'mousedown', this.handleSegMousedown);
    this.bindSegHandlerToEl(el, 'click', this.handleSegClick);
},

在上面显示的函数中，添加此行以创建双击处理程序：

this.bindSegHandlerToEl(el, 'dblclick', this.handleSegDoubleClick);

在此之后，在函数下面找几行“handleSegClick”。你会发现这个：

    handleSegClick: function(seg, ev) {
    var res = this.view.publiclyTrigger('eventClick', seg.el[0], seg.event, ev); // can return `false` to cancel
    if (res === false) {
        ev.preventDefault();
    }
},

复制并重命名：

“handleSegClick”改为“handleSegDoubleClick”
“eventClick”改为“eventDoubleClick”

您最终得到以下信息：

handleSegDoubleClick: function(seg, ev) {
    var res = this.view.publiclyTrigger('eventDoubleClick', seg.el[0], seg.event, ev); // can return `false` to cancel
    if (res === false) {
        ev.preventDefault();
    }
},

最后，转到fullcalendar初始化对象并指定：

eventDoubleClick: function(calEvent, jsEvent, view) {
    alert('Event: ' + calEvent.title);
}

适用于Chrome和IE11。

Answer 10

我想我将分享我如何解决通过API进行 dblclick 而不是通过全日历版本4（通过一个对象引用公开该属性）进行代码修改的问题。

以下是工作示例：Codepen

eventRender: function (info) {

  //WON'T ALLOW ALSO WORK WITH single eventClick or single Click Listener
   //info.el.addEventListener('dblclick', function () {
     //  alert('DOUBLE CLICK!'+info.event.title);
   //});

  info.el.addEventListener('click', function() {
        clickCnt++;         
    if (clickCnt === 1) {
        oneClickTimer = setTimeout(function() {
            clickCnt = 0;
            alert('SINGLE CLICK example value grab:' + info.event.title );
        }, 400);
    } else if (clickCnt === 2) {
        clearTimeout(oneClickTimer);
        clickCnt = 0;
        alert('DOUBLE CLICK example value grab:' + info.event.start );

    }          
  });
}

Answer 11

使用FULLCALENDAR V4：

eventRender: function(info) { 
    $(info.el).tooltip({
      title: info.event.title,
    });
    $(info.el).bind('dblclick', function() {
     alert('double click!');
    });
  },

在Fullcalendar jQuery插件中处理dblclick

11 个答案: