fullcalendar日歷控件知識點集合

1、Fullcalendar 基本用法和知識點1、基本語法：       首先，fullcalendar和JQUERY一樣，以面向?qū)ο蟮姆绞絹斫M織代碼。當(dāng)然，這里的面向?qū)ο髢H僅是指可以把整個fullcalendar理解 為一個類，這個類里包括有很多的屬性、方法、委托(函數(shù)回調(diào))作為成員變量。通過為這些成員變量賦值，即可實例化出一個符合自己需求的 fullcalendar實例出來，即最終在瀏覽器里渲染出的日歷。換句話說，我們所做的絕大多數(shù)工作就是按照fullcalendar的語法約定去配置 出一個符合我們需求的fullcalendar實例。

2、除非對于極少的特殊需求，fullcalendar向我們提供的接口不足以滿足，才會去修改 fullcalendar本身的js文件。       作為一種JQUERY插件，可以把fullcalendar理解為向 jquery對象集里添加了一個日歷相關(guān)的對象，這個對象里相關(guān)方法、屬性、的調(diào)用方式，即為fullcalendar的基本語法。整個語法分為兩種：       第一種和日歷本身無關(guān)，僅僅是利用fullcalendar提供的方法來進行字符串和日期間的轉(zhuǎn)換，形式如下： 

3、      $.fullCalendar.formatDate();       第二種則是與和配置fullcalendar實例相關(guān)的，這最終會影響到fullcalendar在瀏覽器里的渲染，形式如下$(#someId) .fullCalendar(content);       $(#someId)將得到一個jquery對象，其中someId為你希望渲染日歷的元素id。重點是后面一部分.fullCalendar(conten

4、t);Content有三種形式：為屬性賦值 key:value,$('#calendar').fullCalendar(weekends: false / will hide Saturdays and Sundays);這里即得到一個fullcalendar實例，其中weekends屬性為false,即月日歷不會顯示周末。 方法調(diào)用'methodName','para'$('#calendar').fullCalendar('next') 這里會調(diào)用fullcalendar實例的next方法，

5、其結(jié)果是瀏覽器的日歷向后翻一月(日) 為方法回調(diào)賦值$('#calendar').fullCalendar(dayClick: function() alert('a day has been clicked!'); );這里是為日歷控件的dayClick事件賦值為相應(yīng)的匿名函數(shù)，其結(jié)果是日歷的每日被點擊時，會彈出對話框。        我想先有這樣一種觀念更便于后面的理解，需要渲染一個fullcalendar控件時，通常是直接在實例化一個fullcalendar時即完成它的絕大 多

6、數(shù)屬性 和委托的賦值，如此即得到一個會被瀏覽器渲染成日歷的fullcalendar對象（A），當(dāng)這個對象已經(jīng)被渲染后，如果需要動態(tài)的修改它的相關(guān)配置，可 以通過$('#calendar').fullCalendar('option','aspectRatio', 1.8); 的形式去修改。如果需要對象A發(fā)生某些變化，也可以調(diào)用A的某些方法，比如說翻頁。 2、內(nèi)容框架整個fullcalendar由兩部分組成日歷+事件其中日歷即為由js腳本在瀏覽器描繪出的日歷控件，這一部分完全由js控制，和服務(wù)器無需相關(guān)聯(lián)。事件則是日歷功能的擴展，可以把事

7、件理解為一個個會議安排。這些會議安排通常是保存在服務(wù)器的，在每次頁面加載時，fullcalendar得到會議安排的集合，然后按照其中的日期去把事件描繪到日歷對應(yīng)的地方。3、知識點概要余下詳細的知識點均為fullcalendar官方文檔的翻譯和組合。每一部分均按照屬性、方法、函數(shù)回調(diào)的順序來組織。通常會有相關(guān)知識點的簡介，對于比較復(fù)雜或者關(guān)鍵的點，會有相關(guān)聯(lián)的代碼作為事例。同樣，這些事例也出之于fullcalendar官方文檔。以下是對這所有知識點的歸納和概覽日歷部分：視圖：日歷的不同的展現(xiàn)模式。當(dāng)前共有5中視圖視圖的通用配置：這一部分的配置通?？梢詫?中視圖均有效。視圖對象：fullcalen

