在Fullcalendar jQuery插件中处理dblclick
我知道之前已经提出过这个问题，但自那时以来已经发布了几个新版本。
是否可以处理dblclick事件以在日历中创建新约会而无需修改fullcalendar.js文件？ 与我的其他调整一起在单独的文件中处理此扩展会很棒。
提前致谢！
/亚当
Adam的post位于https://code.google.com/p/fullcalendar/issues/detail?id=231，使用此解决方案。
在任何可能的情况下，我都希望将事情排除在fullcalendar的核心之外，让人们通过api来完成它们。 我将eventClick / eventMouseover / eventMouseout作为核心的一部分的唯一原因是b / c它们涉及一些特殊情况，例如与jquery ui拖动和resize冲突，所以我需要做一些检查这些类的事情。
我认为附加事件处理程序（如dblclick）的最佳方法是通过eventRender，如下所示：
$('#calendar').fullCalendar({ eventRender: function(event, element) { element.bind('dblclick', function() { alert('double click!'); }); } }) 如果您有不同的感受，请告诉我。 谢谢
我有最新的更新，这对我很有用。
我遇到了同样的问题并且不想弄乱核心，所以我在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 。
只是为了补充Juan Gonzales的答案：
$("#calendar").fullCalendar({ dayRender: function(date, element, view){ element.bind('dblclick', function() { alert('double click!'); }); } });
此代码将为整个“day”事件创建dblclick事件。
资源
好吧，所以这可能是旧线程，但我要给我的五美分。 从版本2（当前为2.4.0）开始，管理点击事件的代码就会有所不同。 所以..这就是我解决它的方式。
如前所述，打开fullcalendar.js，搜索类似“trigger（’eventClick’”的内容，你会看到一些看起来像这样的代码：
$.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 .......
所以要获得双击，只需在click和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上工作过，没有在其他任何地方测试过此解决方案。
下面的代码显示了事件和日期的双击事件。 对于白天，您需要双击日期单元格的下侧（下半部分）。 我不知道背后的原因
$('#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) }) } })
我通过修改fullcalendar.js来实现这一点，这对我来说似乎没什么大不了的。 无论如何，这里是你添加双击事件的方式：
- 打开fullcalendar.js，搜索“ trigger（’eventClick’ ”之类的内容
-
你会看到这个function：
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的函数（单击/hover旁边）
.dblclick(function (ev) { return trigger('eventDblClick', this, event, ev); }) -
现在，您可以通过eventDblClick为日历事件编写双击事件。 这样的事情:(参考文档的eventClick参数）
eventDblClick: function (calEvent, jsEvent, view) { // Create a new appointment }
注意：您可以通过这种方式向事件添加任何jquery函数！
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的当前时间
更新了Nullorado的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。