查看演示 下載源碼
HTML
首先第壹步就是在需要調用FullCalendar日歷的頁面中載入必要的javascript和css文件,包括jQuery庫文件,FullCalendar插件以及FullCalendar樣式表。如果您還想要拖動日歷的功能,就還需要加入jQuery ui插件。
<link rel="stylesheet" type="text/css" href="css/fullcalendar.css">
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery-ui-1.10.2.custom.min.js"></script>
<script src="js/fullcalendar.min.js"></script>
然後,在頁面的body裏加入div#calendar,用來放置日歷主體。
<div id='calendar'></div>
jQuery
現在我們需要在頁面加載完成後,調用FullCalendar插件初始化日歷,使用jQuery代碼:
$(document).ready(function() {
//頁面加載完初始化日歷
$('#calendar').fullCalendar({
//設置選項和回調
})
});
然後保存並瀏覽頁面,妳會發現頁面中已經顯示壹個很大的日歷表了。當然這還只是壹個初步的日歷,FullCalendar的強大之處在於它提供了豐富的選項設置、方法及事件,可以很方便的擴展,打造妳想要的日歷表,先來做壹下簡單了解。
Options
FullCalendar官方文檔中提供了豐富的操作選項設置,比如是否在日歷中顯示周末等等,使用方法:
$('#calendar').fullCalendar({
weekends: false //不顯示周末,將會隱藏周六和周日
});
Callbacks
當點擊或者拖動等事件發生時,可以調用相關函數,比如點擊某壹天時,彈出提示框:
$('#calendar').fullCalendar({
dayClick: function() {
alert('a day has been clicked!');
}
});
Methods
FullCalendar提供了很多方法可以調用,諸如進入下壹個月視圖等,代碼可以這樣寫:
$('#calendar').fullCalendar('next');
以上代碼調用了next方法後,日歷視圖切換到下壹月(周、日)的視圖。