8、dar的視圖Module獲取視圖對象以及跳轉(zhuǎn)到指定視圖的方法議程相關(guān)：即對議程視圖模式下，相關(guān)細節(jié)的配置日期相關(guān)：涉及到日歷系統(tǒng)里日期的顯示格式，日歷加載的日期，以及獲取相關(guān)日期或者日歷改變?nèi)掌诘南嚓P(guān)方法時間和文本的自定義設(shè)置：涉及到自定義或者本地化的相關(guān)配置大多在這里完成鼠標的相關(guān)事件捕獲：比如鼠標單擊到某個特殊地方（日歷中的某一天等）等觸發(fā)的方法在這里配置選中元素的配置：這一部分是來配置當(dāng)鼠標點擊某一日歷元素時，是否選中該元素以及與此相關(guān)的事件 事件部分如下：事件Module包含的信息事件的產(chǎn)生：包括事件源的管理和事件的管理事件的描繪：把一個事件描繪到瀏覽器的整個過程包含在這里拖

9、拽事件：用鼠標拖拽以移動某個時間，這需要其他JQUERY ui插件的支持從日歷外拖拽事件到日歷內(nèi)以添加事件：對日歷內(nèi)拖拽事件的擴展4、詳細知識點4.1、合法的視圖month - see example 月視圖basicWeek - see example 周視圖（一周內(nèi)事件和日期的集合）basicDay - see example (一日內(nèi)事件和日期的集合)agendaWeek - see example (周日程表)agendaDay - see exa

10、mple (日日程表) 4.2、視圖的通用配置header頭部顯示的信息，分left , center, right三個部位合法的屬性值：title,prev,next,prevYear,nextYear,today, avaibleViewNameheader:                     left: 'title', 

11、;                   center: 'prevYear,nextYear',                    right: 'prev,to

12、day,next,agendaDay,month' theme當(dāng)為true時，可以配合JQUERY-UI，配置日歷的皮膚buttonIcons：buttonIcons:                     prev: 'circle-triangle-w',       

13、             next: 'circle-triangle-e'注意去掉.ui-icon- firstDay：每周開始的日期：0為周日isRTL：是否從右至左組織日歷weekends：是否顯示周末weekMode：周的顯示模式：fixed：每月始終顯示6周liquid：周數(shù)不定，每周的高度可變，整個日歷高度不變variable：周數(shù)不定，每周的高度固定，整個日歷的高度可變height整個日歷的高度（包括header和c

14、ontent）contentHeight內(nèi)容高度：aspectRatio寬和高的比例$('#calendar').fullCalendar('option','aspectRatio', 1.8); 可以動態(tài)設(shè)置viewDisplay (callback)函數(shù)回調(diào)，每次view顯示時均會調(diào)用function( view ) View是view對象windowResize (callback)函數(shù)回調(diào)，每次窗口大小改變時調(diào)用，viewDisplayrender (method)立刻顯示viewdes

