问题
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.
Thanks in advance!
/Adam
回答1:
Adam's post at https://code.google.com/p/fullcalendar/issues/detail?id=231 uses this solution.
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:
$('#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.
回答2:
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: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 and doubleClick are declared before the call to initialize the calendar.
回答3:
Just to add to Juan Gonzales's answer:
$("#calendar").fullCalendar({
dayRender: function(date, element, view){
element.bind('dblclick', function() {
alert('double click!');
});
}
});
This code will create the dblclick event to the whole "day" event.
Source
回答4:
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
$('#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)
})
}
})
回答5:
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.
As previous stated, open fullcalendar.js, search for something like "trigger('eventClick'" and you will hit some code that looks like this:
$.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):
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.
回答6:
Use selector jquery $(info.el).on to bind dblclick in eventRender
Note : Solution just for fullcalendar V4)
$('#calendar').fullCalendar({
eventRender: function(info) {
$(info.el).on('dblclick', function() {
alert('double click!');
});
}
})
it works for me ! :)
回答7:
I got this working by modifying the fullcalendar.js which didn't seem like a big deal to me. Anyways, here is how you add a double click event:
- 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 eventClick for the parameters)
eventDblClick: function (calEvent, jsEvent, view) { // Create a new appointment }
Note: You can add any jquery function to the event this way!
回答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");
}
},
get current time for dayClick
回答9:
Updated Nullorado's solution to 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:
Open fullcalendar.js, search for something like "bindSegHandlersToEl" and you will hit some code that looks like this:
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: 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();
}
},
Copy it and rename:
- "handleSegClick" to "handleSegDoubleClick"
- "eventClick" to "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:
eventDoubleClick: function(calEvent, jsEvent, view) {
alert('Event: ' + calEvent.title);
}
Works in Chrome and IE11.
回答10:
I thought I would share how I address adding dblclick this through the API versus code modification with the fullcalendar version 4 that exposed the property through one object reference.
Here is the working example: 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 );
}
});
}
来源：https://stackoverflow.com/questions/8124460/handle-dblclick-in-fullcalendar-jquery-plugin