2012-02-27 102 views
2

我試圖fullcalendar和日期選擇器連接在一起,形成了自己一個很好的日曆,但我遇到了下面的錯誤與我的代碼:

錯誤信息:

$( 「#日期選擇器」)日期選擇器是不是一個函數

這裏是我的代碼:

<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' /> 
<link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.print.css' media='print' /> 
<link href="../scripts/jquery-ui-1.7.3.custom.css" rel="stylesheet" type="text/css" /> 
<link rel="stylesheet" href="../Styles/dark-hive/jquery.ui.all.css"> 
<script src="../jquery/jquery-1.7.1.js"></script> 
    <script type='text/javascript' src='../jquery/jquery-ui-1.8.17.custom.min.js'></script> 
<script src="../jquery/ui/jquery.ui.core.js"></script> 
<script src="../scripts/ui/jquery.ui.datepicker.js"></script> 
<script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script> 

<script type='text/javascript'> 
$(function() {    
    $('#calendar').fullCalendar({ 
     theme: true, 
     header: { 
      left: '', 
      center: '', 
      right: '' 
     }, 
     defaultView: 'agendaDay', 
     editable: false, 
     events: "../fullcalendar/JSONcreator" 
    }); 
    $('#datepicker').datepicker({ 
     inline: true, 
     onSelect: function(dateText, inst) { 
      var d = new Date(dateText); 
      $('#calendar').fullCalendar('gotoDate', d); 
     } 
    }); 
}) 
</script> 

另外,有什麼辦法擺脫頂部的一些JQuery腳本調用?有很多,看起來很雜亂,但我是JQuery的新手。

+0

可能的重複http://stackoverflow.com/questions/1212696/jquery-ui-datepicker-datepicker-is-not-a-function – 2012-02-27 16:35:34

+0

這是一個不同的問題。 – 2012-02-27 16:37:50

+3

不應該在您的fullcalendar插件之前加載jquery嗎? – 2012-02-27 16:38:14

回答

6

在頁面加載之前,您正在加載fullcalendar.min.jsjquery-1.7.1.jsjquery.ui.core.jsjquery.ui.datepicker.js。將它放在它們下面,否則它不能擴展它們的功能。

您還可以通過將您的jQuery功能於一體<script>標籤,而不是兩個減少代碼:

<script type='text/javascript'> 
$(function() {    
    $('#calendar').fullCalendar({ 
     theme: true, 
     header: { 
      left: '', 
      center: '', 
      right: '' 
     }, 
     defaultView: 'agendaDay', 
     editable: false, 
     events: "../fullcalendar/JSONcreator" 
    }); 
    $('#datepicker').datepicker({ 
     inline: true, 
     onSelect: function(dateText, inst) { 
      var d = new Date(dateText); 
      $('#calendar').fullCalendar('gotoDate', d); 
     } 
    }); 
}) 
</script> 
+0

感謝您的回答!我現在更新了上面的代碼,但同樣的問題仍然存在! – 2012-02-27 16:57:02

+0

嘗試清除緩存。使用Firebug或Chrome的Inspect Element工具來找出你的JavaScript出錯的地方。如果它說'$(「#datepicker」)。datepicker不是一個函數',它通常意味着你的內聯JavaScript函數沒有連接到你的外部jQuery庫 – hohner 2012-02-27 17:05:35

+0

這是真的,工作謝謝..... .. – normalUser 2014-04-03 14:24:04

0

您可以鞏固你的jQuery這樣:

$(document).ready(function() { 
    // fullCalendar    
    $('#calendar').fullCalendar({ 
    theme: true, 
    header: { 
     left: '', 
     center: '', 
     right: '' 
    }, 
    defaultView: 'agendaDay', 
    editable: false, 
    events: "../fullcalendar/JSONcreator" 
    }); 

    // jQuery UI datepicker 
    $('#datepicker').datepicker({ 
    inline: true, 
    onSelect: function(dateText, inst) { 
     var d = new Date(dateText); 
     $('#calendar').fullCalendar('gotoDate', d); 
    } 
    }); 
}); 

您應該只有一個$(document).ready(function() {});聲明。將其保存在底部的<script>標籤內。這是一樣的,要求load事件偵聽器這樣:window.addEventListener('load', function(){}, false);

同時,確保之前聲明它們的腳本加載。

相關問題