FullCalendar日历控件使用小结
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日历控件使用小结的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 功率与dbm的对照表
- 下一篇: 什么是延展性(Malleability,