FullCalendar作為一個功能完善的日歷插件使用非常廣泛，在WEB開發(fā)過程中非常流行。它與EXT JS中的Calendar非常類似，但考慮到EXTjs比較“復雜龐大”，所以我在開發(fā)過程中都會優(yōu)先考慮FullCalendar。

FullCalendar的使用比較簡單，上手很快。我這里簡單向大家介紹一下它的基本用法，如果需要更加深入的學習或者改寫該日歷，還需要大家線下多學習。

一、在網(wǎng)頁中引用FullCalendar

引用的第一個文件為jquery-ui樣式文件，用以為fc日歷改變主題樣式，第二個文件為fc日歷的基礎樣式文件，規(guī)定了在網(wǎng)頁上畫出日歷框圖時的相關樣式。第四個文件，是fc腳本。

二、在網(wǎng)頁上放置日歷容器

三、日歷初始化

通過以上三個步驟我們就可以在頁面上添加一個簡單的日歷。這個日歷現(xiàn)在不能做多少事情，只能顯示月份，星期幾。我們需要的遠遠不止這些。所以接下來，我們需要對它進行完善。

四、對日歷進行漢化

FC是英文版的，但是我們在開發(fā)過程中絕大部分都是中文環(huán)境，所以我們需要做適當?shù)臐h化工作。

漢化前：

漢化后：

（1）firstDay指的是在日歷視圖中，將第幾天作為開始。歐美國家周日是作為一周的開始，我們則習慣周一作為一周的開始，所以firstDay改為1，這里的1是指dayNames中的序號。

（2）修改月份和星期，還有TODAY。

五、12小時轉化為24小時使用

為了更加方便時鐘顯示，不采用AM和PM來對上午和下午進行標識。統(tǒng)一采用24小時計時。

修改前：

修改后：

6、設置日歷顯示格式，根據(jù)當月周數(shù)來顯示對應的行數(shù)，添加日歷主題樣式

7、添加常用事件

經(jīng)過上面這幾步，一個功能較全的日歷控件就做好了。你可以根據(jù)自己的需要在各事件中添加自己想要添加的方法。

源代碼：http://files.cnblogs.com/allon6318/fcstudy1.rar

FC官網(wǎng)：http://arshaw.com/fullcalendar/

總結

以上是生活随笔為你收集整理的FullCalendar日历控件使用小结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。