在 Fullcalendar jQuery 插件中处理 dblclick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8124460/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Handle dblclick in Fullcalendar jQuery plugin
提问by adamfinstorp
I know that this question has been asked before, but several new versions have been released since then.
我知道以前有人问过这个问题，但从那时起已经发布了几个新版本。
Is it possible to handle a dblclick event for creating a new appointment in the calendar without having to modify the fullcalendar.js file? It would be great to handle this extension in a separate file together with my other tweaks.
是否可以处理 dblclick 事件以在日历中创建新约会而无需修改 fullcalendar.js 文件？将这个扩展名与我的其他调整一起在一个单独的文件中处理会很棒。
Thanks in advance!
提前致谢！
/Adam
/亚当
回答by Juan Gonzales
Adam's post at https://code.google.com/p/fullcalendar/issues/detail?id=231uses this solution.
Adam 在https://code.google.com/p/fullcalendar/issues/detail?id=231 上的帖子使用了这个解决方案。
whenever possible i like to keep things out of the core of fullcalendar, and have people do them through the api. the only reason i have eventClick/eventMouseover/eventMouseout as part of the core is b/c they involve some special cases, such as conflicting with jquery ui dragging & resizing, so i need to do things like check for those classes.
i think the best way to attach event handlers like dblclick would be through eventRender like so:
只要有可能，我都喜欢将事情排除在 fullcalendar 的核心之外，并让人们通过 api 来做。我将 eventClick/eventMouseover/eventMouseout 作为核心的一部分的唯一原因是 b/c 它们涉及一些特殊情况，例如与 jquery ui 拖动和调整大小冲突，所以我需要做一些检查这些类的事情。
我认为附加事件处理程序（如 dblclick）的最佳方法是通过 eventRender，如下所示：
$('#calendar').fullCalendar({
eventRender: function(event, element) {
element.bind('dblclick', function() {
alert('double click!');
});
}
})
please let me know if you feel differently. thanks
如果您有不同的感受，请告诉我。谢谢
I have the newest update and this works great for me.
我有最新的更新，这对我很有用。
回答by Anthony Watkins
I ran across the same issue and didn't want to fiddle with the core, so I wrote double-click logic into the dayClick callback.
我遇到了同样的问题，不想摆弄核心，所以我在 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);
}
}
clickTimerand doubleClickare declared before the call to initialize the calendar.
clickTimer并doubleClick在调用初始化日历之前声明。
回答by Michel Ayres
Just to add to Juan Gonzales'sanswer:
只是为了补充胡安冈萨雷斯的回答：
$("#calendar").fullCalendar({
dayRender: function(date, element, view){
element.bind('dblclick', function() {
alert('double click!');
});
}
});
This code will create the dblclickevent to the whole "day" event.
此代码将创建dblclick整个“一天”事件的事件。
回答by Sid
Below code shows double click events for Event & Day. For day,You need to double click on lower side (lower half) of date cell. I don't know the reason behind this
下面的代码显示了 Event & Day 的双击事件。 对于天，您需要双击日期单元格的下侧（下半部分）。我不知道这背后的原因
$('#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)
})
}
})
回答by Nullorado
Okay, so this is probably and old thread but I am going to give my five cents to this one. Since the version 2 (currently 2.4.0) it appears there is a bit different piece of code managing the click events. So.. this is how i solved it.
好的，所以这可能是旧线程，但我要给这个线程 5 美分。从版本 2（当前为 2.4.0）开始，管理点击事件的代码有点不同。所以..这就是我解决它的方法。
As previous stated, open fullcalendar.js, search for something like "trigger('eventClick'" and you will hit some code that looks like this:
如前所述，打开 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 .......
so to get the doubleclick, just get this litte piece of code inbetween click and mousedown (or whatever suits your desire):
所以要获得双击，只需在 click 和 mousedown 之间插入一小段代码（或任何适合您的愿望）：
dblclick: function(seg, ev) {
return view.trigger('eventDoubleClick', this, seg.event, ev); // can return `false` to cancel
},
Now, all you need to do is to specifiy it on the initialization object.
现在，您需要做的就是在初始化对象上指定它。
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');
}
Worked in Chrome for me, have not tested this solution anywhere else.
为我在 Chrome 中工作，尚未在其他任何地方测试过此解决方案。
回答by Abdelkarim SEBTI
Use selector jquery $(info.el).onto bind dblclick in eventRenderNote : Solution just for fullcalendar V4)
使用选择器 jquery$(info.el).on绑定eventRenderdblclick 注意：解决方案仅适用于 fullcalendar V4）
$('#calendar').fullCalendar({
eventRender: function(info) {
$(info.el).on('dblclick', function() {
alert('double click!');
});
}
})
it works for me ! :)
这个对我有用 ！:)
回答by Paras Daryanani
Updated Nullorado's solutionto v3.2.0:
将Nullorado 的解决方案更新到 v3.2.0：
Since version 3 (currently 3.2.0) it appears there is a bit different piece of code managing the click events. A good way to solve it seems as followed:
从版本 3（当前为 3.2.0）开始，管理点击事件的代码似乎有点不同。解决它的好方法似乎如下：
Open fullcalendar.js, search for something like "bindSegHandlersToEl" and you will hit some code that looks like this:
打开 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);
},
Within the above shown function, add this line to create a doubleclick handler:
在上面显示的函数中，添加此行以创建双击处理程序：
this.bindSegHandlerToEl(el, 'dblclick', this.handleSegDoubleClick);
After this, look for "handleSegClick" a few lines below the function. You'll find this:
在此之后，在函数下方的几行中寻找“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();
}
},
Copyit and rename:
复制并重命名：
- "handleSegClick" to "handleSegDoubleClick"
- "eventClick" to "eventDoubleClick"
- “handleSegClick”到“handleSegDoubleClick”
- “eventClick”到“eventDoubleClick”
You end up with the following:
您最终会得到以下结果：
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();
}
},
Finally, go to your fullcalendar initialisation object and specify:
最后，转到您的 fullcalendar 初始化对象并指定：
eventDoubleClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
}
Works in Chrome and IE11.
适用于 Chrome 和 IE11。
回答by TimChang
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");
}
},
get current time for dayClick
获取当前时间点击
回答by Aswin Ramakrishnan
I got this working by modifying the fullcalendar.jswhich didn't seem like a big deal to me. Anyways, here is how you add a double click event:
我通过修改fullcalendar.js来完成这项工作，这对我来说似乎没什么大不了的。无论如何，这是添加双击事件的方法：
- Open fullcalendar.js, search for something like "trigger('eventClick'"
You will see this 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 }Add this function to the eventElement's function (next to click / hover)
.dblclick(function (ev) { return trigger('eventDblClick', this, event, ev); })Now you can write the double click event for the calendar event by eventDblClick. Something like this: (Refer to the documentation's eventClickfor the parameters)
eventDblClick: function (calEvent, jsEvent, view) { // Create a new appointment }
- 打开 fullcalendar.js，搜索类似“ trigger('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 }
Note:You can add any jquery function to the event this way!
注意：您可以通过这种方式向事件添加任何 jquery 函数！
回答by moto_geek
I thought I would share how I address adding dblclickthis through the API versus code modification with the fullcalendar version 4 that exposed the property through one object reference.
我想我会分享我如何通过 API 与代码修改来解决添加dblclick这个问题，而 fullcalendar 版本 4 通过一个对象引用公开了该属性。
Here is the working example: Codepen
这是工作示例：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 );
}
});
}
