FullCalendar 官方文档翻译2
1、基本語(yǔ)法：
首先，fullcalendar和JQUERY一樣，以面向?qū)ο蟮姆绞絹?lái)組織代碼。當(dāng)然，這里的面向?qū)ο髢H僅是指可以把整個(gè)fullcalendar理解 為一個(gè)類，這個(gè)類里包括有很多的屬性、方法、委托(函數(shù)回調(diào))作為成員變量。通過(guò)為這些成員變量賦值，即可實(shí)例化出一個(gè)符合自己需求的 fullcalendar實(shí)例出來(lái)，即最終在瀏覽器里渲染出的日歷。換句話說(shuō)，我們所做的絕大多數(shù)工作就是按照f(shuō)ullcalendar的語(yǔ)法約定去配置 出一個(gè)符合我們需求的fullcalendar實(shí)例。除非對(duì)于極少的特殊需求，fullcalendar向我們提供的接口不足以滿足，才會(huì)去修改 fullcalendar本身的js文件。
作為一種JQUERY插件，可以把fullcalendar理解為向 jquery對(duì)象集里添加了一個(gè)日歷相關(guān)的對(duì)象，這個(gè)對(duì)象里相關(guān)方法、屬性、的調(diào)用方式，即為fullcalendar的基本語(yǔ)法。整個(gè)語(yǔ)法分為兩種：
第一種和日歷本身無(wú)關(guān)，僅僅是利用fullcalendar提供的方法來(lái)進(jìn)行字符串和日期間的轉(zhuǎn)換，形式如下：
$.fullCalendar.formatDate();
第二種則是與和配置fullcalendar實(shí)例相關(guān)的，這最終會(huì)影響到fullcalendar在瀏覽器里的渲染，形式如下$(‘#someId’) .fullCalendar(content);
$(‘#someId’)將得到一個(gè)jquery對(duì)象，其中someId為你希望渲染日歷的元素id。重點(diǎn)是后面一部分.fullCalendar(content);
Content有三種形式：
①為屬性賦值 {key:value,…}
$('#calendar').fullCalendar({
weekends: false // will hide Saturdays and Sundays
});
這里即得到一個(gè)fullcalendar實(shí)例，其中weekends屬性為false,即月日歷不會(huì)顯示周末。
②方法調(diào)用'methodName','para'
$('#calendar').fullCalendar('next')
這里會(huì)調(diào)用fullcalendar實(shí)例的next方法，其結(jié)果是瀏覽器的日歷向后翻一月(日)
③為方法回調(diào)賦值
$('#calendar').fullCalendar({
dayClick: function() { alert('a day has been clicked!'); }
});
這里是為日歷控件的dayClick事件賦值為相應(yīng)的匿名函數(shù)，其結(jié)果是日歷的每日被點(diǎn)擊時(shí)，會(huì)彈出對(duì)話框。
我想先有這樣一種觀念更便于后面的理解，需要渲染一個(gè)fullcalendar控件時(shí)，通常是直接在實(shí)例化一個(gè)fullcalendar時(shí)即完成它的絕大 多數(shù)屬性 和委托的賦值，如此即得到一個(gè)會(huì)被瀏覽器渲染成日歷的fullcalendar對(duì)象（A），當(dāng)這個(gè)對(duì)象已經(jīng)被渲染后，如果需要?jiǎng)討B(tài)的修改它的相關(guān)配置，可 以通過(guò)$('#calendar').fullCalendar('option','aspectRatio', 1.8); 的形式去修改。
如果需要對(duì)象A發(fā)生某些變化，也可以調(diào)用A的某些方法，比如說(shuō)翻頁(yè)。
2、內(nèi)容框架
整個(gè)fullcalendar由兩部分組成
日歷+事件
其中日歷即為由js腳本在瀏覽器描繪出的日歷控件，這一部分完全由js控制，和服務(wù)器無(wú)需相關(guān)聯(lián)。
事件則是日歷功能的擴(kuò)展，可以把事件理解為一個(gè)個(gè)會(huì)議安排。這些會(huì)議安排通常是保存在服務(wù)器的，在每次頁(yè)面加載時(shí)，fullcalendar得到會(huì)議安排的集合，然后按照其中的日期去把事件描繪到日歷對(duì)應(yīng)的地方。
3、知識(shí)點(diǎn)概要
余下詳細(xì)的知識(shí)點(diǎn)均為fullcalendar官方文檔的翻譯和組合。每一部分均按照屬性、方法、函數(shù)回調(diào)的順序來(lái)組織。通常會(huì)有相關(guān)知識(shí)點(diǎn)的簡(jiǎn)介，對(duì)于比較復(fù)雜或者關(guān)鍵的點(diǎn)，會(huì)有相關(guān)聯(lián)的代碼作為事例。同樣，這些事例也出之于fullcalendar官方文檔。
以下是對(duì)這所有知識(shí)點(diǎn)的歸納和概覽
日歷部分：
視圖：日歷的不同的展現(xiàn)模式。當(dāng)前共有5中視圖
視圖的通用配置：這一部分的配置通常可以對(duì)5中視圖均有效。
視圖對(duì)象：fullcalendar的視圖Module
獲取視圖對(duì)象以及跳轉(zhuǎn)到指定視圖的方法
議程相關(guān)：即對(duì)議程視圖模式下，相關(guān)細(xì)節(jié)的配置
日期相關(guān)：涉及到日歷系統(tǒng)里日期的顯示格式，日歷加載的日期，以及獲取相關(guān)日期或者日歷改變?nèi)掌诘南嚓P(guān)方法
時(shí)間和文本的自定義設(shè)置：涉及到自定義或者本地化的相關(guān)配置大多在這里完成
鼠標(biāo)的相關(guān)事件捕獲：比如鼠標(biāo)單擊到某個(gè)特殊地方（日歷中的某一天等）等觸發(fā)的方法在這里配置
選中元素的配置：這一部分是來(lái)配置當(dāng)鼠標(biāo)點(diǎn)擊某一日歷元素時(shí)，是否選中該元素以及與此相關(guān)的事件
事件部分如下：
事件Module包含的信息
事件的產(chǎn)生：包括事件源的管理和事件的管理
事件的描繪：把一個(gè)事件描繪到瀏覽器的整個(gè)過(guò)程包含在這里
拖拽事件：用鼠標(biāo)拖拽以移動(dòng)某個(gè)時(shí)間，這需要其他JQUERY ui插件的支持
從日歷外拖拽事件到日歷內(nèi)以添加事件：對(duì)日歷內(nèi)拖拽事件的擴(kuò)展
4、詳細(xì)知識(shí)點(diǎn)
4.1、合法的視圖
month-see example 月視圖
basicWeek-see example周視圖（一周內(nèi)事件和日期的集合）
basicDay-see example(一日內(nèi)事件和日期的集合)
agendaWeek-see example(周日程表)
agendaDay-see example(日日程表)
4.2、視圖的通用配置
header
頭部顯示的信息，分left , center, right三個(gè)部位
合法的屬性值：title,prev,next,prevYear,nextYear,today, avaibleViewName
header:{
left:'title',
center:'prevYear,nextYear',
right:'prev,today,next,agendaDay,month'
}
theme
當(dāng)為true時(shí)，可以配合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：周數(shù)不定，每周的高度可變，整個(gè)日歷高度不變
variable：周數(shù)不定，每周的高度固定，整個(gè)日歷的高度可變
height整個(gè)日歷的高度（包括header和content）
contentHeight內(nèi)容高度：
aspectRatio寬和高的比例
$('#calendar').fullCalendar('option','aspectRatio', 1.8); 可以動(dòng)態(tài)設(shè)置
viewDisplay(callback)函數(shù)回調(diào)，每次view顯示時(shí)均會(huì)調(diào)用
function(view) { }
View是view對(duì)象
windowResize(callback)函數(shù)回調(diào)，每次窗口大小改變時(shí)調(diào)用，
viewDisplay
render(method)立刻顯示view
destroy(method)釋放calendar，包括相關(guān)數(shù)據(jù)
defaultView：日歷初始化時(shí)的視圖，默認(rèn)為month
4.3、視圖對(duì)象viewObject
|
name |
可用的5個(gè)視圖名之一 |
|
title |
視圖部分的title 2012.9.1 |
|
start |
當(dāng)天view開始的第一天 |
|
end |
|
|
visStart |
Visible Start Day |
|
visEnd |
在相關(guān)方法回調(diào)中均會(huì)有次對(duì)象
4.4、獲取視圖對(duì)象
.fullCalendar( 'getView' )
切換視圖
.fullCalendar( 'changeView',viewName)
4.5、議程相關(guān)——控制日程相關(guān)的視圖的顯示信息
allDaySlot是否顯示全天日程
allDayText顯示的文字
axisFormat日期顯示的格式
slotMinutes間隔時(shí)間
defaultEventMinutes默認(rèn)的事件持續(xù)事件
firstHour在日程view里可見(jiàn)的起始時(shí)間，可通過(guò)滾動(dòng)條滾動(dòng)到在此時(shí)間之前的時(shí)間
minTime整日日程的起始時(shí)間
maxTime整日日程的結(jié)束時(shí)間
4.6、日期相關(guān)
year日歷加載時(shí)的年份
month日歷加載時(shí)的月份（從0開始）
date日歷加載時(shí)在月份的天數(shù)（對(duì)周視圖和日視圖有效）
prev(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)一段時(shí)間
getDate(method)獲取日歷的當(dāng)前日期 Date類型
4.7、時(shí)間和文本的自定義
timeFormat每個(gè)事件默認(rèn)顯示的時(shí)間格式
columnFormat每個(gè)視圖列名顯示的格式、
{ month: 'ddd', // Mon
week: 'ddd M/d', // Mon9/7
day: 'dddd M/d' // Monday9/7 }
titleFormat每個(gè)視圖里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視圖里每個(gè)button顯示的文字
{ prev: ' ◄ ', // left triangle
next:' ► ', // right triangle
prevYear:' << ', // <<
nextYear:' >> ', // >>
today: 'today',
month: 'month',
week: 'week',
day: 'day' }
monthNames月的全稱
monthNamesShort月的簡(jiǎn)稱
dayNames星期的全稱
dayNamesShort星期的簡(jiǎn)稱
4.8、相關(guān)點(diǎn)擊事件
dayClick(callback)當(dāng)某天被點(diǎn)擊時(shí)觸發(fā)
function(date,allDay,jsEvent,view) { }
date：當(dāng)前點(diǎn)擊到的日期
allDay：是否是全天性的
jsEvent：底層的JS事件
view：當(dāng)前的view對(duì)象
this關(guān)鍵字指代為<td>
eventClick(callback)當(dāng)一個(gè)事件給點(diǎn)擊時(shí)觸發(fā)
function(event,jsEvent,view) { }
event：當(dāng)前的event對(duì)象
jsEvent：底層的JS事件
view：當(dāng)前的view
this：指代的<td>里的<div>元素
eventMouseover(callback)鼠標(biāo)滑動(dòng)到事件上觸發(fā)，同eventClick類似
eventMouseout(callback)鼠標(biāo)離開到事件上觸發(fā)，同eventClick類似
4.9、選中相關(guān)：當(dāng)點(diǎn)擊或者拖拽到相關(guān)位置時(shí)，非否選中對(duì)應(yīng)元素
selectable是否選中對(duì)應(yīng)元素
selectHelper
在日程表相關(guān)的view里，當(dāng)選中對(duì)應(yīng)時(shí)刻時(shí)，是否顯示相關(guān)信息
unselectAuto
當(dāng)點(diǎn)擊頁(yè)面日歷以外的位置時(shí)，是否自動(dòng)取消當(dāng)前的選中
unselectCancel
指定哪些元素不會(huì)清空當(dāng)前的選中，以JQUERY選擇器的方式指定 '#someId'
select(callback)被選中時(shí)的函數(shù)回調(diào)
function(startDate,endDate,allDay,jsEvent,view)
unselect(callback)選中被取消時(shí)的回調(diào)
select(method)選中某個(gè)時(shí)間
.fullCalendar( 'select',startDate,endDate,allDay)
unselect(method)取消選中
.fullCalendar( 'unselect' )
4.10、Event相關(guān)
EventObject事件對(duì)象
|
id |
可選，事件唯一標(biāo)識(shí)，重復(fù)的事件具有相同的 |
|
title |
必須，事件在日歷上顯示的title |
|
allDay |
可選，是否是整日事件 |
|
start |
必須，事件的開始時(shí)間 |
|
end |
可選，結(jié)束時(shí)間 |
|
url |
可選，當(dāng)指定后，事件被點(diǎn)擊將打開對(duì)應(yīng)url |
|
className |
指定事件的樣式 |
|
editable |
是否可拖拽 |
|
source |
指向次event的eventsource對(duì)象 |
|
color |
背景和邊框顏色 |
|
backgroundColor |
背景顏色 |
|
borderColor |
邊框顏色 |
|
textColor |
文本顏色 |
EventSource Object
EVENTS:在日歷界面里，參數(shù)event的對(duì)象：分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可選的配置選項(xiàng)
|
className |
指定事件的樣式 |
|
editable |
是否可拖拽 |
|
source |
指向次event的eventsource對(duì)象 |
|
color |
背景和邊框顏色 |
|
backgroundColor |
背景顏色 |
|
borderColor |
邊框顏色 |
|
textColor |
文本顏色 |
events(asan array)數(shù)組形式組織的事件集
$('#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
每次當(dāng)view的時(shí)間改變時(shí)，均會(huì)獲取json。其中start和end為對(duì)應(yīng)view的start和end，插入_是默認(rèn)不訪問(wèn)瀏覽器緩存。可通過(guò)cache:true來(lái)默認(rèn)讀取瀏覽器緩存
$('#calendar').fullCalendar({
events: '/myfeed.php'
});
會(huì)被轉(zhuǎn)換為如下url請(qǐng)求
/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同之前開始和結(jié)束時(shí)間（默認(rèn)為-1970的毫秒）
callback為當(dāng)獲取到event后，會(huì)調(diào)用的改回調(diào)函數(shù)，把數(shù)據(jù)放入fullcalendar里的events里。
eventSources
可以放置多個(gè)eventSource（events）
$('#calendar').fullCalendar({
eventSources: [
'/feed1.php',
'/feed2.php'
]
});
allDayDefault
當(dāng)event object里的allDay為指定時(shí)，其默認(rèn)值
ignoreTimezone忽略timeZone
2008-11-05T08:15:30-05:00
startParam傳遞給服務(wù)器的start參數(shù)名
endParam同上
lazyFetching
當(dāng)view改變時(shí)，是否從緩存信息獲取event。比如從月視圖切換到周視圖，默認(rèn)為是
loading(callback)function(isLoading,view)
當(dāng)調(diào)用ajax獲取event是觸發(fā)。
updateEvent(method)
在客戶端更新event并在頁(yè)面上重新描繪
clientEvents(method)
獲取客戶端保存的所有events對(duì)象
.fullCalendar( 'clientEvents' [,idOrFilter]) -> Array
removeEvents(method)
刪除event并重新描繪
refetchEvents(method)
重新獲取events并重新描繪
addEventSource(method)
添加eventSource，并立刻在頁(yè)面上描繪
.fullCalendar( 'addEventSource',source)
removeEventSource(method)
同上
4.11、事件描繪（對(duì)應(yīng)于整個(gè)callendar里的事件）
eventColor
eventBackgroundColor
eventBorderColor
eventTextColor
eventRender(callback)
當(dāng)描繪事件時(shí)觸發(fā)
function(event,element,view) { }
event為改事件，element為用來(lái)渲染改事件的div元素
eventAfterRender(callback)
同上
renderEvent(method)
.fullCalendar( 'renderEvent',event[,stick] )
rerenderEvents(method)
.fullCalendar( 'rerenderEvents' )
同refetchEvents
4.12、拖拽事件
需要添加JQUERY UIDraggable 插件，并把editable設(shè)置為true。相關(guān)屬性和方法同事件類似
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相關(guān)控件的支持jquery-ui-1.8.17.custom.min.js
②日歷的dropple屬性需設(shè)置為true
基本思路
①在日歷胖構(gòu)建好用來(lái)拖拽的元素<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 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回調(diào)中進(jìn)行構(gòu)造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、日期轉(zhuǎn)換工具
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.
總結(jié)
以上是生活随笔為你收集整理的FullCalendar 官方文档翻译2的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： vis是什么(车架号是什么)
- 下一篇： ofd是什么格式的文件