fullCalendar中文API官方文檔

1. 使用方式: 引入相關(guān)js, css后, $(‘#div_name').fullCalendar({//options}); 接受的是一個(gè)option對(duì)象

 2. 普通屬性

　2.1. year, month, date: 整數(shù), 初始化加載時(shí)的日期.

　2.2. defaultView: 字符串類(lèi)型, 默認(rèn)是'month;

　　2.2.1. 允許的views:

　　　2.2.1.1. month 一頁(yè)顯示一月, 日歷樣式

　　　2.2.1.2. basicWeek 一頁(yè)顯示一周, 無(wú)特殊樣式

　　　2.2.1.3. basicDay 一頁(yè)顯示一天, 無(wú)特殊樣式

　　　2.2.1.4. agendaWeek 一頁(yè)顯示一周, 顯示詳細(xì)的24小時(shí)安排(也就是議事日程)

　　　2.2.1.5. agendaDay 一頁(yè)顯示一天, 顯示詳細(xì)的24小時(shí)安排

　2.3. header: 定義按鈕/文本在日歷的頂部, false說(shuō)明不使用header., 使用left, center, right三個(gè)屬性來(lái)進(jìn)行布局, 默認(rèn)是{left: ‘title', center: ‘', right: ‘today prev, next'}, 支持使用的屬性按鈕:

　　2.3.1. title: 一個(gè)包含當(dāng)前日期的文本

　　2.3.2. prev: 根據(jù)view的不同, 返回上一月/周/天

　　2.3.3. next: 根據(jù)view的不同, 返回下一月/周/天

　　2.3.4. prevYear: 使日歷返回到上一年

　　2.3.5. nextYear: 使日歷返回下一年

　　2.3.6. today: 將日歷移動(dòng)到當(dāng)天.

　　2.3.7. view name: 上面列舉的支持views名稱(chēng), 用來(lái)切換views

　2.4. buttonText: 定義header中使用的按鈕的顯示文本: 接受的屬性名: prev, next, prevYear等等

　2.5. aspectRatio: 接受一個(gè)浮點(diǎn)參數(shù), 調(diào)整寬高比例.

　2.6. allDayDefault: 布爾類(lèi)型, 默認(rèn)true, 決定每個(gè)CalEvent的allDay屬性的默認(rèn)值. allDay標(biāo)明一個(gè)日程事件是否是整天的, 也就是忽略具體的時(shí)間, 只計(jì)算天數(shù). 默認(rèn)情況下, 所有的新添加的日程時(shí)間不加說(shuō)明, 都是allDay的, 可以通過(guò)設(shè)置allDayDefault, 使得新創(chuàng)建的日程時(shí)間, 默認(rèn)情況下就是關(guān)注時(shí)間的.

　2.7. weekends: 布爾類(lèi)型, 默認(rèn)為true, 標(biāo)識(shí)是否顯示周六和周日的列.

　　2.7.1. finxed: 每月固定顯示6周.

　　2.7.2. liquid: 可能會(huì)顯示4, 5, 6周, 依賴(lài)于月份, 每周的高度會(huì)拉長(zhǎng)到填充可變高度, 視aspectRatio而定, 這里月份的高度是定的.

　　2.7.3. vairiable: 可能會(huì)顯示4, 5, 6周, 依賴(lài)于月份, 每周的高度會(huì)有一個(gè)固定值, 也就是說(shuō), 整個(gè)月份的高度會(huì)隨著有幾周的行數(shù)而變化.

　2.8. allDaySlot: 布爾值, 默認(rèn)是true, 標(biāo)明在agenda views模式下的時(shí)候, 上面的all-day小塊是否顯示.

　2.9. allDayText: allDay區(qū)域的文本內(nèi)容.

　2.10. firstHour: 整型, 默認(rèn)值為6. 表示在agenda的views中, 剛打開(kāi)的時(shí)候顯示的是第n小時(shí), 該table用scroll控制.

　2.11. slotMinutes: 整型, 默認(rèn)值30, 表示在agenda的views中, 兩個(gè)時(shí)間之間的間隔. 也就是沒(méi)一個(gè)小時(shí)所在一行中另外分出來(lái)的每一個(gè)小行代表多少分鐘.

　2.12. defaultEventMinutes: 整型, 默認(rèn)值120, 和事件有關(guān), 功能不確定.

 3. 日程編輯

　3.1. editable: Boolean類(lèi)型, 默認(rèn)值false, 用來(lái)設(shè)置日歷中的日程是否可以編輯. 可編輯是指可以移動(dòng), 改變大小等.

　3.2. disableDragging: Boolean類(lèi)型, 默認(rèn)false, 所有的event可以拖動(dòng), 必須editable = true

　3.3. diableResizing: Boolean, 默認(rèn)false, 所有的event可以改變大小, 必須editable = true

　3.4. dragRevertDuration: 拖動(dòng)恢復(fù)的時(shí)間, 默認(rèn)500毫秒, 表示一個(gè)不成功的拖動(dòng)之后, 控件回復(fù)到原始位置的時(shí)間.

　3.5. dragOpacity: Float類(lèi)型, 表示拖動(dòng)時(shí)候的不透明度. 指定一個(gè)float數(shù)值, 表示所有的views下都使用該不透明度, 也可以賦值為一個(gè)對(duì)象, 通過(guò)views hash來(lái)指定特定的views中的不透明度, 在以對(duì)象通過(guò)views hash指定不透明度時(shí), 可以指定一部分, 然后, 其他的用'': float的方式來(lái)標(biāo)明其他的所有的views下都使用該不透明度.

　　3.5.1. month

　　3.5.2. week: basicWeek和agendaWeek

　　3.5.3. day: basicDay和agendaDay

　　3.5.4. agenda: agendaDay和agendaWeek

　　3.5.5. agendaDay

　　3.5.6. agendaWeek

　　3.5.7. basic: basicWeek和basicDay

　　3.5.8. basicWeek

　　3.5.9. basicDay

　　3.5.10. ‘': 空的字符串, 表明所有其他的views

 4. 時(shí)間和日期的格式化

　4.1. 支持的格式化占位符

　　4.1.1. s: 秒

　　4.1.2. ss: 秒, 兩位

　　4.1.3. m: 分鐘

　　4.1.4. mm: 分鐘, 兩位

　　4.1.5. h: 小時(shí), 12小時(shí)制

　　4.1.6. hh: 小時(shí), 12小時(shí)制, 兩位

　　4.1.7. H: 小時(shí), 24小時(shí)制

　　4.1.8. HH: 小時(shí), 24小時(shí)制, 兩位

　　4.1.9. d: 日期數(shù)字

　　4.1.10. dd: 日期數(shù)字, 兩位

　　4.1.11. ddd: 日期名稱(chēng), 縮寫(xiě)

　　4.1.12. dddd: 日期名稱(chēng), 全名

　　4.1.13. M: 月份數(shù)字

　　4.1.14. MM: 月份數(shù)字, 兩位

　　4.1.15. MMM: 月份名稱(chēng), 縮寫(xiě)

　　4.1.16. MMMM: 月份名稱(chēng), 全名

　　4.1.17. yy: 兩位的年份

　　4.1.18. yyyy: 4位的年份

　　4.1.19. t: 上下午加 a或者p

　　4.1.20. tt: 上下午加am或pm

　　4.1.21. T: 上下午加A 或者P

　　4.1.22. TT: 上下午加AM或PM

　　4.1.23. u: ISO8601格式

　　4.1.24. S: 給日期加上st, nd, rd, th等后綴, 表明是第幾天

　　4.1.25. 特殊字符:

　　　4.1.25.1. ‘…' 原意輸出文本

　　　4.1.25.2. ‘' 表示一個(gè)單引號(hào)

　　　4.1.25.3. (…), 括號(hào)內(nèi)的占位符表示的格式化日期中, 至少有一個(gè)不為空, 才顯示括號(hào)內(nèi)的這一組格式化字符串

　4.2. titleFormat: string/object: 確定header中的title展示日期的格式, 這里也可以使用view hash的方式通過(guò)對(duì)象進(jìn)行配置, 如果使用view hash的方式, 配置, 則每種view中的title的格式都是不一樣的.

　4.3. columnFormat: string/object, 和titleFormat配置方式一樣, 影響各種view中的每列的表頭顯示文本. 文檔中關(guān)于allDay為false時(shí)的解釋不明白.

　4.4. timeFormat: 默認(rèn)是{agenda: ‘h:mm{ - h:mm}}, 影響的是添加的具體的日程上顯示的時(shí)間格式.

　4.5. axisFormat: string, 默認(rèn)h(:mm)tt, 影響agenda views下的最左的一列的時(shí)間顯示方式.

　4.6. views hash: 現(xiàn)在支持view hashes的選項(xiàng)有: dragOpacity, titleFormat, columnFormat, timeFormat

 5. formatDates: $.fullCalendar.formatDates(date1, date2, formatString, [options]): 和formatDate類(lèi)似, 但是接受兩個(gè)date, 在格式化字符串中, 使用{…}來(lái)格式化第二個(gè)date

 6. Event sources:

　6.1. events: array/string/function:

　　6.1.1. 配置事件源

　　　6.1.1.1. 數(shù)組是硬編碼的日程事件.

　　　6.1.1.2. 提供一個(gè)URL, 該URL返回一個(gè)json或數(shù)組的日程事件組, GET參數(shù)視startParam和endParam選項(xiàng)而定.

　　　6.1.1.3. 提供一個(gè)函數(shù), 以自定義的方式抓取數(shù)據(jù), 該函數(shù)需要接受參數(shù)start, end, callback, 分別表示抓取的日程事件的開(kāi)始時(shí)間, 結(jié)束時(shí)間, 抓取結(jié)束后的回調(diào)比如:

events: function(start, end, callback) {$.getJSON(“/myscript”, {start: start.getTime(), end: end.getTime()}, function(result) {callback(result);})}

　6.2. eventSources: Array, 就像events選項(xiàng)一樣, 但是, 這個(gè)用來(lái)配置多個(gè)日程事件數(shù)據(jù)來(lái)源.

　6.3. startParam: string, 默認(rèn)值: start, 這個(gè)就是在使用URL方式獲取events數(shù)據(jù)源的時(shí)候, 自動(dòng)插入到URL中的參數(shù), 表示當(dāng)前需要抓取的日程事件的起始時(shí)間

　6.4. endParam: string, 默認(rèn)值: end, 和startParam參數(shù)意義相同, 表示要抓取的日程事件的終止時(shí)間

　6.5. cacheParam: 當(dāng)使用JSON url方式獲取日程事件時(shí), 為了防止ajax自身的緩存帶來(lái)的數(shù)據(jù)不同步問(wèn)題, 加入的鑒別參數(shù)名, 值是由full calendar控制加入的當(dāng)前時(shí)間. 不懂可以查詢ajax緩存解決方案.

 7. CalEvent對(duì)象: 標(biāo)準(zhǔn)的當(dāng)前使用的日程事件源(請(qǐng)注意區(qū)分這里的日程事件和計(jì)算機(jī)領(lǐng)域的事件之間的區(qū)別, 這里的事件是業(yè)務(wù)上的, 表明在某個(gè)時(shí)間做某事的一個(gè)記錄, 而計(jì)算機(jī)領(lǐng)域的事件則是用戶對(duì)計(jì)算機(jī)的一個(gè)動(dòng)作)

　7.1. id: Integer/String: 日程事件的標(biāo)識(shí), repeat型的日程事件擁有相同的id

　7.2. title: string, 日程事件的標(biāo)題

　7.3. allDay: Boolean, 默認(rèn)true, 標(biāo)明一個(gè)日程事件是否是關(guān)注具體時(shí)間的, 如果是true, 表明該日程事件不關(guān)注具體時(shí)間, 是當(dāng)天所有時(shí)間都有的, 所以, 該日程事件的日期會(huì)被忽略, 在agenda view中通過(guò)專(zhuān)門(mén)的allDay區(qū)域顯示, 如果是false, 則是關(guān)注開(kāi)始時(shí)間和結(jié)束時(shí)間的.

　7.4. date: Date類(lèi)型, 是start屬性的別名

　7.5. start: Date類(lèi)型, 一個(gè)JavaScript的Date對(duì)象, 方便起見(jiàn), 可以使用IETF格式, ISO8601格式以及UNIX時(shí)間戳等多種方式的字符串表示.

　7.6. end: Date(可選的): 和start一樣, 不過(guò)表示日程時(shí)間的結(jié)束時(shí)間.

　　7.6.1. 如果對(duì)應(yīng)的日程事件是allDay的, 那么10月1日8時(shí)到10月3日8時(shí)就表示跨度是3天

　　7.6.2. 如果對(duì)應(yīng)的日程時(shí)間不是allDay的, 那么10月1日8時(shí)10月3日8時(shí)則表示跨度是48個(gè)小時(shí).

　　7.6.3. url: string, 設(shè)置一個(gè)url, 該日程事件被點(diǎn)擊的時(shí)候使用, 新的頁(yè)面默認(rèn)在當(dāng)前窗口打開(kāi), 如果使用更復(fù)雜的事件處理, 要使用eventClick觸發(fā)動(dòng)作(這份文檔中使用了Triggered Action來(lái)描述計(jì)算機(jī)領(lǐng)域的事件, 防止了和該插件所在領(lǐng)域的日程事件沖突.) 

8. 方法: 方法調(diào)用的方式: $(‘.selector').fullCalendar(‘method_name')首先使用一個(gè)jQuery選擇器獲取日歷控件對(duì)象, 然后, 調(diào)用fullCalendar(), 參數(shù)是字符串形式的方法名

　8.1. prev, 跳轉(zhuǎn)到前一月/周/天, 根據(jù)當(dāng)前的view決定

　8.2. next, 同prev, 是后一月/周/天

　8.3. today, 跳轉(zhuǎn)到今天.

　8.4. gotoDate: 調(diào)用方式: $(‘.selector').fullCalendar(‘gotoDate', year[, month[, date]])調(diào)用方法名為gotoDate, 后面三個(gè)參數(shù)傳遞年, 月, 日, 年是必選, 其他兩個(gè)可選. 其中的月month參數(shù), 是以0開(kāi)始計(jì)算的, 也就是說(shuō)一月對(duì)應(yīng)0. 該方法也可以使用單參數(shù)的方式調(diào)用, 傳遞一個(gè)javascript的Date對(duì)象.

　8.5. incrementDate: $(‘.selector').fullCalendar(‘incrementDate', years[, months[, days]]) 以當(dāng)前時(shí)間為軸, 將日歷向前, 或向后移動(dòng)指定長(zhǎng)度的時(shí)間, 比如: $(‘.selector').fullCalendar(‘incrementDate', -3, 2, -5)就表示將日歷年份向前移動(dòng)3年, 月份向后移動(dòng)2月, day(天數(shù)???呵呵)向前移動(dòng)5天.

　8.6. changeView: $(‘.selector').fullCalendar(‘changeView', viewName) 切換日歷的view, viewName必須是允許的views

　8.7. updateEvent: $(‘.selector').fullCalendar(‘updateEvent', calEvent) 更新日歷空間中的一個(gè)日程事件, 如果是repeat的日程事件, 則都更新. 這里更新的calEvent對(duì)象必須是Triggered Action(觸發(fā)事件)中作為參數(shù)傳遞的或clientEvents方法中返回的CalEvent實(shí)例, 也就是說(shuō)必須是合法的, 在日歷中可檢索的.

　8.8. renderEvent: $(‘.selector').fullCalendar(‘renderEvent', calEvent, [stick]) 將一個(gè)新的CalEvent對(duì)象渲染到日歷中, 該對(duì)象至少要有title和start屬性. 默認(rèn)情況下, 新渲染的這個(gè)CalEvent對(duì)象在日歷重新獲取日程事件源(比如prev, 或next調(diào)用)的時(shí)候, 會(huì)消失, 如果設(shè)置stick參數(shù)為true, 則會(huì)保證新渲染的CalEvent對(duì)象永久保留.

　8.9. removeEvents: $(‘.selector').fullCalendar(‘removeEvents', [idOrFilter]): 從日歷中刪除一個(gè)日程事件. 第二個(gè)參數(shù)可以不填, 可以填id, 可以是一個(gè)過(guò)濾器(一個(gè)函數(shù), 接受CalEvent對(duì)象作為參數(shù))

　　8.9.1. 不填: 所有的日程事件被移除

　　8.9.2. id: 指定id匹配的所有的日程事件被移除

　　8.9.3. 過(guò)濾器: 過(guò)濾器接受CalEvent對(duì)象作為參數(shù), 在過(guò)濾器內(nèi)部, 通過(guò)一些策略處理, 如果需要移除, 則返回true, 否則返回false.

　　8.9.4. clientEvents: $(‘.selector').fullCalendar(‘clientEvents', [idOrFilter]): 返回FullCalendar已經(jīng)存儲(chǔ)到客戶端的CalEvents對(duì)象數(shù)組, 第二個(gè)參數(shù)和removeEvents方法的第二個(gè)參數(shù)意義相同, 只不過(guò)在過(guò)濾器中, 如果返回true, 則該CalEvent對(duì)象將被加入到返回的數(shù)組中

　　8.9.5. addEventSource: $(‘.selector').fullCalendar(‘a(chǎn)ddEventSource', source): 添加一個(gè)日程事件源, 添加之后, FullCalendar會(huì)馬上從該源獲取日程事件, 并加載到日歷中. 第二個(gè)參數(shù)和定義Calendar時(shí)候使用的url參數(shù)一致.

　　8.9.6. removeEventSource: $(‘.selector').fullCalendar(‘removeEventSource', source) 移除一個(gè)日程事件源, 該源上獲取得到的日程時(shí)間也將被馬上從日歷中移除.

　　8.9.7. rerenderEvents: $(‘.selector').fullCalendar(‘rerenderEvents') 重新渲染屏幕上的所有日程事件.

　　8.9.8. refetchEvents: $(‘.selector').fullCalendar(‘refetchEvents') 重新抓取所有的日程事件源上的日程事件并渲染它們.

　　8.9.9. render: $(‘.selector').fullCalendar(‘render'): 該方法用來(lái)立刻渲染整個(gè)日歷, 在一個(gè)可見(jiàn)的元素上調(diào)用fullCalendar的時(shí)候, 該方法會(huì)自動(dòng)調(diào)用, 如果是在一個(gè)隱藏的元素上調(diào)用, 則需要盡快的手動(dòng)調(diào)用使該元素可見(jiàn)并渲染.

 9. 觸發(fā)事件(Triggered Action): 計(jì)算機(jī)領(lǐng)域中的事件

　9.1. viewDisplay: function(view)…..每次日歷加載以及日歷的view改變的時(shí)候觸發(fā)一次. 接受的view就是前面一直有提到的view對(duì)應(yīng)的對(duì)象.

　9.2. loading: function(isLoading, view)…..日歷開(kāi)始加載的時(shí)候, isLoading參數(shù)為true觸發(fā)一次, 日歷加載完畢, isLoading參數(shù)為false觸發(fā)一次.

　9.3. windowResize: function(view) 由于包含日歷的窗口大小發(fā)生變化導(dǎo)致日歷控件大小發(fā)生變化時(shí)觸發(fā). (這個(gè)方法中的this變量指向哪個(gè)元素不清楚, 因?yàn)槲疫@邊瀏覽器改變大小沒(méi)有導(dǎo)致日歷大小改變.)

　9.4. dayClick(dayDate, allDay, jsEvent, view): 用戶點(diǎn)擊day的時(shí)候觸發(fā), dayDate是點(diǎn)擊的day的時(shí)間(如果在agenda view, 還包含時(shí)間), 在month view下點(diǎn)擊一天時(shí), allDay是true, 在agenda模式下, 點(diǎn)擊all-day的窄條時(shí), allDay是true, 點(diǎn)擊其他的agenda view下的day則為false, jsEvent就是一個(gè)普通的javascript事件, 包含的是click事件的基礎(chǔ)信息. 在這個(gè)方法中, this獲得的是一個(gè)普通的HTML的DOM元素, 是包含該日期的一個(gè)TD

　9.5. eventRender: function(calEvent, element, view): 日程事件渲染之前觸發(fā). calEvent是一個(gè)CalEvent日程事件對(duì)象, element是calEvent對(duì)象對(duì)應(yīng)的JQuery對(duì)象. view就是當(dāng)前所處的view的實(shí)例對(duì)象, 這個(gè)方法中使用關(guān)鍵字this獲得的是calEvent對(duì)象的引用. 這個(gè)事件的處理方法如果返回false, 可以阻止渲染所有的日程事件. 該方法中可以通過(guò)修改jquery對(duì)象element來(lái)改變具體的渲染方式, 因此可以很好的和其他插件結(jié)合使用.

　9.6. eventClick, eventMouseover, eventMouseout: function(calEvent, jsEvent, view): 日程事件被點(diǎn)擊, 鼠標(biāo)劃過(guò), 鼠標(biāo)離開(kāi)的事件. 參數(shù)和上面介紹過(guò)的同名參數(shù)一致. 這里的eventClick事件如果返回false, 可以阻止瀏覽器跳轉(zhuǎn)到對(duì)應(yīng)日程事件在初始配置時(shí)指定的url地址. 這種事件的阻止傳播可以參照DHTML文檔關(guān)于事件的傳播和原始響應(yīng).

　9.7. eventDragStart, eventDragStop: function(calEvent, jsEvent, ui, view)日程事件被拖動(dòng)之前和之后觸發(fā). 這里的拖動(dòng)不一定是一個(gè)有效的拖動(dòng), 只要日程事件的控件被拖著動(dòng)了, 事件就觸發(fā). 同名參數(shù)和上面介紹過(guò)的一樣. UI保存的是一個(gè)JQuery的UI對(duì)象. 可以從該對(duì)象中獲取位移, 位置等數(shù)據(jù).

　9.8. eventDrop: function(calEvent, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) 在一個(gè)日程事件被移動(dòng), 并成功移動(dòng)到另外一個(gè)日期/時(shí)間.

　　9.8.1. dayDelta: 保存了這次拖動(dòng)導(dǎo)致該日程事件移動(dòng)了多少天, 向前為正數(shù), 向后為負(fù)數(shù).

　　9.8.2. minuteDelta: 保存了這次拖動(dòng)導(dǎo)致該日程事件移動(dòng)了多少分鐘, 向前為正數(shù), 向后為負(fù)數(shù). 該值只有在agenda view下有效.

　　9.8.3. allDay: 如果在month view下移動(dòng), 或在agenda view下移動(dòng)到all-day區(qū)域, 則allDay為true, 移動(dòng)到agenda view的其他區(qū)域則為false

　　9.8.4. revertFunc: 調(diào)用該方法, 可以將剛才的拖動(dòng)恢復(fù)到原狀. 這個(gè)方法多用于ajax的提交, 移動(dòng)之后, 提交數(shù)據(jù)到后臺(tái), 如果后臺(tái)更新失敗, 根據(jù)返回消息, 調(diào)用這個(gè)方法, 可以使頁(yè)面回復(fù)原狀.

　　9.8.5. eventResizeStart, eventResizeStop: function(calEvent, jsEvent, ui, view): 在一個(gè)日程事件改變大小之前之后發(fā)生(不一定要改變成功.) calEvent保存了日程事件信息(date, title, 等等)

　　9.8.6. eventResize: function(calEvent, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view): 在日程事件改變大小并成功后調(diào)用, 參數(shù)和eventDrop參數(shù)用法一致.

 10. View 對(duì)象

　10.1. name: 前面列舉的那些view名稱(chēng)

　10.2. title: string: 切換到view的時(shí)候, 可以在header中設(shè)置的title變量的值.

　10.3. start: Date類(lèi)型, 該view下的第一天.

　10.4. end: Date類(lèi)型, 該view下的最后一天. 由于是一個(gè)閉合的值, 所以, 比如在month view下, 10月這個(gè)月份, 那么end對(duì)應(yīng)的應(yīng)該是11月的第一天.

　10.5. visStart: Date類(lèi)型. 在該view下第一個(gè)可以訪問(wèn)的day. month view下, 該值是當(dāng)月的第一天, week view下, 則通常和start一致.

　10.6. visEnd: Date類(lèi)型, 最后一個(gè)可訪問(wèn)的day

 11. 顏色的修改: 通過(guò)重寫(xiě)css實(shí)現(xiàn)

　11.1. 示例一:

.fc-event,
.fc-agenda .fc-event-time,
.fc-event a {
  background-color: black; /* background color */
  border-color: black;  /* border color (often same as background-color) */
  color: red;    /* text color */
  }

　11.2. 示例二

.holiday,
.fc-agenda .holiday .fc-event-time,
.holiday a {
  background-color: green; /* background color */
  border-color: green;  /* border color (often same as background-color) */
  color: yellow;   /* text color */
 }

 12. 主題, 使用jquery ui提供的主題

　12.1. theme: Boolean, 默認(rèn)false, 設(shè)置為true, 允許使用jquery的ui主題

　12.2. buttonIcons: Object, 改變header中使用的prev, next等變量對(duì)應(yīng)按鈕的樣式, 默認(rèn)的樣式是:

{
  prev: 'circle-triangle-w',
  next: 'circle-triangle-e'
}

 13. 本地化選項(xiàng):

　13.1. firstDay: Integer類(lèi)型, 默認(rèn)值0. 一周中顯示的第一天是哪天. 星期天是0, 星期一是1, 類(lèi)推.

　13.2. monthNames: Array, 月份全名使用的字符串, 默認(rèn)是英文的月份名稱(chēng)全稱(chēng).

　13.3. monthNamesShort: Array, 月份簡(jiǎn)寫(xiě)使用的字符串, 默認(rèn)是英文月份名稱(chēng)簡(jiǎn)寫(xiě)

　13.4. dayNames: Array, 星期的全名使用的字符串, 默認(rèn)是英文的星期的名稱(chēng)全稱(chēng).

　13.5. dayNamesShort: Array, 星期的簡(jiǎn)寫(xiě)使用的字符串, 默認(rèn)是英文星期的名稱(chēng)簡(jiǎn)寫(xiě)

　13.6. buttonText和allDayText在最初的2.4和2.9部分已經(jīng)介紹.

 14. 日期工具

　14.1. 格式化日期: $.fullCalendar.formatDate(date, formatString[, options]), 通過(guò)指定的格式格式化一個(gè)日期, 返回一個(gè)字符串. options選項(xiàng)是一個(gè)對(duì)象, 其中設(shè)置本地化變量支持的屬性值. 比如{ monthNames : [‘一月', ‘二月', ……], dayNames: [‘周日', ‘周一', …..]}

　14.2. 一次格式化兩個(gè)日期: $.fullCalendar.formatDate(date1, date2, formatString[, options]): 和上一個(gè)格式化日期類(lèi)似, 只不過(guò), 這里在formatString中使用大括號(hào){…}來(lái)描述第二個(gè)日期的格式化方式.

　14.3. 解析日期: $.fullCalendar.parseDate(string): 將一個(gè)字符串格式成一個(gè)javascript的Date對(duì)象, 這個(gè)string可以是ISO8601, IETF, UNIX時(shí)間戳三種格式.

　14.4. parseISO8601: $fullCalendar.parseISO8601(string[, ignoreTimezone]) 將一個(gè)ISO8601字符串轉(zhuǎn)換成一個(gè)javascript 的Date對(duì)象.

 15. 將日程和google的日程管理連接起來(lái).

　15.1. 需要引入另外一個(gè)js文件: gcal.js

　15.2. events: $.fullCalendar.gcalFeed(‘自己的google calendar 的feed地址', {editable: false, className: ‘gcal-events', currentTimeZone: ‘自己在google calendar上設(shè)置的時(shí)區(qū)'}) 這樣就將自己的google calendar上的日程和自己的應(yīng)用掛接起來(lái)了.

　15.3. 下面是我自己關(guān)聯(lián)自己的google calendar的代碼:

$(document).ready(function() {
 $('#calendar').fullCalendar({
   defaultView: 'agendaWeek',
   events: $.fullCalendar.gcalFeed(
    'http://www.google.com/calendar/feeds/lgg860911%40yahoo.com.cn/private-184462b11481a96cf9835fbb6486dbe6/basic',
     {
       eidtable: true,
       className: 'gcal-events',
       //currentTimezone: 'Asia/Chongqing'
       currentTimezone: 'Asia/Tokyo'
     }
   )
 });
});

16. 總結(jié):

　16.1. 使用時(shí), 下載發(fā)布版本, 而不是開(kāi)發(fā)版本

　16.2. 需要引入的文件:

這個(gè)css可以根據(jù)自己的情況, 修改成自己喜歡的樣式. 500行的css, 修改量不是很大. 主要是理清關(guān)系.

<link rel='stylesheet' type='text/css' href='../fullcalendar.css' />
<script type='text/javascript' src='../jquery/jquery.js'></script>

以下4個(gè)js文件是jquery-ui相關(guān)的包, 可以使用fullcalendar中自帶的, 也可以自己到j(luò)query的ui官方庫(kù)自己訂閱一個(gè)合適自己使用的min版, 那樣, 就會(huì)得到一個(gè)有選擇的, 經(jīng)過(guò)壓縮的單獨(dú)的一個(gè)js文件. 效率上比較高.

<script type='text/javascript' src='../jquery/ui.core.js'></script>
<script type='text/javascript' src='../jquery/ui.draggable.js'></script>
<script type='text/javascript' src='../jquery/ui.resizable.js'></script>
<script type='text/javascript' src='../fullcalendar.min.js'></script>

17. 主要概念:

　17.1. 日歷: 整個(gè)日歷控件的div, 也就是我們$(‘#calendar').fullCalendar這樣使用的時(shí)候id為calendar的容器.

　17.2. 日程事件: 某一條日程記錄, 比如: 2009年11月16日星期一 晚上11點(diǎn)11分11秒111毫秒, 事件title為: “jb51, 需要做某某工作. ”

　17.3. 觸發(fā)動(dòng)作: 經(jīng)過(guò)Jquery封裝的javascript事件….

　17.4. jsEvent: 原始的javascript事件.

　17.5. 由于javascript是動(dòng)態(tài)語(yǔ)言, 所以, 對(duì)于calEvent對(duì)象或其他任何對(duì)象而言, 想要保存一些數(shù)據(jù), 直接設(shè)置就可以了, 比如, 你想在calEvent中保存女朋友的名字, 那就可以calEvent.girl_friend_name = ‘beautiful girl', 到你用的時(shí)候, 你就可以直接拿到了….用的時(shí)候, 最好這樣來(lái)用: my_girl_friend_name = calEvent.girl_friend_name || “another beautiful girl”; 這樣, 當(dāng)你保存在calEvent中的女朋友因?yàn)橹虚g操作丟失, 或者你根本沒(méi)有保存上你還不知道的時(shí)候, 你就可以得到another beautiful girl, 而不至于一無(wú)所獲, 甚至引發(fā)一些不必要的麻煩(瀏覽器上的警告, 說(shuō)你試圖調(diào)用一個(gè)undefined對(duì)象的屬性).

18. 領(lǐng)域模型: 根據(jù)自己的理解畫(huà)的, 希望可以幫到大家理解這個(gè)日程管理的概念.

以上是FullCalendar插件的官方中文說(shuō)明文檔，您可以查看文章JS日程管理插件FullCalendar簡(jiǎn)單實(shí)例進(jìn)行實(shí)際操作

參考文獻(xiàn)：

官方文檔：https://fullcalendar.io/docs/