2013-08-12 3 views
8

ich die jQuery-Plugin bin mit full calendar in Verbindung mit Backbone.js und ein Problem mit dem es nicht richtig angezeigt wird, wenn die erste Laden.volle Kalender nicht beim Laden (mit Backbone) Anzeige

Dies ist meine Render-Funktion für die Backbone-Ansicht enthält den Kalender:

render: function() { 

    var that = this; 

    // DEBUG: 
    // console.log({entries: data}); 

    this.$el.html(this.template(this.serialize())); 

    this.$('#calendar').fullCalendar({ 
     header: { 
      left: 'prev,next today', 
      center: 'title', 
      right: 'month,agendaWeek,agendaDay' 
     }, 

     height: that.$el.parent().height() 
    }); 

      // prints undefined 
    console.log(this.$('#calendar').fullCalendar('getView').title); 

    window.setTimeout(function() { 
     this.$('#calendar').fullCalendar('changeView','agendaWeek'); 
    }, 500); 


    return this; 
} 

Sie können sehen, ich eine Reihe Timeout haben für 500 ms enthalten. Wenn ich diese 500 ms verzögere und dann die Ansicht in agendaWeek ändere, wird dies angezeigt. Wenn ich jedoch nicht verzögere, wird der Kalender nicht angezeigt. In beiden Fällen werden keine Fehler gedruckt.

Ich bin im Verlust von was hier zu versuchen oder was schief gehen könnte. Gibt es einen Rückruf für die Erstellung des Kalenders, der mir irgendwo in den Dokumenten fehlt?

Dank

EDIT: könnte es sein, dass die .html() funciton nicht abgeschlossen ist und ein Problem verursacht?

+3

Interessiert sich Fullcalendar vielleicht für die Größe oder Position seines Elements? Ich bin auf ähnliche Probleme mit Google Maps gestoßen und der 'setTimeout (..., 0)' Trick hat für mich funktioniert. –

+0

Ich bin mir ziemlich sicher, dass das Problem ist, worauf @muistooshort angespielt hat. Ich habe das Vollkalender-Plugin benutzt und es interessiert sich für die "Größe und Position" seines Elements. – Jack

+0

Bleibt das Problem, wenn Sie die Höhe fest codieren? Was this.serialize() zurückgibt? –

Antwort

12

Ich hatte ein ähnliches Problem und fand diese wichtigen Informationen in der Dokumentation:

http://arshaw.com/fullcalendar/docs/display/render/

auf einer Registerkarte Mein Kalender derzeit nicht ausgewählt war der Behälter Eltern machen nicht sichtbar und somit nicht korrekt gezeichnet. Nach der Auswahl der Registerkarte wurde der Render-Methode ein Aufruf hinzugefügt, und alles hat gut funktioniert.

Ihr Problem könnte auf ähnliche Weise gelöst werden.

+0

Danke ..! :) –

1

Ich benutze backbone.js und ich hatte auch das gleiche Problem.

Ich erklärte und initialisierte Kalender in OnRender() Ereignis.

Später, um dieses Problem zu lösen, habe ich den Code zum Deklarieren und Initialisieren des Kalenders in ein OnShow() Ereignis verschoben.

Ausgabe:

Nach meiner Frage war es, weil erfordert Element auf dem DOM nicht vorhanden war. OnShow() wird ausgelöst, wenn Ihr DOM vollständig bereit ist.

Endlich hat es für mich funktioniert.

Verwandte Themen