FullCalendar提供了豐富的屬性設(shè)置和方法調(diào)用，開發(fā)者可以根據(jù)FullCalendar提供的API快速完成一個(gè)日歷日程的開發(fā)，本文將FullCalendar的常用屬性和方法、回調(diào)函數(shù)等整理成中文文檔，方便參閱。當(dāng)前版本1.6.4。
| 屬性 | 描述 | 默認(rèn)值 |
| header | 設(shè)置日歷頭部信息。 如果設(shè)置為false，則不顯示頭部信息。包括left，center,right左中右三個(gè)位置，每個(gè)位置都可以對(duì)應(yīng)以下不同的配置： title: 顯示當(dāng)前月份/周/日信息 prev: 用于切換到上一月/周/日視圖的按鈕 next: 用于切換到下一月/周/日視圖的按鈕 prevYear：用于切換到上一年視圖的按鈕 nextYear：用于切換到下一年視圖的按鈕 | { left: 'title', center: '', right: 'today prev,next' } |
| theme | 是否允許使用jquery的ui主題，如果設(shè)置為true，則需要加載jquery ui相關(guān)css和js文件。 查看演示 | false |
| buttonIcons | 設(shè)置header中使用的prev, next等變量對(duì)應(yīng)按鈕的樣式，只有當(dāng)theme為true時(shí)才有效，如果你調(diào)用了jQuery ui樣式但又不想使用它的圖標(biāo)樣式，可以將此屬性設(shè)置為false | { prev: 'circle-triangle-w', next: 'circle-triangle-e' } |
| firstDay | 設(shè)置一周中顯示的第一天是哪天，周日是0，周一是1，類推。 | 0 |
| isRTL | 設(shè)置為ture時(shí)則日歷從右往左顯示，貌似是針對(duì)阿拉伯人設(shè)計(jì)的。 | false |
| weekends | 是否顯示周末，設(shè)為false則不顯示周六和周日。 | true |
| hiddenDays | 隱藏一周中的某一天或某幾天，數(shù)組形式，如隱藏周二和周五：[2,5]，默認(rèn)不隱藏，除非weekends設(shè)置為false。 | [] |
| weekMode | 在月視圖里顯示周的模式，因?yàn)槊吭轮軘?shù)可能不同，所以月視圖高度不一定。 fixed：固定顯示6周高，日歷高度保持不變 liquid：不固定周數(shù)，高度隨周數(shù)變化 variable：不固定周數(shù)，但高度固定 | 'fixed' |
| weekNumbers | 是否在日歷中顯示周次(一年中的第幾周)，如果設(shè)置為true，則會(huì)在月視圖的左側(cè)、周視圖和日視圖的左上角顯示周數(shù)。 | false |
| weekNumberCalculation | 周次的顯示格式。 | "iso" |
| height | 設(shè)置日歷的高度，包括header日歷頭部，默認(rèn)未設(shè)置，高度根據(jù)aspectRatio值自適應(yīng)。 | |
| contentHeight | 設(shè)置日歷主體內(nèi)容的高度，不包括header部分，默認(rèn)未設(shè)置，高度根據(jù)aspectRatio值自適應(yīng)。 | |
| aspectRatio | 設(shè)置日歷單元格寬度與高度的比例。 | 1.35 |
| handleWindowResize | 是否隨瀏覽器窗口大小變化而自動(dòng)變化。 | true |
| windowResize | callback，當(dāng)瀏覽器窗口變化時(shí)觸發(fā)function，使用： $('#calendar').fullCalendar({ windowResize: function(view) { alert('The calendar has adjusted to a window resize'); } }); | |
| render | method，綁定日歷到id上。 $('#id').fullCalendar('render'); | |
| destroy | method，銷毀id日歷，把日歷回復(fù)到初始化前狀態(tài)。 $('#id').fullCalendar('destroy'); | |
FullCalendar提供五種可用視圖，包括month（月視圖），basicWeek（基本周視圖，左側(cè)不顯示具體時(shí)間），basicDay（基本日視圖，左側(cè)不顯示具體時(shí)間），agendaWeek（周視圖），agendaDay（日視圖）。
View視圖對(duì)象的屬性：
| 屬性 | 描述 |
| name | 包括month,basicWeek,basicDay,agendaWeek,agendaDay |
| title | 標(biāo)題內(nèi)容(例如"2013年9月" or "Sep 7 - 13 2013") |
| start | Date類型, 該view下的第一天 |
| end | Date類型, 該view下的最后一天. 由于是一個(gè)閉合的值, 所以, 比如在month view下, 10月這個(gè)月份, 那么end對(duì)應(yīng)的應(yīng)該是11月的第一天 |
| visStart | Date類型. 在該view下第一個(gè)可以訪問的day. month view下, 該值是當(dāng)月的第一天, week view下, 則通常和start一致 |
| visEnd | Date類型, 最后一個(gè)可訪問的day |
View其他屬性和方法
| 屬性 | 描述 | 默認(rèn)值 |
| defaultView | 日歷初始化時(shí)默認(rèn)視圖 | 'month' |
| getView | method，取得視圖對(duì)象信息，如獲取當(dāng)前視圖的標(biāo)題內(nèi)容： var view = $('#calendar').fullCalendar('getView'); alert("The view's title is " + view.title); | |
| changeView | method，切換視圖 .fullCalendar('changeView',viewName) viewName為5種視圖中的一種 | |
以下選項(xiàng)設(shè)置適用于agendaWeek和agendaDay視圖里。
| 屬性 | 描述 | 默認(rèn)值 |
| allDaySlot | 在agenda視圖模式下，是否在日歷上方顯示all-day(全天) | true |
| allDayText | 定義日歷上方顯示全天信息的文本 | 'all-day' |
| axisFormat | 設(shè)置日歷agenda視圖下左側(cè)的時(shí)間顯示格式，默認(rèn)顯示如：5:30pm | 'h(:mm)tt' |
| slotMinutes | 在agenda的視圖中, 兩個(gè)時(shí)間之間的間隔(分鐘) | 30 |
| defaultEventMinutes | 事件默認(rèn)的時(shí)間執(zhí)行長度，如果事件對(duì)象沒有指定執(zhí)行多長時(shí)間，則默認(rèn)執(zhí)行兩個(gè)小時(shí) | 120 |
| firstHour | 當(dāng)切換到agenda時(shí)，初始滾動(dòng)條滾動(dòng)到的時(shí)間位置，默認(rèn)在6點(diǎn)鐘的位置 | 6 |
| minTime | 設(shè)置顯示的時(shí)間從幾點(diǎn)開始 | 0 |
| maxTime | 設(shè)置顯示的時(shí)間從幾天結(jié)束 | 24 |
| slotEventOverlap | 設(shè)置視圖中的事件顯示是否可以重疊覆蓋 | true |
| 屬性 | 描述 | 默認(rèn)值 |
| year | 設(shè)置日歷年份，必須為4位如：2013，如果不設(shè)置則默認(rèn)為當(dāng)前年份 | |
| month | 設(shè)置初始化日歷的月份，從0開始，如果年份和月份都未指定，則從一月開始。 | |
| date | 設(shè)置日歷初始化時(shí)的日期，只有在周視圖和日視圖中有效 | |
| prev | method，進(jìn)入到上一月（周、天）視圖 $('#calendar').fullCalendar('prev'); | |
| next | method，進(jìn)入到下一月（周、天）視圖 $('#calendar').fullCalendar('next'); | |
| prevYear | method，進(jìn)入上一年視圖 | |
| nextYear | method，進(jìn)入下一年視圖 | |
| today | method，進(jìn)入當(dāng)天 | |
| gotoDate | method，指定進(jìn)入日歷中的某一天 $('#calendar').fullCalendar( 'gotoDate', year [, month, [ date ]] ) | |
| incrementDate | method， 以當(dāng)前時(shí)間為軸, 將日歷向前, 或向后移動(dòng)指定長度的時(shí)間, 比如: $('#calendar').fullCalendar(‘incrementDate’, -3, 2, -5)就表示將日歷年份向前移動(dòng)3年, 月份向后移動(dòng)2月, day(天數(shù))向前移動(dòng)5天。 | |
| getDate | method，返回當(dāng)前日歷中的日期 | |
你可以根據(jù)項(xiàng)目需求設(shè)置日歷顯示的文本信息，如中文的月份等。
| 屬性 | 描述 | 默認(rèn)值 |
| timeFormat | 設(shè)置顯示的日程事件的時(shí)間格式，如timeFormat: 'H:mm' 則顯示24小時(shí)制的像10:30 | {agenda: ‘h:mm{ - h:mm}} |
| columnFormat | 設(shè)置顯示日歷每列表頭信息的格式文本，默認(rèn)： { month: 'ddd', // Mon week: 'ddd M/d', // Mon 9/7 day: 'dddd M/d' // Monday 9/7 } | 見描述 |
| titleFormat | 設(shè)置用于顯示日歷頭部的文本信息，默認(rèn)： { month: 'MMMM yyyy', // September 2013 week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}", // Sep 7 - 13 2013 day: 'dddd, MMM d, yyyy' // Tuesday, Sep 8, 2013 } | 見描述 |
| buttonText | 設(shè)置日歷頭部各按鈕的顯示文本信息，默認(rèn)： { prev: '?', // ? next: '?', // ? prevYear: '?', // ? nextYear: '?', // ? today: 'today', month: 'month', week: 'week', day: 'day' } | 見描述 |
| monthNames | 月份全稱，默認(rèn)： ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] | 見描述 |
| monthNamesShort | 月份名稱簡寫，默認(rèn)：['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun' 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | 見描述 |
| dayNames | 星期全稱，默認(rèn)：['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] | 見描述 |
| dayNamesShort | 星期名稱簡寫，默認(rèn)：['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] | 見描述 |
| weekNumberTitle | 周次，即一年中的第幾周 | "W" |
以下列出的是當(dāng)鼠標(biāo)單擊或者滑過日歷中的某個(gè)元素時(shí)，回調(diào)的函數(shù)callback。
| 屬性 | 描述 |
| dayClick | 當(dāng)單擊日歷中的某一天時(shí)，觸發(fā)callback，用法： $('#calendar').fullCalendar({ dayClick: function(date, allDay, jsEvent, view) { do something... } }); date是點(diǎn)擊的day的時(shí)間(如果在agenda view, 還包含時(shí)間)，在月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ǔ)信息。 |
| eventClick | 當(dāng)點(diǎn)擊日歷中的某一日程（事件）時(shí)，觸發(fā)此操作，用法： $('#calendar').fullCalendar({ dayClick: function(event, jsEvent, view) { do something... } }); event是日程（事件）對(duì)象，jsEvent是個(gè)javascript事件，view是當(dāng)前視圖對(duì)象。 |
| eventMouseover eventMouseout | 鼠標(biāo)劃過和離開的事件，用法和參數(shù)同上 |
| 屬性 | 描述 | 默認(rèn)值 |
| selectable | 是否允許用戶通過單擊或拖動(dòng)選擇日歷中的對(duì)象，包括天和時(shí)間。 | false |
| selectHelper | 當(dāng)點(diǎn)擊或拖動(dòng)選擇時(shí)間時(shí)，顯示默認(rèn)加載的提示信息，該屬性只在周/天視圖里可用。 | false |
| unselectAuto | 當(dāng)點(diǎn)擊頁面日歷以外的位置時(shí)，是否自動(dòng)取消當(dāng)前的選中狀態(tài)。 | true |
| unselectCancel | 指定哪些元素不會(huì)清空當(dāng)前的選中，以JQUERY選擇器的方式指定 '#someId'。 | '' |
| select | callback，被選中的函數(shù)回調(diào)，使用方法： function( startDate, endDate, allDay, jsEvent, view ) startDate：被選中區(qū)域的開始時(shí)間 endDate：被選中區(qū)域的結(jié)束時(shí)間 allDay：是否為全天事件 startDate：jascript對(duì)象 startDate：當(dāng)前視圖對(duì)象 | |
| unselect | callback，選中被取消時(shí)的回調(diào)，使用方法： function( view, jsEvent ) | |
| select | method，選中某個(gè)時(shí)間，使用方法： $('#calendar').fullCalendar( 'select', startDate, endDate, allDay ) | |
| unselect | method，取消選中，使用方法： $('#calendar').fullCalendar( 'unselect' ) | |
FullCalendar最重要的部分，設(shè)置用于日程事件相關(guān)信息。
Event Object，事件對(duì)象，用來存儲(chǔ)一個(gè)日歷事件信息的標(biāo)準(zhǔn)對(duì)象，只有title和start是必須的
| 屬性 | 描述 |
| id | 可選，事件唯一標(biāo)識(shí)，重復(fù)的事件具有相同的id |
| title | 必須，事件在日歷上顯示的title |
| allDay | 可選，true or false，是否是全天事件。 |
| start | 必須，事件的開始時(shí)間。 |
| end | 可選，結(jié)束時(shí)間。 |
| url | 可選，當(dāng)指定后，事件被點(diǎn)擊將打開對(duì)應(yīng)url。 |
| className | 指定事件的樣式。 |
| editable | 事件是否可編輯，可編輯是指可以移動(dòng), 改變大小等。 |
| source | 指向次event的eventsource對(duì)象。 |
| color | 背景和邊框顏色。 |
| backgroundColor | 背景顏色。 |
| borderColor | 邊框顏色。 |
| textColor | 文本顏色。 |
事件源對(duì)象
事件源即日歷中的數(shù)據(jù)來源，F(xiàn)ullCalendar提供了數(shù)組、函數(shù)調(diào)用、以及JSON數(shù)據(jù)的形式，當(dāng)然也可以通過Google Calendar feed獲取數(shù)據(jù)接口。helloweba.com后面會(huì)有文章專門介紹事件數(shù)據(jù)的操作，包括數(shù)據(jù)的查詢、寫入、更新和刪除操作。
以下是Event事件相關(guān)的參數(shù)屬性說明。
| 屬性 | 描述 | 默認(rèn)值 |
| eventSources | 事件源，存儲(chǔ)數(shù)組對(duì)象，可以是Arrays/Functions/URLs。 | |
| allDayDefault | 是否為全天日程事件，顯示這一天中所做的事情。 | true |
| ignoreTimezone | 是否忽略時(shí)區(qū)。 | true |
| startParam | 在使用URL方式獲取events數(shù)據(jù)源的時(shí)候, 自動(dòng)插入到URL中的參數(shù), 表示當(dāng)前需要抓取的日程事件的起始時(shí)間。 | 'start' |
| endParam | 和startParam參數(shù)意義相同, 表示要抓取的日程事件的終止時(shí)間。 | 'end' |
| lazyFetching | 是否從緩存信息獲取event。比如從月視圖切換到周視圖。 | true |
| eventDataTransform | callback，將外部數(shù)據(jù)源轉(zhuǎn)換成Fullcalendar可以處理的數(shù)據(jù) | |
| loading | callback，日歷開始加載的時(shí)候，isLoading參數(shù)為true觸發(fā)一次，日歷加載完畢，isLoading參數(shù)為false觸發(fā)一次，用法： function(isLoading, view) | |
| updateEvent | method，更新日歷空間中的一個(gè)日程事件，如果是重復(fù)的日程事件，則都更新。用法： $('#calendar').fullCalendar( 'updateEvent', event ) | |
| clientEvents | method，返回FullCalendar已經(jīng)存儲(chǔ)到客戶端的CalEvents對(duì)象數(shù)組， 第二個(gè)參數(shù)和removeEvents方法的第二個(gè)參數(shù)意義相同， 只不過在過濾器中， 如果返回true， 則該CalEvent對(duì)象將被加入到返回的數(shù)組中。 | |
| removeEvents | method，從日歷中刪除一個(gè)日程事件. 第二個(gè)參數(shù)可以不填， 可以填id， 可以是一個(gè)過濾器(一個(gè)函數(shù)， 接受CalEvent對(duì)象作為參數(shù))。用法： $('#calendar').fullCalendar( 'removeEvents' [, idOrFilter ] ) | |
| refetchEvents | method，重新抓取所有的日程事件源上的日程事件并渲染它們。 | |
| addEventSource | method，添加一個(gè)日程事件源，添加之后， FullCalendar會(huì)馬上從該源獲取日程事件， 并加載到日歷中。第二個(gè)參數(shù)和定義Calendar時(shí)候使用的url參數(shù)一致。 | |
| removeEventSource | method，移除一個(gè)日程事件源，該源上獲取得到的日程時(shí)間也將被馬上從日歷中移除。 | |
| 屬性 | 描述 |
| eventColor eventBackgroundColor eventBorderColor eventTextColor | 設(shè)置日程事件的背景色和邊框色，以及文本顏色?？梢允褂萌我庵С謈ss的顏色方式，如 #f00, #ff0000, rgb(255,0,0), or red。 |
| eventRender | callback，當(dāng)日程事件渲染時(shí)觸發(fā)，用法： function(calEvent, element, view) |
| eventAfterRender | callback，當(dāng)日程事件被渲染后觸發(fā)，用法： function( event, element, view ) { } |
| eventDestroy | callback，當(dāng)日程事件移出時(shí)觸發(fā)，用法： function( event, element, view ) { } |
| renderEvent | method，一旦日歷重新取得日程源，則原有日程將消失，當(dāng)指定stick為true時(shí)，日程將永久的保存到日歷上。 |
| rerenderEvents | method，重新渲染所有事件。 |
拖動(dòng)和縮放功能依賴于jQuery ui的draggable和resizable，所以在使用時(shí)要提前加載jQuery ui相關(guān)插件。
| 屬性 | 描述 | 默認(rèn)值 |
| editable | 是否可編輯，即進(jìn)行可拖動(dòng)和縮放操作。 | false |
| eventStartEditable | 是否讓事件在開始時(shí)就可以拖動(dòng)。 | true |
| dragRevertDuration | 如果拖拽不成功，多久回復(fù)原狀，毫秒 | 500 |
| dragOpacity | 拖動(dòng)時(shí)候的不透明度。 { agenda:.5 //對(duì)于agenda試圖 '':1.0 //其他視圖 } | 見描述 |
| eventDragStart, eventDragStop | callback，日程事件被拖動(dòng)之前和之后觸發(fā)。這里的拖動(dòng)不一定是一個(gè)有效的拖動(dòng)，只要日程事件的控件被拖著動(dòng)了，事件就觸發(fā)。 可以從該對(duì)象中獲取位移，位置等數(shù)據(jù)。用法： function( event, jsEvent, ui, view ) { } | |
| eventDrop | callback，當(dāng)拖拽完成并且時(shí)間改變時(shí)觸發(fā)，用法： function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { } ayDelta 保存日程向前或者向后移動(dòng)了多少天 minuteDelta 這個(gè)值只有在agenda視圖有效，移動(dòng)的時(shí)間 allDay 如果是月視圖，或者是agenda視圖的全天日程，此值為true,否則為false | |
| eventResizeStart, eventResizeStop | callback，在一個(gè)日程事件改變大小之前之后發(fā)生(不一定要改變成功)，用法： function( event, jsEvent, ui, view ) { } | |
| eventResize | callback，在日程事件改變大小并成功后調(diào)用, 參數(shù)和eventDrop參數(shù)用法一致。用法： function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { } | |
| 函數(shù) | 描述 |
| formatDate | 格式化日期，通過指定的格式格式化一個(gè)日期，返回一個(gè)字符串。options選項(xiàng)是一個(gè)對(duì)象，其中設(shè)置本地化變量支持的屬性值. 比如{ monthNames : ['一月'，'二月'，……]，dayNames: ['周日'，'周一'，…..]}，用法： $.fullCalendar.formatDate( date，formatString [,options ] ) |
| formatDates | 一次格式化兩個(gè)日期，和上一個(gè)格式化日期類似，只不過，這里在formatString中使用大括號(hào){…}來描述第二個(gè)日期的格式化方式。用法： $.fullCalendar.formatDates( date1，date2，formatString [,options ] ) |
| parseDate | 解析日期，將一個(gè)字符串格式成一個(gè)javascript的Date對(duì)象，這個(gè)string可以是ISO8601，IETF，UNIX時(shí)間戳三種格式。用法: $.fullCalendar.parseDate( string ) |
| parseISO8601 | 將一個(gè)ISO8601字符串轉(zhuǎn)換成一個(gè)javascript 的Date對(duì)象。用法： $.fullCalendar.parseISO8601( string [,ignoreTimezone ] ) |
參考文獻(xiàn)：
官方文檔：http://arshaw.com/fullcalendar/docs/
FullCalendar 官方文檔翻：http://www.cnblogs.com/mycoding/archive/2011/05/20/2052152.html
fullCalendar:中文API： http://blog.sina.com.cn/s/blog_9475b1c101012c5f.html
聯(lián)系客服
