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

[javascript] view plain copy

1. 这个介绍jQuery日历FullCalendar插件是一个非常不错的日历工具，可用于制作日程表或计划安排等，可扩展Google日历功能，制作个性化的日程表，同时可绑定点击事件或拖动事件，使用非常方便，效果图如下：
2. jQuery插件FullCalendar日程表实现可扩展Google日历功能
3. jQuery插件FullCalendar在线实例
4. http://arshaw.com/fullcalendar/
6. 使用说明
7. 需要使用jQuery库文件和jQueryUI库文件和FullCalendar库文件
8. http://jquery.com/
9. http://plugins.jquery.com/project/fullcalendar
10. http://ui.jquery.com/
12. 同进需要使用fullcalendar.css文件
14. 使用实例
15. 一，包含文件部分
17. 1.<linkrel='stylesheet'type='text/css'href="fullcalendar/fullcalendar.css"mce_href="fullcalendar/fullcalendar.css"/>
18. 2.<mce:scripttype='text/javascript'src="jquery/jquery.js"mce_src="jquery/jquery.js"></mce:script>
19. 3.<mce:scripttype='text/javascript'src="jquery/ui.core.js"mce_src="jquery/ui.core.js"></mce:script>
20. 4.<mce:scripttype='text/javascript'src="fullcalendar/fullcalendar.js"mce_src="fullcalendar/fullcalendar.js"></mce:script>
22. 如果需要绑定拖动事件，可增加ui.draggable.js文件
24. 1.<mce:scripttype='text/javascript'src="jquery/ui.draggable.js"mce_src="jquery/ui.draggable.js"></mce:script>
26. 二，HTML部分
28. 1.<divid='calendar'></div>
30. 三，Javascript部分
32. 1.<mce:scripttype='text/javascript'><!--
33. 2.$(document).ready(function(){
34. 3.vard=newDate();
35. 4.vary=d.getFullYear();
36. 5.varm=d.getMonth();
37. 6.$('#calendar').fullCalendar({
38. 7.draggable:true,
39. 8.events:[
40. 9.{
41. 10.id:1,
42. 11.title:"学习jQuery",
43. 12.start:newDate(y,m,6,14,0),
44. 13.end:newDate(y,m,11)
45. 14.},
46. 15.{
47. 16.id:2,
48. 17.title:"每天写必优博客",
49. 18.start:newDate(y,m,2)
50. 19.},
51. 20.{
52. 21.id:2,
53. 22.title:"每天写必优博客",
54. 23.start:newDate(y,m,9)
55. 24.},
56. 25.{
57. 26.id:3,
58. 27.title:"开会",
59. 28.start:newDate(y,m,20,9,0)
60. 29.},
61. 30.{
62. 31.id:4,
63. 32.title:"查看facebook",
64. 33.start:newDate(y,m,27,16),
65. 34.end:newDate(y,m,29),
66. 35.url:"http://facebook.com/"
67. 36.}
68. 37.]
69. 38.});
70. 39.});
71. 40.
72. //--></mce:script>
74. javascript部分主要是设置日程安排，各部分如下：
76. 1.vard=newDate();
77. 2.vary=d.getFullYear();
78. 3.varm=d.getMonth();
80. 获取时间，使用getFullYear()和getMonth()分别获取年和月
82. draggable表示日程安排是否可拖动
83. events表示具体的日程安排，格式如下：
85. 1.[{
86. 2.id:1,
87. 3.title:"学习jQuery",
88. 4.start:newDate(y,m,6,14,0),
89. 5.end:newDate(y,m,11)
90. 6.}]
92. 注意是一个数组[]，里面包含JSON数据，分别是id，title，start和end，每个ID表示一个具体的事件安排。
94. 一，同时可支持动态Ajax加载日程安排JSON数据，具体可查看实例源代码，如下：
96. 1.<mce:scripttype='text/javascript'><!--
97. 2.$(document).ready(function(){
98. 3.$('#calendar').fullCalendar({
99. 4.draggable:true,
100. 5.events:"json_events.php",
101. 6.eventDrop:function(event,delta){
102. 7.alert(event.title+'wasmoved'+delta+'days/n'+
103. 8.'(shouldprobablyupdateyourdatabase)');
104. 9.},
105. 10.loading:function(bool){
106. 11.if(bool)$('#loading').show();
107. 12.else$('#loading').hide();
108. 13.}
109. 14.});
110. 15.});
111. 16.
112. //--></mce:script>
114. events直接调用PHP文件获取JSON数据，同时实现eventDrop和加载loading事件
116. 二，可实现Google日历扩展，具体可查看实例源代码，如下：
118. 1.<mce:scripttype='text/javascript'><!--
119. 2.$(document).ready(function(){
120. 3.$('#calendar').fullCalendar({
121. 4.events:$.fullCalendar.gcalFeed(
122. 5.'http://www.google.com/calendar/feeds/',
123. 6.{draggable:false,className:'mygcal'}
124. 7.),
125. 8.eventClick:function(event){
126. 9.window.open(event.url,'gcalevent','width=700,height=600');
127. 10.returnfalse;
128. 11.},
129. 12.loading:function(bool){
130. 13.if(bool)$('#loading').show();
131. 14.else$('#loading').hide();
132. 15.}
133. 16.});
134. 17.});
135. 18.
136. //--></mce:script>
138. events调用$.fullCalendar.gcalFeed()方法获取google日历数据，同时实现eventClick和加载loading事件
140. 使用jQuery插件FullCalendar日程表非常简单，只需要指定日程的具体事件，就可实现一个日程安排计划，同时可扩展Google日历功能，非常值得推荐。
142. FullCalendar插件官方网址
143. http://arshaw.com/fullcalendar/
145. FullCalendar插件在线文档说明
146. http://arshaw.com/fullcalendar/docs/
148. FullCalendar插件在线下载
149. http://arshaw.com/fullcalendar/download/