calendario completo non visualizzato quando caricato (con backbone)

Question

Sto usando il plugin jQuery full calendar in congiunzione con backbone.js e con un problema in cui non viene visualizzato correttamente al momento del primo caricamento.

Questa è la mia funzione di rendering per la vista dorsale che contiene il calendario:

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

Potete vedere che ho un timeout impostato per 500 ms inclusi. Quando tardo 500 ms e poi cambi la vista in agendaWeek, verrà visualizzata. Tuttavia, se non ritardo, il calendario non viene visualizzato. Non ci sono errori stampati in entrambi i casi.

Sono in perdita di cosa provare qui o cosa potrebbe andare storto. C'è una richiamata per la creazione del calendario che mi manca da qualche parte nei documenti?

Grazie

EDIT: potrebbe essere che l'html() funciton non è completa e causando un problema?

Answer 1

Ho avuto un problema simile e pensa che questa informazioni importanti nella documentazione:

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

Il mio calendario è stato su una scheda al momento selezionata rendendo il contenitore principale non visibile e quindi non disegnato correttamente. Aggiunta una chiamata al metodo di rendering dopo aver selezionato la scheda e tutto ha funzionato alla grande.

Il problema potrebbe essere risolto in modo simile.

Answer 2

Sto usando backbone.js e anche io ho avuto lo stesso problema.

Stavo dichiarando e inizializzando il calendario nell'evento OnRender().

In seguito per risolvere il problema, ho spostato il codice per la dichiarazione e l'inizializzazione del calendario in un evento OnShow().

Problema:

Secondo il mio problema era perché richiede elemento non era presente sul DOM. OnShow() viene generato quando il DOM è completamente pronto.

Finalmente ha funzionato per me.