FullCalendar是一款基于jQuery的日歷插件，適用于各種日程安排、工作計(jì)劃等場(chǎng)景，您可以很方便的查看查看待辦事項(xiàng)，標(biāo)記重要事項(xiàng)以及綁定點(diǎn)擊和拖動(dòng)事件，能快速的整合到您的項(xiàng)目中，本文將簡(jiǎn)單介紹FullCalendar的使用。

?

HTML

首先第一步就是在需要調(diào)用FullCalendar日歷的頁(yè)面中載入必要的javascript和css文件，包括jQuery庫(kù)文件，F(xiàn)ullCalendar插件以及FullCalendar樣式表。如果您還想要拖動(dòng)日歷的功能，就還需要加入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> 
      

?

然后，在頁(yè)面的body里加入div#calendar，用來放置日歷主體。

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

?

jQuery

現(xiàn)在我們需要在頁(yè)面加載完成后，調(diào)用FullCalendar插件初始化日歷，使用jQuery代碼：

        $(document).ready(function() { 
    //頁(yè)面加載完初始化日歷 
    $('#calendar').fullCalendar({ 
        //設(shè)置選項(xiàng)和回調(diào) 
    }) 
}); 
      

?

然后保存并瀏覽頁(yè)面，你會(huì)發(fā)現(xiàn)頁(yè)面中已經(jīng)顯示一個(gè)很大的日歷表了。當(dāng)然這還只是一個(gè)初步的日歷，F(xiàn)ullCalendar的強(qiáng)大之處在于它提供了豐富的選項(xiàng)設(shè)置、方法及事件，可以很方便的擴(kuò)展，打造你想要的日歷表，先來做一下簡(jiǎn)單了解。

?

Options

FullCalendar官方文檔中提供了豐富的操作選項(xiàng)設(shè)置，比如是否在日歷中顯示周末等等，使用方法：

        $('#calendar').fullCalendar({ 
    weekends: false //不顯示周末，將會(huì)隱藏周六和周日 
}); 
      

?

Callbacks

當(dāng)點(diǎn)擊或者拖動(dòng)等事件發(fā)生時(shí)，可以調(diào)用相關(guān)函數(shù)，比如點(diǎn)擊某一天時(shí)，彈出提示框：

        $('#calendar').fullCalendar({ 
    dayClick: function() { 
        alert('a day has been clicked!'); 
    } 
}); 
      

?

Methods

FullCalendar提供了很多方法可以調(diào)用，諸如進(jìn)入下一個(gè)月視圖等，代碼可以這樣寫：

        $('#calendar').fullCalendar('next'); 
      

?

以上代碼調(diào)用了next方法后，日歷視圖切換到下一月（周、日）的視圖。

本文簡(jiǎn)單介紹一下FullCalendar的使用，F(xiàn)ullCalendar的官方網(wǎng)址是： http://arshaw.com/fullcalendar/ ，接下來我們會(huì)有文章專門介紹FullCalendar的文檔詳細(xì)選項(xiàng)、事件和方法的使用，以及結(jié)合實(shí)際項(xiàng)目的后臺(tái)PHP、MySql進(jìn)行實(shí)戰(zhàn)演示，敬請(qǐng)關(guān)注。

?