Die DayClick-Methode von FullCalendar extern auslösen?

Ich benutze Arshaws FullCalendar und ich versuche, einen Benutzer zu simulieren, der auf eine Zelle klickt, sobald die Seite geladen ist. Ich versuche, dies zu tun, damit ich auf eine URL gehen möglicherweise wie /Calendar/AddEvent und der Kalender wird automatisch ein Dialog mit meinem Add Ereignis Formular öffnen inDie DayClick-Methode von FullCalendar extern auslösen?

Nehmen Sie die Einrichtung folgendes:. (Fiddle here)

HTML

<div> 
    <div id="calendar" data-year="2013" data-month="04" ></div> 
</div>

jQuery

$('#calendar').fullCalendar({ 
     firstDay: 1, 
     selectable: true, 
     dayClick: function (start, allDay, jsEvent, view) { 
        alert('You clicked me!'); 
     } 
    });

hat standardmäßig die Zelle für heute die Klasse .fc-today, die ich habe versucht Vorteil indem Sie folgendermaßen vorgehen zu nehmen: scheinen

$('.fc-today').trigger('click');

Dies gilt allerdings nicht zu arbeiten. Kann ich etwas tun wie

Jede Hilfe wird geschätzt.

Quelle

2013-04-04 Steve Day

was meinst du mit extern auslösenden? http://jsfiddle.net/vb56M/20/ –

können Sie jquery trigger Veranstaltung auf div innen td mit fc-today Klasse verwenden:

$('td.fc-today div').trigger('click');

Quelle

2013-04-05 07:15:08

Danke für die Antwort. Leider funktioniert das auch nicht. Siehe meine neueste Geige für ein Beispiel http://jsfiddle.net/vb56M/5/. Ich habe die Hintergrundfarbe des Div gleichzeitig geändert, um sicherzustellen, dass der Selektor tatsächlich die richtige Zelle findet (ist es). –

haben Sie das in Ihrer App versucht? (nicht in jfiddle), wenn ich $ ('td.fc-today div') austrage ('click').css ('backgroundColor', 'rot'); von Firebug-Konsole in meiner App, der Hintergrund war Änderung –

Ja, ich tat, änderte die Hintergrundfarbe gut, aber die Alarm-Box, die ich beim Klicken auf einen Tag geöffnet hatte, erschien nicht. Ich habe nur die Hintergrundfarbe geändert, um zu sehen, ob jQuery das richtige Element fand –

ich in dieses Thema in meinem usecase auch lief, und das ist, was ich Arbeiten für mich gefunden, nach dem Graben um in der Quellcode des Vollkalenders. Sie müssen manuell ein mousedown und mouseup Ereignis erstellen (technisch ist das mouseup optional, aber Sie können es verwenden, um den Zustand 'angeklickt' des td zurückzusetzen), der die Koordinaten der X- und Y-Position des gewünschten Elements enthält "klicken". Wichtig ist auch der Parameter which, der auf 1 gesetzt werden muss, damit er passes the isPrimaryMouseButton check ist.

dies mit im Auge, würde der Code wie folgt aussehen (man beachte ich die $('#click') geändert, um eine mousedown Ereignis zu verwenden, so dass es nur einmal ausgeführt wird): http://jsfiddle.net/vyxte25r/

$('#click').on('mousedown', function() { 
    var today = $('td.fc-today'); 
    var down = new $.Event("mousedown"); 
    var up = new $.Event("mouseup"); 
    down.which = up.which = 1; 
    down.pageX = up.pageX = today.offset().left; 
    down.pageY = up.pageY = today.offset().top; 
    today.trigger(down); 
    today.trigger(up); //this is optional if you just want the dayClick event, but running this allows you to reset the 'clicked' state of the <td> 
});

Hier eine Arbeits Geige ist

Quelle

2015-12-10 03:16:55 kevinyuliawan

Gute Arbeit! Ich musste 1 links und oben hinzufügen, um zu vermeiden, dass ich trotzdem auf den falschen Tag klicke –

Kevins Antwort zu modifizieren funktionierte für mich. Ich musste das dayClick-Ereignis per Tastatur zugänglich machen. Das Hinzufügen des Ereignis-Listeners zu jeder Zelle mithilfe der DayRender-Methode ermöglicht es uns, das DayClick-Ereignis für jeden Tag einfach zu handhaben. Hier ist, wie ich es erreicht:

dayRender: function(date, cell) { 
    // Allow keyboard to access and interact with calendar days 
    $(cell).attr("tabindex", "0").on("keydown", function(e) { 
    if (e.which === 32 || e.which === 13) { 
     var day = $(this); 
     var down = new $.Event("mousedown"); 
     var up = new $.Event("mouseup"); 
     var eventParams = { which: 1, pageX: day.offset().left, pageY: day.offset().top }; 

     day.trigger($.extend(true, {}, down, eventParams)); 
     day.trigger($.extend(true, {}, up, eventParams)); 
    } 
    }); 
}

Relevante Dokumentation: https://fullcalendar.io/docs/display/dayRender/

Quelle

2017-04-20 21:15:13

Die DayClick-Methode von FullCalendar extern auslösen?

Antwort

Verwandte Themen