fullcalendar日曆控制項知識點集合

1、基本文法：

       首先，fullcalendar和JQUERY一樣，以物件導向的方式來組織代碼。當然，這裡的物件導向僅僅是指可以把整個fullcalendar理解 為一個類，這個類裡包括有很多的屬性、方法、委託(函數回調)作為成員變數。通過為這些成員變數賦值，即可執行個體化出一個符合自己需求的 fullcalendar執行個體出來，即最終在瀏覽器裡渲染出的日曆。換句話說，我們所做的絕大多數工作就是按照fullcalendar的文法約定去配置 出一個符合我們需求的fullcalendar執行個體。除非對於極少的特殊需求，fullcalendar向我們提供的介面不足以滿足，才會去修改 fullcalendar本身的js檔案。

       作為一種JQUERY外掛程式，可以把fullcalendar理解為向 jquery對象集裡添加了一個日曆相關的對象，這個對象裡相關方法、屬性、的調用方式，即為fullcalendar的基本文法。整個文法分為兩種：

       第一種和日曆本身無關，僅僅是利用fullcalendar提供的方法來進行字串和日期間的轉換，形式如下：

       $.fullCalendar.formatDate();

       第二種則是與和配置fullcalendar執行個體相關的，這最終會影響到fullcalendar在瀏覽器裡的渲染，形式如下$(‘#someId’) .fullCalendar(content);

       $(‘#someId’)將得到一個jquery對象，其中someId為你希望渲染日曆的元素id。重點是後面一部分.fullCalendar(content);

Content有三種形式：

①為屬性賦值 {key:value,…}

$('#calendar').fullCalendar({

weekends: false // will hide Saturdays and Sundays

});

這裡即得到一個fullcalendar執行個體，其中weekends屬性為false,即月日曆不會顯示周末。

 

②方法調用'methodName','para'

$('#calendar').fullCalendar('next')

 這裡會調用fullcalendar執行個體的next方法，其結果是瀏覽器的日曆向後翻一月(日)

 

③為方法回調賦值

$('#calendar').fullCalendar({

dayClick: function() { alert('a day has been clicked!'); }

});

這裡是為日曆控制項的dayClick事件賦值為相應的匿名函數，其結果是日曆的每日被點擊時，會彈出對話方塊。

 

       我想先有這樣一種觀念更便於後面的理解，需要渲染一個fullcalendar控制項時，通常是直接在執行個體化一個fullcalendar時即完成它的絕大 多數屬性 和委託的賦值，如此即得到一個會被瀏覽器渲染成日曆的fullcalendar對象（A），當這個對象已經被渲染後，如果需要動態修改它的相關配置，可 以通過$('#calendar').fullCalendar('option','aspectRatio', 1.8); 的形式去修改。

如果需要對象A發生某些變化，也可以調用A的某些方法，比如說翻頁。

 

2、內容架構

整個fullcalendar由兩部分組成

日曆+事件

其中日曆即為由js指令碼在瀏覽器描繪出的日曆控制項，這一部分完全由js控制，和伺服器無需相關聯。

事件則是日曆功能的擴充，可以把事件理解為一個個會議安排。這些會議安排通常是儲存在伺服器的，在每次頁面載入時，fullcalendar得到會議安排的集合，然後按照其中的日期去把事件描繪到日曆對應的地方。

3、知識點概要

餘下詳細的知識點均為fullcalendar官方文檔的翻譯和組合。每一部分均按照屬性、方法、函數回調的順序來組織。通常會有相關知識點的簡介，對於比較複雜或者關鍵的點，會有相關聯的代碼作為案例。同樣，這些案例也出之於fullcalendar官方文檔。

以下是對這所有知識點的歸納和概覽

日曆部分：

視圖：日曆的不同的展現模式。當前共有5中視圖

視圖的通用配置：這一部分的配置通常可以對5中視圖均有效。

視圖對象：fullcalendar的視圖Module

擷取視圖對象以及跳轉到指定視圖的方法

議程相關：即對議程視圖模式下，相關細節的配置

日期相關：涉及到日曆系統裡日期的顯示格式，日曆載入的日期，以及擷取相關日期或者日曆改變日期的相關方法

時間和文本的自訂設定：涉及到自訂或者本地化的相關配置大多在這裡完成

滑鼠的相關事件捕獲：比如按一下滑鼠到某個特殊地方（日曆中的某一天等）等觸發的方法在這裡配置

選中元素的配置：這一部分是來配置當滑鼠點擊某一日曆元素時，是否選中該元素以及與此相關的事件

 

事件部分如下：

事件Module包含的資訊

事件的產生：包括事件來源的管理和事件的管理

事件的描繪：把一個事件描繪到瀏覽器的整個過程包含在這裡

拖拽事件：用滑鼠拖拽以移動某個時間，這需要其他JQUERY ui外掛程式的支援

從日曆外拖拽事件到日曆內以添加事件：對日曆內拖拽事件的擴充

4、詳細知識點4.1、合法的視圖

month - see example 月視圖

basicWeek - see example 周視圖（一周內事件和日期的集合）

basicDay - see example (一日內事件和日期的集合)

agendaWeek - see example (周議程表)

agendaDay - see example (日議程表)

 

4.2、視圖的通用配置

header

頭部顯示的資訊，分left , center, right三個部位

合法的屬性值：title,prev,next,prevYear,nextYear,today, avaibleViewName

header: {
                    left: 'title',
                    center: 'prevYear,nextYear',
                    right: 'prev,today,next,agendaDay,month'
}

 

theme

當為true時，可以配合JQUERY-UI，配置日曆的皮膚

buttonIcons：http://jqueryui.com/themeroller/

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

注意去掉.ui-icon-

 

firstDay：每周開始的日期：0為周日

isRTL：是否從右至左組織日曆

weekends：是否顯示周末

weekMode：周的顯示模式：

fixed：每月始終顯示6周

liquid：周數不定，每周的高度可變，整個日曆高度不變

variable：周數不定，每周的高度固定，整個日曆的高度可變

height整個日曆的高度（包括header和content）

contentHeight內容高度：

aspectRatio寬和高的比例

$('#calendar').fullCalendar('option','aspectRatio', 1.8); 可以動態設定

viewDisplay (callback)函數回調，每次view顯示時均會調用

function( view ) { }

View是view對象

windowResize (callback)函數回調，每次視窗大小改變時調用，

viewDisplay

render (method)立刻顯示view

destroy (method)釋放calendar，包括相關資料

defaultView：日曆初始化時的視圖，預設為month

 

 

4.3、視圖對象viewObject

name	可用的5個視圖名之一
title	視圖部分的title 2012.9.1
start	當天view開始的第一天
end
visStart	Visible Start Day
visEnd

 

在相關方法回調中均會有次對象

4.4、擷取視圖對象

.fullCalendar( 'getView' ) 

切換視圖

.fullCalendar( 'changeView', viewName )

 

4.5、議程相關——控制議程相關的視圖的顯示資訊

allDaySlot是否顯示全天議程

allDayText顯示的文字

axisFormat日期顯示的格式

slotMinutes間隔時間

defaultEventMinutes預設的事件持續事件

firstHour在議程view裡可見的起始時間，可通過捲軸滾動到在此時間之前的時間

minTime整日議程的起始時間

maxTime整日議程的結束時間

 

4.6、日期相關

year日曆載入時的年份

month日曆載入時的月份（從0開始）

date日曆載入時在月份的天數（對周視圖和日視圖有效）

prev (method)日曆跳轉到前一天

next (method)日曆跳轉到後一天

prevYear (method)日曆跳轉到前一年

nextYear (method)日曆跳轉到後一年

today (method)日曆跳轉到當前日期

gotoDate (method)日曆跳轉到指定日期

incrementDate (method)日曆向前（向後）跳轉一段時間

getDate (method)擷取日曆的當前日期 Date類型

4.7、時間和文本的自訂

timeFormat每個事件預設顯示的時間格式

columnFormat每個視圖列名顯示的格式、

{ 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}", // Sep 7 - 13 2009

     day: 'dddd, MMM d, yyyy'// Tuesday, Sep 8, 2009 }

 

buttonText視圖裡每個button顯示的文字

{ prev: ' ◄ ', // left triangle

    next:' ► ', // right triangle

    prevYear:'&nbsp;&lt;&lt;&nbsp;', // <<

    nextYear:'&nbsp;&gt;&gt;&nbsp;', // >>

    today: 'today',

    month: 'month',

    week: 'week',

    day: 'day' }

monthNames月的全稱

monthNamesShort月的簡稱

dayNames星期的全稱

dayNamesShort星期的簡稱

 

4.8、相關點擊事件

dayClick (callback)當某天被點擊時觸發

function( date, allDay, jsEvent, view ) { }

date：當前點擊到的日期 

allDay ：是否是全天性的

jsEvent：底層的JS事件

view ：當前的view對象

this關鍵字指代為<td>

eventClick (callback)當一個事件給點擊時觸發

function( event, jsEvent, view ) { }

event ：當前的event對象

jsEvent ：底層的JS事件

view ：當前的view

this：指代的<td>裡的<div>元素

eventMouseover (callback)滑鼠滑動到事件上觸發，同eventClick類似

eventMouseout (callback)滑鼠離開到事件上觸發，同eventClick類似

 

4.9、選中相關：當點擊或者拖拽到相關位置時，非否選中對應元素

selectable是否選中對應元素

selectHelper

在議程表相關的view裡，當選中對應時刻時，是否顯示相關資訊

unselectAuto

當點擊頁面日曆以外的位置時，是否自動取消當前的選中

unselectCancel

指定哪些元素不會清空當前的選中，以JQUERY選取器的方式指定 '#someId'

select (callback)被選中時的函數回調

function( startDate, endDate, allDay, jsEvent, view )

unselect (callback)選中被取消時的回調

select (method)選中某個時間

.fullCalendar( 'select', startDate, endDate, allDay )

unselect (method)取消選中

.fullCalendar( 'unselect' )

4.10、Event相關

EventObject事件對象

 

id	可選，事件唯一標識，重複的事件具有相同的
title	必須，事件在日曆上顯示的title
allDay	可選，是否是整日事件
start	必須，事件的開始時間
end	可選，結束時間
url	可選，當指定後，事件被點擊將開啟對應url
className	指定事件的樣式
editable	是否可拖拽
source	指向次event的eventsource對象
color	背景和邊框顏色
backgroundColor	背景顏色
borderColor	邊框顏色
textColor	文本顏色

 

EventSource Object

EVENTS:在日曆介面裡，參數event的對象：分array，json feed，function三種類型

Eventsource:

{

events: [

{ title: 'Event1',

    start: '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	文本顏色

 

events (asan array)數組形式組織的事件集

$('#calendar').fullCalendar({

    events: [

        {

            title  : 'event1',

            start  : '2010-01-01'

        },

        {

            title : 'event2',

            start  : '2010-01-05',

            end    : '2010-01-07'

        },

        {

            title  : 'event3',

            start  : '2010-01-09 12:30:00',

            allDay : false //will make the time show

        }

    ]

});

events (asa json feed)JSON源方式擷取的events

每次當view的時間改變時，均會擷取json。其中start和end為對應view的start和end，插入_是預設不訪問瀏覽器緩衝。可通過cache:true來預設讀取瀏覽器緩衝

$('#calendar').fullCalendar({

    events: '/myfeed.php'

});

會被轉換為如下url請求

/myfeed.php?start=1262332800&end=1265011200&_=1263178646

 

events (asa function)

作為方法的形式獲得event

$('#calendar').fullCalendar({

    events: function(start,end, callback) {

        $.ajax({

            url:'myxmlfeed.php',

            dataType: 'xml',

            data: {

                // ourhypothetical feed requires UNIX timestamps

                start:Math.round(start.getTime() / 1000),

                end: Math.round(end.getTime()/ 1000)

            },

            success:function(doc) {

                var events =[];

               $(doc).find('event').each(function() {

                   events.push({

                        title:$(this).attr('title'),

                        start:$(this).attr('start') // will be parsed

                    });

                });

               callback(events);

            }

        });

    }

});

start和end同之前開始和結束時間（預設為-1970的毫秒）

callback為當擷取到event後，會調用的改回呼函數，把資料放入fullcalendar裡的events裡。

eventSources

可以放置多個eventSource（events）

$('#calendar').fullCalendar({

    eventSources: [

        '/feed1.php',

        '/feed2.php'

    ]

});

allDayDefault

當event object裡的allDay為指定時，其預設值

ignoreTimezone忽略timeZone

2008-11-05T08:15:30-05:00

startParam傳遞給伺服器的start參數名

endParam同上

lazyFetching

當view改變時，是否從緩衝資訊擷取event。比如從月視圖切換到周視圖，預設為是

loading (callback)function( isLoading, view )

當調用ajax擷取event是觸發。

updateEvent (method)

在用戶端更新event並在頁面上重新描繪

clientEvents (method)

擷取用戶端儲存的所有events對象

.fullCalendar( 'clientEvents' [, idOrFilter ]) -> Array

removeEvents (method)

刪除event並重新描繪

refetchEvents (method)

重新擷取events並重新描繪

addEventSource (method)

添加eventSource，並立刻在頁面上描繪

.fullCalendar( 'addEventSource', source )

 

removeEventSource (method)

同上

4.11、事件描繪（對應於整個callendar裡的事件）

eventColor

 

eventBackgroundColor

 

eventBorderColor

 

eventTextColor

 

eventRender (callback)

當描繪事件時觸發

function( event, element, view ) { }

event為改事件，element為用來渲染改事件的div元素

eventAfterRender (callback)

同上

renderEvent (method)

.fullCalendar( 'renderEvent', event [, stick ] )

rerenderEvents (method)

.fullCalendar( 'rerenderEvents' )

同refetchEvents 

 

4.12、拖拽事件

需要添加JQUERY UIDraggable  外掛程式，並把editable設定為true。相關屬性和方法同事件類別似

editable

Determines whether the events on the calendar can be modified.

disableDragging

Disables all event dragging, even when events are editable.

disableResizing

Disables all event resizing, even when events are editable.

dragRevertDuration

Time it takes for an event to revert to its original position afteran unsuccessful drag.

dragOpacity

The opacity of an event while it is being dragged.

eventDragStart (callback)

Triggered when event dragging begins.

eventDragStop (callback)

Triggered when 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 when resizing stops and the event has changed in duration.

 

4.13、從日曆外拖拽事件到日曆中

額外需求：

①需要jquery-ui相關控制項的支援jquery-ui-1.8.17.custom.min.js

②日曆的dropple屬性需設定為true

基本思路

①在日曆胖構建好用來拖拽的元素<div>

②設定相應div的drop操作

$('#external-events div.external-event').each(function() {

 

// create an Event Object

// it doesn't need to have a start or end

var eventObject = {

title: $.trim($(this).text()) // use the element's text as the eventtitle

};

 

// store the Event Object in the DOM element so we can get to itlater

$(this).data('eventObject', eventObject);

 

// make the event draggable using jQuery UI

$(this).draggable({

zIndex: 999,

revert: true,      // willcause the event to go back to its

revertDuration: 0  //  original position after the drag

});

 

});

③在日曆中的drop回調中進行構造event並描繪

drop: function(date, allDay) { // this function is called whensomething is dropped

 

// retrieve the dropped element's stored Event Object

var originalEventObject = $(this).data('eventObject');

 

// we need to copy it, so that multiple events don't have areference to the same object

var copiedEventObject = $.extend({}, originalEventObject);

 

// assign it the date that was reported

copiedEventObject.start = date;

copiedEventObject.allDay = allDay;

 

// render the event on the calendar

// the last `true` argument determines if the event"sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)

$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

 

// is the "remove after drop" checkbox checked?

if ($('#drop-remove').is(':checked')) {

// if so, remove the element from the "Draggable Events"list

$(this).remove();

}

 

} 

4.14、日期轉換工具

formatDate (function)

Formats a Date object into a string.

formatDates (function)

Formats a date range (two Date objects)into a string.

parseDate (function)

Parses a string into a Date object.

parseISO8601 (function)

Parses an ISO8601 string into a Dateobject.

 

 

來源：http://blog.csdn.net/francislaw/article/details/7740630