2017-01-01 316 views
0

$(document).ready(function() { 
 

 
    // page is now ready, initialize the calendar... 
 

 
    $('#calendar').fullCalendar({ 
 
     // put your options and callbacks here 
 
     left: 'Calendar', 
 
     center: '', 
 
     right: 'today prev,next' 
 
    }) 
 

 
});
<html> 
 
    <head> 
 
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> 
 
<script src='/js/fullcalendar/lib/moment.min.js'></script> 
 
<script src='http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js'></script> 
 
<link rel='stylesheet' href='/js/fullcalendar/fullcalendar.css' /> 
 
    </head> 
 
    <body> 
 
    <div id='calendar'></div> 
 
    </body> 
 

 
    </html>

我想用我的刀模板添加日曆和我結束了這個錯誤。

app.js:3 Uncaught TypeError: $(...).fullCalendar is not a function(…)

我的頭部分看起來像這樣

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> 
<script src='/js/fullcalendar/lib/moment.min.js'></script> 
<script src='http://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js'></script> 
<link rel='stylesheet' href='/js/fullcalendar/fullcalendar.css' /> 

,比之後我打電話fullCalender現成事件

<script> 
$(document).ready(function() { 

    // page is now ready, initialize the calendar... 

    $('#calendar').fullCalendar({ 
     // put your options and callbacks here 
    }) 

}); 
</script> 

隨着CDN我試圖獲取最新的jQuery和FullCalendar。

用我的代碼片段添加了/lib/moment.min.js我確認這個文件從我的本地機器加載得很好。

+1

把你的腳本放在你的html的底部,而不是頭標記 –

+0

@SamarRizvi我已經試過了。到目前爲止沒有運氣。 – vsoni

+0

你能舉起一把小提琴來檢查 –

回答

1

包括包括你的jQuery庫

<html> 
 
     <head> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
     <script src="https://momentjs.com/downloads/moment.min.js"></script> 
 
     <script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.js'></script> 
 
     <link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.1.0/fullcalendar.min.css" /> 
 
     </head> 
 
     <body> 
 
     <div id='calendar'></div> 
 

 
     <script> 
 
      $(document).ready(function() { 
 

 
      // page is now ready, initialize the calendar... 
 

 
      $('#calendar').fullCalendar({ 
 
       // put your options and callbacks here 
 
       left: 'Calendar', 
 
       center: '', 
 
       right: 'today prev,next' 
 
       }); 
 

 
      }); 
 
     </script> 
 
     </body> 
 
     </html>

1

哪裏是你的jQuery用戶界面後,你的腳本,你需要運行在底部和css在頂部的腳本。

Codepen演示http://codepen.io/norcaljohnny/pen/OWLjaX

<head> 
<link rel='stylesheet' href='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.css' /> 
</head> 

<body> 
<div id='calendar'></div> 

<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/moment.min.js'></script> 
<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery.min.js'></script> 
<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/lib/jquery-ui.min.js'></script> 
<script src='https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.min.js'></script> 
</body> 

這是從顯影劑樣品源。

> <meta charset='utf-8' /> <link href='../fullcalendar.min.css' 
> rel='stylesheet' /> <link href='../fullcalendar.print.min.css' 
> rel='stylesheet' media='print' /> <script 
> src='../lib/moment.min.js'></script> <script 
> src='../lib/jquery.min.js'></script> <script 
> src='../lib/jquery-ui.min.js'></script> <script 
> src='../fullcalendar.min.js'></script> <script> 
0

我很感激所有的時間來幫助我在這裏。 我發現我有其他.js文件駐留在導致此問題的頁面底部。我評論說,.js和我的日曆顯示在我的刀片模板上。 謝謝大家。

相關問題