Behandlung von dblclick im Fullcalendar jQuery Plugin

Question

Ich weiß, dass diese Frage schon einmal gestellt wurde, aber seither sind mehrere neue Versionen erschienen.

Ist es möglich, ein dblclick-Ereignis für die Erstellung eines neuen Termins im Kalender zu behandeln, ohne die Datei fullcalendar.js ändern zu müssen? Es wäre toll, diese Erweiterung in einer separaten Datei zusammen mit meinen anderen Tweaks zu behandeln.

Vielen Dank im Voraus!

/Adam

Answer 1

Selektor jquery verwenden $(info.el).on um dblclick in eventRender Hinweis: Lösung nur für Fullcalendar V4)

$('#calendar').fullCalendar({
       eventRender: function(info) {
            $(info.el).on('dblclick', function() {
               alert('double click!');
            });
       }
})

es funktioniert bei mir :)

Answer 2

Ich habe dies durch Änderung der fullcalendar.js was für mich keine große Sache zu sein schien. Wie auch immer, hier ist, wie Sie ein Doppelklick-Ereignis hinzufügen:

• Öffnen Sie fullcalendar.js und suchen Sie nach etwas wie " trigger('eventClick') "

• Sie werden diese Funktion sehen:

  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
  }

• Fügen Sie diese Funktion zur Funktion des eventElements hinzu (neben click / hover)

    .dblclick(function (ev) {
          return trigger('eventDblClick', this, event, ev);
      })

• Jetzt können Sie das Doppelklick-Ereignis für das Kalenderereignis schreiben, indem Sie eventDblClick . Etwa so: (Siehe die Dokumentation zu eventClick für die Parameter)

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

Anmerkung: Auf diese Weise können Sie jede beliebige Jquery-Funktion zu dem Ereignis hinzufügen!

Answer 3

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

aktuelle Uhrzeit für dayClick abrufen

Answer 4

Aktualisiert Nullorados Lösung auf v3.2.0:

Seit Version 3 (derzeit 3.2.0) scheint es ein etwas anderes Stück Code zu geben, das die Klickereignisse verwaltet. Ein guter Weg, um es zu lösen scheint wie folgt:

Öffnen Sie fullcalendar.js, suchen Sie nach etwas wie "bindSegHandlersToEl" und Sie werden auf einen Code stoßen, der wie folgt aussieht:

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

Fügen Sie in der oben gezeigten Funktion diese Zeile hinzu, um einen Doppelklick-Handler zu erstellen:

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

Suchen Sie danach nach "handleSegClick" ein paar Zeilen unterhalb der Funktion. Sie werden dies finden:

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

Kopieren und umbenennen:

1. "handleSegClick" zu "handleSegDoubleClick"
2. "eventClick" zu "eventDoubleClick"

Das Ergebnis ist folgendes:

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

Gehen Sie schließlich zu Ihrem Fullcalendar-Initialisierungsobjekt und geben Sie an:

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

Funktioniert in Chrome und IE11.

Answer 5

Ich möchte Ihnen mitteilen, wie ich das Hinzufügen von dblclick dies durch die API gegenüber der Codeänderung mit der vollständigen Kalenderversion 4, die die Eigenschaft durch einen Objektverweis freilegt.

Hier ist das Arbeitsbeispiel: 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 );

    }          
  });
}