jQuery插件FullCalendar日程表实现可扩展Google日历功能

这个介绍jQuery日历FullCalendar插件是一个非常不错的日历工具，可用于制作日程表或计划安排等，可扩展Google日历功能，制作个性化的日程表，同时可绑定点击事件或拖动事件，使用非常方便，效果图如下：
jQuery插件FullCalendar日程表实现可扩展Google日历功能
jQuery插件FullCalendar在线实例
http://arshaw.com/fullcalendar/

使用说明
需要使用jQuery库文件和jQueryUI库文件和FullCalendar库文件
http://jquery.com/
http://plugins.jquery.com/project/fullcalendar
http://ui.jquery.com/

同进需要使用fullcalendar.css文件

使用实例
一，包含文件部分

1.<linkrel='stylesheet'type='text/css'href="fullcalendar/fullcalendar.css"mce_href="fullcalendar/fullcalendar.css"/>
2.<mce:scripttype='text/javascript'src="jquery/jquery.js"mce_src="jquery/jquery.js"></mce:script>
3.<mce:scripttype='text/javascript'src="jquery/ui.core.js"mce_src="jquery/ui.core.js"></mce:script>
4.<mce:scripttype='text/javascript'src="fullcalendar/fullcalendar.js"mce_src="fullcalendar/fullcalendar.js"></mce:script>

如果需要绑定拖动事件，可增加ui.draggable.js文件

1.<mce:scripttype='text/javascript'src="jquery/ui.draggable.js"mce_src="jquery/ui.draggable.js"></mce:script>

二，HTML部分

1.<divid='calendar'></div>

三，Javascript部分

1.<mce:scripttype='text/javascript'><!--
2.$(document).ready(function(){
3.vard=newDate();
4.vary=d.getFullYear();
5.varm=d.getMonth();
6.$('#calendar').fullCalendar({
7.draggable:true,
8.events:[
9.{
10.id:1,
11.title:"学习jQuery",
12.start:newDate(y,m,6,14,0),
13.end:newDate(y,m,11)
14.},
15.{
16.id:2,
17.title:"每天写必优博客",
18.start:newDate(y,m,2)
19.},
20.{
21.id:2,
22.title:"每天写必优博客",
23.start:newDate(y,m,9)
24.},
25.{
26.id:3,
27.title:"开会",
28.start:newDate(y,m,20,9,0)
29.},
30.{
31.id:4,
32.title:"查看facebook",
33.start:newDate(y,m,27,16),
34.end:newDate(y,m,29),
35.url:"http://facebook.com/"
36.}
37.]
38.});
39.});
40.
//--></mce:script>

javascript部分主要是设置日程安排，各部分如下：

1.vard=newDate();
2.vary=d.getFullYear();
3.varm=d.getMonth();

获取时间，使用getFullYear()和getMonth()分别获取年和月

draggable表示日程安排是否可拖动
events表示具体的日程安排，格式如下：

1.[{
2.id:1,
3.title:"学习jQuery",
4.start:newDate(y,m,6,14,0),
5.end:newDate(y,m,11)
6.}]

注意是一个数组[]，里面包含JSON数据，分别是id，title，start和end，每个ID表示一个具体的事件安排。

一，同时可支持动态Ajax加载日程安排JSON数据，具体可查看实例源代码，如下：

1.<mce:scripttype='text/javascript'><!--
2.$(document).ready(function(){
3.$('#calendar').fullCalendar({
4.draggable:true,
5.events:"json_events.php",
6.eventDrop:function(event,delta){
7.alert(event.title+'wasmoved'+delta+'days/n'+
8.'(shouldprobablyupdateyourdatabase)');
9.},
10.loading:function(bool){
11.if(bool)$('#loading').show();
12.else$('#loading').hide();
13.}
14.});
15.});
16.
//--></mce:script>

events直接调用PHP文件获取JSON数据，同时实现eventDrop和加载loading事件

二，可实现Google日历扩展，具体可查看实例源代码，如下：

1.<mce:scripttype='text/javascript'><!--
2.$(document).ready(function(){
3.$('#calendar').fullCalendar({
4.events:$.fullCalendar.gcalFeed(
5.'http://www.google.com/calendar/feeds/',
6.{draggable:false,className:'mygcal'}
7.),
8.eventClick:function(event){
9.window.open(event.url,'gcalevent','width=700,height=600');
10.returnfalse;
11.},
12.loading:function(bool){
13.if(bool)$('#loading').show();
14.else$('#loading').hide();
15.}
16.});
17.});
18.
//--></mce: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/