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/