Gérer dblclick dans le plugin Fullcalendar jQuery

Je sais que cette question a déjà été posée, mais plusieurs nouvelles versions ont été publiées depuis.

Est-il possible de gérer un événement dblclick pour créer un nouveau rendez-vous dans l’agenda sans avoir à modifier le fichier fullcalendar.js? Ce serait formidable de gérer cette extension dans un fichier séparé avec mes autres réglages.

Merci d’avance!

/Adam

Le message d’Adam à l’ adresse https://code.google.com/p/fullcalendar/issues/detail?id=231 utilise cette solution.

chaque fois que possible, j’aime garder les choses en dehors du kernel de fullcalendar et que les gens les fassent à travers l’api. la seule raison pour laquelle j’ai eventClick / eventMouseover / eventMouseout en tant que partie essentielle est parce qu’ils impliquent des cas particuliers, tels que des conflits avec jquery ui dragging & redizing, je dois donc effectuer des opérations telles que check pour ces classes.

Je pense que la meilleure façon d’attacher des gestionnaires d’événements tels que dblclick serait d’utiliser eventRender de la manière suivante:

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

s’il vous plaît laissez-moi savoir si vous vous sentez différemment. Merci

J’ai la dernière mise à jour et cela fonctionne très bien pour moi.

J’ai rencontré le même problème et je ne voulais pas jouer avec le kernel. J’ai donc écrit la logique du double-clic dans le rappel dayClick.

 dayClick:function( date, allDay, jsEvent, view ) { var singleClick = date.toUTCSsortingng(); if(doubleClick==singleClick){ console.log('Double-click!'); doubleClick = null; }else{ doubleClick=date.toUTCSsortingng(); clearInterval(clickTimer); clickTimer = setInterval(function(){ doubleClick = null; clearInterval(clickTimer); }, 500); } } 

clickTimer et doubleClick sont déclarés avant l’appel d’initialisation du calendrier.

Juste pour append à la réponse de Juan Gonzales :

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

Ce code créera l’événement dblclick pour l’événement “day” complet.

La source

Ok, donc c’est probablement et vieux fil mais je vais donner mes cinq centimes à celui-ci. Depuis la version 2 (actuellement la version 2.4.0), il apparaît un morceau de code légèrement différent qui gère les événements de clic. Alors .. voici comment je l’ai résolu.

Comme indiqué précédemment, ouvrez fullcalendar.js, recherchez quelque chose comme “sortinggger (‘eventClick'” “) et vous obtiendrez un code ressemblant à ceci:

 $.each( { mouseenter: function(seg, ev) { _this.sortingggerSegMouseover(seg, ev); }, mouseleave: function(seg, ev) { _this.sortingggerSegMouseout(seg, ev); }, click: function(seg, ev) { return view.sortinggger('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 ....... 

pour obtenir le double-clic, il suffit d’obtenir ce petit morceau de code entre clic et mousedown (ou tout ce qui vous convient le mieux):

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

Maintenant, tout ce que vous avez à faire est de le spécifier sur l’object d’initialisation.

 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'); } 

Travaillé dans Chrome pour moi, je n’ai testé cette solution nulle part ailleurs.

Le code ci-dessous montre les événements en double-clic pour Event & Day. Pour le jour, vous devez double-cliquer sur le côté inférieur (moitié inférieure) de la cellule de date. Je ne connais pas la raison derrière cela

  $('#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) }) } }) 

J’ai eu ce travail en modifiant le fullcalendar.js qui ne semblait pas être un gros problème pour moi. Quoi qu’il en soit, voici comment vous ajoutez un événement de double clic:

  • Ouvrez fullcalendar.js, recherchez quelque chose comme ” sortinggger (‘eventClick’ “)
  • Vous verrez cette fonction:

     function eventElementHandlers(event, eventElement) { eventElement .click(function (ev) { if (!eventElement.hasClass('ui-draggable-dragging') && !eventElement.hasClass('ui-resizable-resizing')) { return sortinggger('eventClick', this, event, ev); } }) .hover( function (ev) { sortinggger('eventMouseover', this, event, ev); }, function (ev) { sortinggger('eventMouseout', this, event, ev); } ); // TODO: don't fire eventMouseover/eventMouseout *while* dragging is occuring (on subject element) // TODO: same for resizing } 
  • Ajouter cette fonction à la fonction de eventElement (à côté de click / hover)

      .dblclick(function (ev) { return sortinggger('eventDblClick', this, event, ev); }) 
  • Vous pouvez maintenant écrire l’événement de double-clic pour l’événement de calendrier par eventDblClick . Quelque chose comme ceci: (référez-vous à eventClick de la documentation pour les parameters)

     eventDblClick: function (calEvent, jsEvent, view) { // Create a new appointment } 

Remarque: vous pouvez append n’importe quelle fonction jquery à l’événement de cette façon!

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

obtenir l'heure actuelle pour dayClick

Mise à jour de la solution de Nullorado vers la v3.2.0:

Depuis la version 3 (actuellement 3.2.0), il semble y avoir un morceau de code légèrement différent qui gère les événements de clic. Un bon moyen de le résoudre semble être le suivant:

Ouvrez fullcalendar.js, recherchez quelque chose comme “bindSegHandlersToEl” et vous obtiendrez un code ressemblant à ceci:

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

Dans la fonction indiquée ci-dessus, ajoutez cette ligne pour créer un gestionnaire double-clic:

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

Après cela, recherchez “handleSegClick” quelques lignes sous la fonction. Vous trouverez ceci:

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

Copiez- le et renommez:

  1. “handleSegClick” à “handleSegDoubleClick”
  2. “eventClick” à “eventDoubleClick”

Vous vous retrouvez avec ce qui suit:

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

Enfin, accédez à votre object d’initialisation fullcalendar et spécifiez:

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

Fonctionne dans Chrome et IE11.