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
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.
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.
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.
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.
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:
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!
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
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:
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.
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) }) } })