1.與google日歷連接，別忘記加入<script type='text/javascript' src='js/gcal.js'/>
events: $.fullCalendar.gcalFeed
("http://www.google.com/calendar/feeds/xuqi86@gmail.com/private-660ae86cc26345cff3430480e8eea4bb/basic",
??{
???className:'gcal-event',
???editable:true,
???currentTimezone:'Asia/Shanghai'
??}
)
2.表頭信息
agenda帶有具體的時間格子
month,basicWeek,basicDay,agendaWeek,agendaDay 是5種不同的視圖
空格和,的區別
header:{
left:???'month,basicWeek,basicDay,agendaWeek,agendaDay',
center: 'title',
right:??'prevYear,prev,today,next,nextYear'
}
3.是否使用 jquery的主題(我用的是start主題)
<link type="text/css" href="css/start/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type='text/javascript' src='js/jquery.js'>
theme:true
4.
buttonText:{
prev:?????'昨天',
next:?????'明天',
prevYear: '去年',
nextYear: '明年',
today:????'今天',
month:????'月',
week:?????'周',
day:??????'日'
}
5.每周的第一天是哪天
Sunday=0, Monday=1, Tuesday=2, etc.
firstDay:1
6.日期從右向左顯示...不知道什么時候會這么用
isRTL:false
7.是否顯示周末
weekends:true
8.在月視圖里顯示周的模式，因為可能每月周數不同，所以月視圖高度不一定，注意引號
fixed 固定顯示6周高，高度永遠保持不變
liquid 不固定周數，周高度可變化
variable 不固定周數，但高度固定
weekMode:'fixed'
9.日歷高度,包括表頭
height: 850
內容高度，不包括表頭
contentHeight: 600
10.單元格寬與高度的比值
注意：此屬性不能與日歷高度同時存在
aspectRatio: 1.35
11.切換視圖的時候要執行的操作
view是一個對象，后面將說道具體的屬性
viewDisplay:function(view){}
12.窗口大小變化時執行的操作
windowResize: function(view){}
13.把日歷綁定到一個id的東西上
$('#id').fullCalendar('render');
14.銷毀id日歷
把日歷回復到初始化前，刪除了所有元素，時間，和初始化數據
$('#id').fullCalendar('destroy');
15.默認顯示的視圖，注意引號
defaultView:'month'
16.view對象的屬性
name: 包括month,basicWeek,basicDay,agendaWeek,agendaDay
title: 標題內容(例如"September 2009" or "Sep 7 - 13 2009")
start:Date類型, 該view下的第一天.
end:Date類型, 該view下的最后一天.??由于是一個閉合的值, 所以, 比如在month view下, 10月這個月份, 那么end對應的應該是11月的第一天.
visStart:Date類型. 在該view下第一個可以訪問的day. month view下, 該值是當月的第一天, week view下, 則通常和start一致.
visEnd: Date類型, 最后一個可訪問的day
17.集中設定初始化值
可以設置的屬性有 dragOpacity, titleFormat, columnFormat, and timeFormat
被應用的視圖有
{
????month:??????// month view
????week:???????// basicWeek & agendaWeek views
????day:????????// basicDay & agendaDay views
????agenda:?????// agendaDay & agendaWeek views
????agendaDay:??// agendaDay view
????agendaWeek: // agendaWeek view
????basic:??????// basicWeek & basicDay views
????basicWeek:??// basicWeek view
????basicDay:???// basicDay view
????'':?????????// (an empty string) when no other properties match
}
18.取得視圖對象
.fullCalendar('getView')->View Object
var view = $('#calendar').fullCalendar('getView');
alert("The view's title is " + view.title);
19.改變當前視圖
.fullCalendar('changeView',viewName)
20.20里以下屬性都是在agenda視圖里起作用的
在agenda開頭的視圖里，是否顯示最上面all-day那一欄
allDaySlot:true
默認的文字:
allDayText:'今天的任務'
左邊那一列時間的格式:
axisFormat:'h(:mm)tt'
()表示整點就不顯示里面的內容
????支持的格式化占位符
1. s: 秒
2. ss: 秒, 兩位
3. m: 分鐘
4. mm: 分鐘, 兩位
5. h: 小時, 12小時制
6. hh: 小時, 12小時制, 兩位
7. H: 小時, 24小時制
8. HH: 小時, 24小時制, 兩位
9. d: 日期數字
10. dd: 日期數字, 兩位
11. ddd: 日期名稱, 縮寫
12. dddd: 日期名稱, 全名
13. M: 月份數字
14. MM: 月份數字, 兩位
15. MMM: 月份名稱, 縮寫
16. MMMM: 月份名稱, 全名
17. yy: 兩位的年份
18. yyyy: 4位的年份
19. t: 上下午加 a或者p
20. tt: 上下午加am或pm
21. T: 上下午加A 或者P
22. TT: 上下午加AM或PM
23. u: ISO8601格式
24. S: 給日期加上st, nd, rd, th等后綴, 表明是第幾天
每行的時間間隔
slotMinutes:10
滾動條滾動到得起始時間
firstHour: 7
每天從幾點起開始顯示
minTime:7
minTime:'7:30'
如果加上了分鐘需要設置時間間隔
每天顯示到幾點結束
maxTime:24
maxTime:'23:10'
事件默認的時間執行長度
defaultEventMinutes:120
此時，如果事件對象沒有指定執行多長時間，則默認執行兩個小時，后面將說到事件對象
21.當前日期
year: 必須是4位數字，如果不指定，則是當前年
month: 當前月，從0開始，如果當前年和月都未指定，則月顯示為1月
date:日期的一個月，這個屬性只和周視圖和日視圖有關，如果沒指定，并且年月也沒有指定，則顯示一個月的第一天
以下8個關于操作日期的方法
.fullCalendar('prev') 返回到上一個年月日，與視圖的種類有關
.fullCalendar('next')
.fullCalendar('prevYear')
.fullCalendar('nextYear')
.fullCalendar('today')
.fullCalendar( 'gotoDate', year [, month, [ date ]] )??注意月從0開始
.fullCalendar( 'incrementDate', years [, months, [ days ]] )
.fullCalendar( 'getDate' ) -> Date 取得一個日期對象
$('#my-button').click(function() {
????var d = $('#calendar').fullCalendar('getDate');
????alert("The current date of the calendar is " + d);
});
22.指定默認的時間格式
timeFormat:h(:mm)tt
23.指定默認的列格式
columnFormat:{
????month: 'ddd',????// Mon
????week: 'ddd M/d', // Mon 9/7
????day: 'dddd M/d'??// Monday 9/7
}
24.標題格式化
titleFormat:{
????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
}
25.月顯示的名字
monthNames:['January', 'February', 'March', 'April', 'May', 'June', 'July',
'August', 'September', 'October', 'November', 'December']
monthNames:['一月','二月', '三月', '四月', '五月', '六月', '七月',
'八月', '九月', '十月', '十一月', '十二月']
月名字的簡寫
monthNamesShort:['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
26.星期顯示的名字
dayNames:['Sunday', 'Monday', 'Tuesday', 'Wednesday',
'Thursday', 'Friday', 'Saturday']
dayNames:['星期日', '星期一', '星期二', '星期三',
'星期四', '星期五', '星期六']
星期名字的縮寫
dayNamesShort:['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
27.4個關于鼠標的回調方法
當點擊某一天時觸發此操作
dayClick:function( date, allDay, jsEvent, view ) { }
dayClick: function(date, allDay, jsEvent, view) {
????????if (allDay) {
????????????alert('Clicked on the entire day: ' + date);
????????}else{
????????????alert('Clicked on the slot: ' + date);
????????}
????????alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
????????alert('Current view: ' + view.name);
????????// change the day's background color just for fun
????????$(this).css('background-color', 'red');
????}
當點擊某一個事件時觸發此操作
eventClick:function( event, jsEvent, view ) { }
eventClick: function(calEvent, jsEvent, view) {
????????alert('Event: ' + calEvent.title);
????????alert('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
????????alert('View: ' + view.name);
????????// change the border color just for fun
????????$(this).css('border-color', 'red');
????}
當鼠標懸停在一個事件上觸發此操作
eventMouseover:function( event, jsEvent, view ) { }
當鼠標從一個事件上移開觸發此操作
eventMouseout:function( event, jsEvent, view ) { }
28.事件對象
fullcalendar用來存儲一個日歷事件信息的標準對象
一下屬性中，只有title和start是必須的
id:String/Integer (optional)
title:String
allDay:true or false (optional)??指定是否是全天事件
start:Date 事件開始時間，格式如下
IETF format (ex: "Wed, 18 Oct 2009 13:00:00 EST")
ISO8601 format (ex: "2009-11-05T13:15:30Z")
end: Date (optional) 事件結束時間
如果事件是一個全天事件，則結束時間包括在內
如果事件不是全天事件，結束時間是0:00，則結束時間的第二天不包括在內
url:String (optional)??當用戶點擊時，將會訪問的網址
className: String/Array (optional) 這個事件使用的css 類名
editable:true or false (optional) 事件是否可編輯
source: Array/String/Function (automatically populated) 事件源，自動指定
除了以上屬性外，你可以自己指定屬性和值
29.事件數組 events (as an array)
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
????????}
????]
事件Json源 events (as a json feed)
events: "/myfeed.php" 該URL返回一個json或數組的日程事件組, GET參數視startParam和endParam選項而定
當用戶改變視圖時觸發此事件，FullCalendar 將通過GET方法傳遞參數來確定需要哪些日程數據
/myfeed.php?start=1262332800&end=1265011200&_=1263178646
startParam:'start' 開始參數的名字
endParam:'end' 結束參數的名字
cacheParam:'_' 緩存參數的名字
lazyFetching:true 只有當需要的時候才取得數據，先從緩存里讀取數據
_參數是自動加上去的，防止讀緩存內容
日程事件 events (as a function)
events:function( start, end, callback ) { }
events: function(start, end, callback) {
????????$.ajax({
????????????url: 'myxmlfeed.php',
????????????dataType: 'xml',
????????????data: {
????????????????// our hypothetical 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() {
????????????????????event.push({
????????????????????????title: $(this).attr('title'),
????????????????????????start: $(this).attr('start') // will be parsed
????????????????????});
????????????????});
????????????????callback(events);
????????????}
????????});
????}
30.事件源
eventSources 存儲數組對象，可以是Arrays/Functions/URLs
eventSources: [
????????$.fullCalendar.gcalFeed("http://www.google.com/feed1"),
????????$.fullCalendar.gcalFeed("http://www.google.com/feed2")
????]
31.日程默認為全天日程
allDayDefault:true
32.當讀取ajax數據時
loading:function( isLoading, view )
當開始讀取的時候是true,當讀取完成是false
33.改變日程事件
updateEvent:
eventClick: function(event, element) {
????????event.title = "CLICKED!";
????????$('#calendar').fullCalendar('updateEvent', event);
????}
日程對象可以通過回調函數被獲得，比如 eventClick 或者 clientEvents的方法
34.取得客戶端內存中保存的日程對象
clientEvents
.fullCalendar( 'clientEvents' [, idOrFilter ] ) -> Array 返回一個日程對象的數組
如果idOrFilter不寫，則輸出全部保存在客戶端的日程對象數組
如果為ID ，則返回所有為此ID的對象
還可以為一個過濾function 接受一個日程對象，如果返回true，則此值包含在客戶端對象組中國
35.從日歷中刪除日程
removeEvents 參數同上
36.重新取得日程
.fullCalendar('refetchEvents') 從所有源并且重新渲染到屏幕上
37.增加一個日程源
.fullCalendar('addEventSource',source)
源可以是Array/URL/Function ，獲取的數據可以立刻顯示在日歷上
38.刪除一個事件源
.fullCalendar('removeEventSource',source)
39.日程綁定
eventRender.function( event, element, view ) { }
event 是企圖被渲染的日程對象
element 是一個新建的jQuery<div>被用來渲染的，他已經在恰當的時間被創建
eventRender 返回函數可以修改element，返回一個新的dom元素，用來替換被渲染的元素，或者返回false，禁止被渲染
40.日程渲染后事件
eventAfterRender:function( event, element, view ) { }
41.渲染事件
.fullCalendar('renderEvent',event[,stick])
通常，一旦日歷重新取得日程源，則原有日程將消失，當指定stick為true時，日程將永久的保存到日歷上
42.重新渲染所有事件
rerenderEvents
.fullCalendar('rerenderEvents')
43.是否可以拖拽和改變大小
editable:true
44.禁止拖拽和改變大小
disableDragging:false
disableResizing:false
45.如果拖拽不成功，多久回復原狀
dragRevertDuration:500??單位是毫秒
46.拖拽不透明度
dragOpacity:{
agenda:.5 //對于agenda試圖
'':1.0???//其他視圖
}
47.需要的js包
<script type='text/javascript' src='js/ui.core.js'/>
<script type='text/javascript' src='js/ui.draggable.js'/>
<script type='text/javascript' src='js/ui.resizable.js'/>
注意順序，要把jquery.js放到這3個包前面
48.拖拽事件引發的操作
eventDragStart:function(event,jsEvent,ui,view) { }
eventDragStop:function( event, jsEvent, ui, view ) { }
49.當拖拽完成并且時間改變
eventDrop:function( event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view ) { }
dayDelta 保存日程向前或者向后移動了多少天
minuteDelta 這個值只有在agenda視圖有效，移動的時間
allDay 如果是月視圖，或者是agenda視圖的全天日程，此值為true,否則為false
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
????????alert(
????????????event.title + " was moved " +
????????????dayDelta + " days and " +
????????????minuteDelta + " minutes."
????????);
????????if (allDay) {
????????????alert("Event is now all-day");
????????}else{
????????????alert("Event has a time-of-day");
????????}
????????if (!confirm("Are you sure about this change?")) {
????????????revertFunc();
????????}
????}
50.改變大小的事件觸發的操作
eventResizeStart:function( event, jsEvent, ui, view ) { }
eventResizeStop:function( event, jsEvent, ui, view ) { }
eventResize:function( event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view ) { }
詳細文檔:http://arshaw.com/fullcalendar/docs/
轉自：http://www.cnblogs.com/yuanxianlai/archive/2012/03/31/2427117.html
