快捷導(dǎo)航

JS日程管理插件FullCalendar中文說明文檔

更新時(shí)間：2017年02月06日 17:15:10 作者：月光光

JS日程管理插件FullCalendar提供了豐富的屬性設(shè)置和方法調(diào)用，開發(fā)者可以根據(jù)FullCalendar提供的API快速完成一個(gè)日歷日程的開發(fā)，本文將FullCalendar的常用屬性和方法、回調(diào)函數(shù)等整理成中文文檔，以供參閱。

JS日程管理插件FullCalendar提供了豐富的屬性設(shè)置和方法調(diào)用，開發(fā)者可以根據(jù)FullCalendar提供的API快速完成一個(gè)日歷日程的開發(fā)，本文將FullCalendar的常用屬性和方法、回調(diào)函數(shù)等整理成中文文檔，以供參閱

普通顯示設(shè)置

屬性	描述	默認(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)

以下選項(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

當(dāng)前日期設(shè)置

屬性	描述	默認(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)前日歷中的日期

文本與時(shí)間定制

你可以根據(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"

鼠標(biāo)單擊和滑過

以下列出的是當(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' )

日程事件數(shù)據(jù)

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ù)接口。jb51.net后面會(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)和縮放

拖動(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 ] )