FullCalendar日曆控件使用小結

      FullCalendar做爲一個功能完善的日曆插件使用很是普遍，在WEB開發過程當中很是流行。它與EXT JS中的Calendar很是相似，但考慮到EXTjs比較「複雜龐大」，因此我在開發過程當中都會優先考慮FullCalendar。

      FullCalendar的使用比較簡單，上手很快。我這裏簡單向你們介紹一下它的基本用法，若是須要更加深刻的學習或者改寫該日曆，還須要你們線下多學習。

1、在網頁中引用FullCalendar

引用的第一個文件爲jquery-ui樣式文件，用覺得fc日曆改變主題樣式，第二個文件爲fc日曆的基礎樣式文件，規定了在網頁上畫出日曆框圖時的相關樣式。第四個文件，是fc腳本。

2、在網頁上放置日曆容器

3、日曆初始化

經過以上三個步驟咱們就能夠在頁面上添加一個簡單的日曆。這個日曆如今不能作多少事情，只能顯示月份，星期幾。咱們須要的遠遠不止這些。因此接下來，咱們須要對它進行完善。

4、對日曆進行漢化

FC是英文版的，可是咱們在開發過程當中絕大部分都是中文環境，因此咱們須要作適當的漢化工做。

漢化前：

漢化後：

（1）firstDay指的是在日曆視圖中，將第幾天做爲開始。歐美國家週日是做爲一週的開始，咱們則習慣週一做爲一週的開始，因此firstDay改成1，這裏的1是指dayNames中的序號。

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

5、12小時轉化爲24小時使用

爲了更加方便時鐘顯示，不採用AM和PM來對上午和下午進行標識。統一採用24小時計時。

修改前：

修改後：

六、設置日曆顯示格式，根據當月週數來顯示對應的行數，添加日曆主題樣式

七、添加經常使用事件

通過上面這幾步，一個功能較全的日曆控件就作好了。你能夠根據本身的須要在各事件中添加本身想要添加的方法。

 

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

FC官網：http://arshaw.com/fullcalendar/