15、troy (method)釋放calendar，包括相關(guān)數(shù)據(jù)defaultView：日歷初始化時的視圖，默認為month  4.3、視圖對象viewObjectname可用的5個視圖名之一title視圖部分的title 2012.9.1start當(dāng)天view開始的第一天end visStartVisible Start DayvisEnd  在相關(guān)方法回調(diào)中均會有次對象4.4、獲取視圖對象.fullCalendar( 'getView' ) 切換視圖.fullCalendar( 'changeView

16、', viewName ) 4.5、議程相關(guān)控制日程相關(guān)的視圖的顯示信息allDaySlot是否顯示全天日程allDayText顯示的文字axisFormat日期顯示的格式slotMinutes間隔時間defaultEventMinutes默認的事件持續(xù)事件firstHour在日程view里可見的起始時間，可通過滾動條滾動到在此時間之前的時間minTime整日日程的起始時間maxTime整日日程的結(jié)束時間 4.6、日期相關(guān)year日歷加載時的年份month日歷加載時的月份（從0開始）date日歷加載時在月份的天數(shù)（對周視圖和日視圖有效）prev&

17、#160;(method)日歷跳轉(zhuǎn)到前一天next (method)日歷跳轉(zhuǎn)到后一天prevYear (method)日歷跳轉(zhuǎn)到前一年nextYear (method)日歷跳轉(zhuǎn)到后一年today (method)日歷跳轉(zhuǎn)到當(dāng)前日期gotoDate (method)日歷跳轉(zhuǎn)到指定日期incrementDate (method)日歷向前（向后）跳轉(zhuǎn)一段時間getDate (method)獲取日歷的當(dāng)前日期 Date類型4.7、時間和文本的自定義timeFormat每個事件默認顯示的時間格式columnFormat每個視圖列名顯示

18、的格式、 month: 'ddd', / Mon    week: 'ddd M/d', / Mon9/7    day: 'dddd M/d' / Monday9/7  titleFormat每個視圖里title顯示的格式 month: 'MMMM yyyy', / September 2009     week: "MMM d yyyy'—' MMM d yyyy"

19、;, / Sep 7 - 13 2009     day: 'dddd, MMM d, yyyy'/ Tuesday, Sep 8, 2009  buttonText視圖里每個button顯示的文字 prev: ' ◄ ', / left triangle    next:' ► ', / right triangle    p

20、revYear:'&nbsp;&lt;&lt;&nbsp;', / <<    nextYear:'&nbsp;&gt;&gt;&nbsp;', / >>    today: 'today',    month: 'month',    week: 'week',    day:

21、'day' monthNames月的全稱monthNamesShort月的簡稱dayNames星期的全稱dayNamesShort星期的簡稱 4.8、相關(guān)點擊事件dayClick (callback)當(dāng)某天被點擊時觸發(fā)function( date, allDay, jsEvent, view ) date：當(dāng)前點擊到的日期 allDay ：是否是全天性的jsEvent：底層的JS事件view ：當(dāng)前的view對象this關(guān)鍵字指代為<td>eventClick

22、0;(callback)當(dāng)一個事件給點擊時觸發(fā)function( event, jsEvent, view ) event ：當(dāng)前的event對象jsEvent ：底層的JS事件view ：當(dāng)前的viewthis：指代的<td>里的<div>元素eventMouseover (callback)鼠標滑動到事件上觸發(fā)，同eventClick類似eventMouseout (callback)鼠標離開到事件上觸發(fā)，同eventClick類似 4.9、選中相關(guān)：當(dāng)點擊或者拖拽到

23、相關(guān)位置時，非否選中對應(yīng)元素selectable是否選中對應(yīng)元素selectHelper在日程表相關(guān)的view里，當(dāng)選中對應(yīng)時刻時，是否顯示相關(guān)信息unselectAuto當(dāng)點擊頁面日歷以外的位置時，是否自動取消當(dāng)前的選中unselectCancel指定哪些元素不會清空當(dāng)前的選中，以JQUERY選擇器的方式指定 '#someId'select (callback)被選中時的函數(shù)回調(diào)function( startDate, endDate, allDay, jsEvent, view )unselect

24、0;(callback)選中被取消時的回調(diào)select (method)選中某個時間.fullCalendar( 'select', startDate, endDate, allDay )unselect (method)取消選中.fullCalendar( 'unselect' )4.10、Event相關(guān)EventObject事件對象 id可選，事件唯一標識，重復(fù)的事件具有相同的title必須，事件在日歷上顯示的titleallDay可選，是否是整日事件start必須，事件的開始時間end

25、可選，結(jié)束時間url可選，當(dāng)指定后，事件被點擊將打開對應(yīng)urlclassName指定事件的樣式editable是否可拖拽source指向次event的eventsource對象color背景和邊框顏色backgroundColor背景顏色borderColor邊框顏色textColor文本顏色 EventSource ObjectEVENTS:在日歷界面里，參數(shù)event的對象：分array，json feed，function三種類型Eventsource:events: title: 'Event1',    start: '

26、2011-04-04' , title: 'Event2',start: '2011-05-05' / etc. , color: 'yellow', / anoption!textColor: 'black' / an option!eventsource可選的配置選項className指定事件的樣式editable是否可拖拽source指向次event的eventsource對象color背景和邊框顏色backgroundColor背景顏色borderColor邊框顏色textColor文本顏色 e

27、vents (asan array)數(shù)組形式組織的事件集$('#calendar').fullCalendar(    events:                     title  : 'event1',          

28、60; start  : '2010-01-01'        ,                    title : 'event2',            start 

29、 : '2010-01-05',            end    : '2010-01-07'        ,                    title 

30、 : 'event3',            start  : '2010-01-09 12:30:00',            allDay : false /will make the time show            )

31、;events (asa json feed)JSON源方式獲取的events每次當(dāng)view的時間改變時，均會獲取json。其中start和end為對應(yīng)view的start和end，插入_是默認不訪問瀏覽器緩存?？赏ㄟ^cache:true來默認讀取瀏覽器緩存$('#calendar').fullCalendar(    events: '/myfeed.php');會被轉(zhuǎn)換為如下url請求/myfeed.php?start=1262332800&end=1265011200&_=1263178646

32、0;events (asa function)作為方法的形式獲得event$('#calendar').fullCalendar(    events: function(start,end, callback)         $.ajax(            url:'myxmlfeed.php',   &#

33、160;        dataType: 'xml',            data:                 / ourhypothetical feed requires UNIX timestamps   

34、             start:Math.round(start.getTime() / 1000),                end: Math.round(end.getTime()/ 1000)          

35、;  ,            success:function(doc)                 var events =;               $(doc).f

36、ind('event').each(function()                    events.push(                       

37、; title:$(this).attr('title'),                        start:$(this).attr('start') / will be parsed            

38、;        );                );               callback(events);         

39、           );    );start和end同之前開始和結(jié)束時間（默認為-1970的毫秒）callback為當(dāng)獲取到event后，會調(diào)用的改回調(diào)函數(shù)，把數(shù)據(jù)放入fullcalendar里的events里。eventSources可以放置多個eventSource（events）$('#calendar').fullCalendar(    eventSources:     &#

40、160;   '/feed1.php',        '/feed2.php'    );allDayDefault當(dāng)event object里的allDay為指定時，其默認值ignoreTimezone忽略timeZone2008-11-05T08:15:30-05:00startParam傳遞給服務(wù)器的start參數(shù)名endParam同上lazyFetching當(dāng)view改變時，是否從緩存信息獲取event。比如從月視圖切換到周視圖，默認

41、為是loading (callback)function( isLoading, view )當(dāng)調(diào)用ajax獲取event是觸發(fā)。updateEvent (method)在客戶端更新event并在頁面上重新描繪clientEvents (method)獲取客戶端保存的所有events對象.fullCalendar( 'clientEvents' , idOrFilter ) -> ArrayremoveEvents (method)刪除event并重新描繪refetchEvents&

42、#160;(method)重新獲取events并重新描繪addEventSource (method)添加eventSource，并立刻在頁面上描繪.fullCalendar( 'addEventSource', source ) removeEventSource (method)同上4.11、事件描繪（對應(yīng)于整個callendar里的事件）eventColor eventBackgroundColor eventBorderColor eventTextColor eventRende

43、r (callback)當(dāng)描繪事件時觸發(fā)function( event, element, view ) event為改事件，element為用來渲染改事件的div元素eventAfterRender (callback)同上renderEvent (method).fullCalendar( 'renderEvent', event , stick  )rerenderEvents (method).fullCalendar( 'rerenderEv

44、ents' )同refetchEvents  4.12、拖拽事件需要添加JQUERY UIDraggable  插件，并把editable設(shè)置為true。相關(guān)屬性和方法同事件類似editableDetermines whether the events on the calendar can be modified.disableDraggingDisables all event dragging, even when events are editable.disableResizingDisables all event resizing, even

45、 when events are editable.dragRevertDurationTime it takes for an event to revert to its original position afteran unsuccessful drag.dragOpacityThe opacity of an event while it is being dragged.eventDragStart (callback)Triggered when event dragging begins.eventDragStop (callback)Triggered w

46、hen event dragging stops.eventDrop (callback)Triggered when dragging stops and the event has moved to a differentday/time.eventResizeStart (callback)Triggered when event resizing begins.eventResizeStop (callback)Triggered when event resizing stops.eventResize (callback)Triggered

47、when resizing stops and the event has changed in duration. 4.13、從日歷外拖拽事件到日歷中額外需求：需要jquery-ui相關(guān)控件的支持jquery-ui-1.8.17.custom.min.js日歷的dropple屬性需設(shè)置為true基本思路在日歷胖構(gòu)建好用來拖拽的元素<div>設(shè)置相應(yīng)div的drop操作$('#external-events div.external-event').each(function()  / create an Event Object/ it doesn't need to have a start or endvar eventObject = title: $.trim($(this).text() / use