2015-07-06 2 views
5

Sto tentando di utilizzare il modulo calendario google del plug-in fullcalendar in JavaScript. Quando si tenta di caricare il calendario di Google, la console sta visualizzando:Plugin fullCalendar JavaScript che legge 'applyAll' come non definito in gcal.js

Uncaught TypeError: Cannot read property 'applyAll' of undefined 

L'errore si verifica sulla linea 23 della gcal.js:

21| var fc = $.fullCalendar; 
22| console.log($.fullCalendar); 
23| var applyAll = fc.applyAll; 

Il console.log() che ho aggiunto restituisce $ .fullCalendar come non definito, quindi anche fc.applyAll restituisce undefined. La mia conoscenza di JS non è abbastanza buona per capire appieno cosa sta succedendo in questo file, e non sono sicuro di cosa stia andando storto.

Ecco il mio html:

<head> 
    <link rel='stylesheet' href='fullcalendar/fullcalendar.css' /> 
    <script src='fullcalendar/lib/jquery.min.js'></script> 
    <script src='fullcalendar/gcal.js'></script> 
    <script src='fullcalendar/lib/moment.min.js'></script> 
    <script src='fullcalendar/fullcalendar.js'></script> 
    <link href='style.css' rel='stylesheet' /> 
</head> 
<body> 
    <div id='calendar'></div> 
</body> 

mio JavaScript:

$(document).ready(function() { 
     $('#calendar').fullCalendar({ 
     googleCalendarApiKey: 'my-api-key', 
     events: { 
      googleCalendarId: 'my-calendar-id' 
     } 
     }); 
    }); 

e io ho scaricato la versione più recente di gcal.js (sembrava che ci fosse un problema con il file, e il sito ha fornito un collegamento alla versione più aggiornata).

risposta

9

Il problema è con l'ordine in cui sono stati importati i file della libreria.

fullcalendar è un plug-in jQuery, che in genere significa che si concluderà come una proprietà sull'oggetto jQuery, ad es. $.fullCalendar.

Ora il file gcal dipende da quella proprietà presente, in modo che possa accedere al metodo .applyAll, tuttavia, si sta caricando gcal.js prima di caricare fullcalendar.js.

Se si modifica l'ordine in questo modo, funziona senza problemi.

<script src='fullcalendar/lib/jquery.min.js'></script> 
<script src='fullcalendar/lib/moment.min.js'></script> 
<script src='fullcalendar/fullcalendar.js'></script> 
<script src='fullcalendar/gcal.js'></script> 

Come regola generale, cercare di mettere i file che si sa non hanno dipendenze (che non si basano su un'altra libreria) prima.

Problemi correlati