jQuery插件FullCalendar日程表實作可擴充Google月曆功能

jQuery插件FullCalendar日程表實作可擴充Google月曆功能

這個介紹 jQuery 月曆FullCalendar插件是一個非常不錯的月曆工具，可用于制作日程表或計劃安排等，可擴充Google月曆功能，制作個性化的日程表，同時可綁定點選事件或拖動事件，使用非常友善，效果圖如下：

jQuery插件FullCalendar日程表實作可擴充Google月曆功能

Posted in JavaScript by anonymous on 06-12-2009.

1 rating from 1 votes

這個介紹jQuery月曆FullCalendar插件是一個非常不錯的月曆工具，可用于制作日程表或計劃安排等，可擴充Google月曆功能，制作個性化的日程表，同時可綁定點選事件或拖動事件，使用非常友善，效果圖如下：

jQuery插件FullCalendar線上執行個體

http://arshaw.com/fullcalendar/

使用說明

需要使用jQuery庫檔案和jQuery UI庫檔案和FullCalendar庫檔案

http://jquery.com/ 

http://plugins.jquery.com/project/fullcalendar 

http://ui.jquery.com/

同進需要使用fullcalendar.css檔案

使用執行個體

一，包含檔案部分

<link rel=’stylesheet’ type=’text/css’ href=’fullcalendar/fullcalendar.css’ /> 

<script type=’text/javascript’ src=’jquery/jquery.js’></script> 

<script type=’text/javascript’ src=’jquery/ui.core.js’></script> 

<script type=’text/javascript’ src=’fullcalendar/fullcalendar.js’></script> 

如果需要綁定拖動事件，可增加ui.draggable.js檔案

<script type=’text/javascript’ src=’jquery/ui.draggable.js’></script> 

二，HTML部分

<div id=’calendar’></div> 

三，Javascript部分

<script type=’text/javascript’> 

$(document).ready(function() { 

var d = new Date(); 

var y = d.getFullYear(); 

var m = d.getMonth(); 

$(’#calendar’).fullCalendar({ 

draggable: true, 

events: [ 

{ 

id: 1, 

title: "學習jQuery", 

start: new Date(y, m, 6, 14, 0), 

end: new Date(y, m, 11) 

}, 

{ 

id: 2, 

title: "每天寫必優部落格", 

start: new Date(y, m, 2) 

}, 

{ 

id: 2, 

title: "每天寫必優部落格", 

start: new Date(y, m, 9) 

}, 

{ 

id: 3, 

title: "開會", 

start: new Date(y, m, 20, 9, 0) 

}, 

{ 

id: 4, 

title: "檢視facebook", 

start: new Date(y, m, 27, 16), 

end: new Date(y, m, 29), 

url: " http://facebook.com/ " 

} 

] 

}); 

}); 

</script> 

javascript部分主要是設定日程安排，各部分如下：

var d = new Date(); 

var y = d.getFullYear(); 

var m = d.getMonth(); 

擷取時間，使用getFullYear()和getMonth()分别擷取年和月

draggable表示日程安排是否可拖動

events表示具體的日程安排，格式如下：

[{ 

id: 1, 

title: "學習jQuery", 

start: new Date(y, m, 6, 14, 0), 

end: new Date(y, m, 11) 

}] 

注意是一個數組[]，裡面包含JSON資料，分别是id，title，start和end，每個ID表示一個具體的事件安排。

一，同時可支援動态Ajax加載日程安排JSON資料，具體可檢視執行個體源代碼，如下：

<script type=’text/javascript’> 

$(document).ready(function() { 

$(’#calendar’).fullCalendar({ 

draggable: true, 

events: “json_events.php“, 

eventDrop: function(event, delta) { 

alert(event.title + ‘ was moved ‘ + delta + ‘ days/n’ + 

‘(should probably update your database)’); 

}, 

loading: function(bool) { 

if (bool) $(’#loading’).show(); 

else $(’#loading’).hide(); 

} 

}); 

}); 

</script> 

events直接調用PHP檔案擷取JSON資料，同時實作eventDrop和加載loading事件

二，可實作Google月曆擴充，具體可檢視執行個體源代碼，如下：

<script type=’text/javascript’> 

$(document).ready(function() { 

$(’#calendar’).fullCalendar({ 

events: $.fullCalendar.gcalFeed( 

‘http://www.google.com/calendar/feeds/’, 

{draggable: false, className: ‘mygcal’} 

), 

eventClick: function(event) { 

window.open(event.url, ‘gcalevent’, ‘width=700,height=600′); 

return false; 

}, 

loading: function(bool) { 

if (bool) $(’#loading’).show(); 

else $(’#loading’).hide(); 

} 

}); 

}); 

</script> 

events調用$.fullCalendar.gcalFeed()方法擷取google月曆資料，同時實作eventClick和加載loading事件

使用jQuery插件FullCalendar日程表非常簡單，隻需要指定日程的具體事件，就可實作一個日程安排計劃，同時可擴充Google月曆功能，非常值得推薦。

FullCalendar 插件官方網址

http://arshaw.com/fullcalendar/

FullCalendar 插件線上文檔說明

http://arshaw.com/fullcalendar/docs/

FullCalendar 插件線上下載下傳

http://arshaw.com/fullcalendar/download/