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

Adams Beitrag unter https://code.google.com/p/fullcalendar/issues/detail?id=231 verwendet diese Lösung.

Wann immer möglich, möchte ich diese Fullcalendar heraushalten und die Leute sie über die API erledigen lassen. der einzige Grund ich eventClick/eventMouseover/eventMouseout als Teil des Kerns habe ist b/c sie beinhalten einige Sonderfälle, wie z.B. Konflikte mit Jquery ui ziehen & Größenänderung, so muss ich Dinge wie die Überprüfung für diese tun Klassen.

Ich denke, der beste Weg, um Event-Handler wie dblclick anzufügen, wäre durch eventRender wie folgt:

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

Bitte lassen Sie mich wissen, wenn Sie anders denken. Danke

Ich habe das neueste Update und das funktioniert bei mir hervorragend.

Answer 2

Ich lief über das gleiche Problem und wollte nicht mit dem Kern fummeln, so schrieb ich Doppelklick-Logik in die 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 y doubleClick werden vor dem Aufruf zur Initialisierung des Kalenders deklariert.

Answer 3

Nur als Ergänzung zu Juan Gonzales' Antwort:

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

Dieser Code erzeugt die dblclick Ereignis auf das gesamte Ereignis "Tag".

Quelle

Answer 4

Der nachstehende Code zeigt Doppelklick-Ereignisse für Ereignis und Tag. Für den Tag müssen Sie auf die untere Seite (untere Hälfte) der Datumszelle doppelklicken. Ich weiß nicht, was der Grund dafür ist

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

Answer 5

Okay, dies ist wahrscheinlich ein alter Thread, aber ich werde meine fünf Cent zu diesem Thema beitragen. Seit der Version 2 (derzeit 2.4.0) scheint es ein bisschen anders Stück Code verwalten die Klick-Ereignisse. Also so habe ich es gelöst.

Wie bereits erwähnt, öffnen Sie fullcalendar.js, suchen Sie nach etwas wie "trigger('eventClick'" und Sie werden auf einen Code stoßen, der wie folgt aussieht:

$.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 .......

um den Doppelklick zu erhalten, müssen Sie nur dieses kleine Codestück zwischen Klick und Mousedown (oder was auch immer Ihren Wünschen entspricht) einfügen:

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

Jetzt müssen Sie es nur noch im Initialisierungsobjekt angeben.

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

Hat bei mir in Chrome funktioniert, ich habe diese Lösung nirgendwo anders getestet.