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

[javascript] view plain copy

1. 这个介绍jQuery日历FullCalendar插件是一个非常不错的日历工具，可用于制作日程表或计划安排等，可扩展Google日历功能，制作个性化的日程表，同时可绑定点击事件或拖动事件，使用非常方便，效果图如下：  
2. jQuery插件FullCalendar日程表实现可扩展Google日历功能  
3. jQuery插件FullCalendar在线实例  
4. http://arshaw.com/fullcalendar/  
5.   
6. 使用说明  
7. 需要使用jQuery库文件和jQuery UI库文件和FullCalendar库文件  
8. http://jquery.com/  
9. http://plugins.jquery.com/project/fullcalendar  
10. http://ui.jquery.com/  
11.   
12. 同进需要使用fullcalendar.css文件  
13.   
14. 使用实例  
15. 一，包含文件部分  
16.   
17.    1. <link rel='stylesheet' type='text/css' href="fullcalendar/fullcalendar.css" mce_href="fullcalendar/fullcalendar.css" />  
18.    2. <mce:script type='text/javascript' src="jquery/jquery.js" mce_src="jquery/jquery.js"></mce:script>  
19.    3. <mce:script type='text/javascript' src="jquery/ui.core.js" mce_src="jquery/ui.core.js"></mce:script>  
20.    4. <mce:script type='text/javascript' src="fullcalendar/fullcalendar.js" mce_src="fullcalendar/fullcalendar.js"></mce:script>  
21.   
22. 如果需要绑定拖动事件，可增加ui.draggable.js文件  
23.   
24.    1. <mce:script type='text/javascript' src="jquery/ui.draggable.js" mce_src="jquery/ui.draggable.js"></mce:script>  
25.   
26. 二，HTML部分  
27.   
28.    1. <div id='calendar'></div>  
29.   
30. 三，Javascript部分  
31.   
32.    1. <mce:script type='text/javascript'><!--  
33.    2. $(document).ready(function() {  
34.    3. var d = new Date();  
35.    4. var y = d.getFullYear();  
36.    5. var m = 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: new Date(y, m, 6, 14, 0),  
44.   13. end: new Date(y, m, 11)  
45.   14. },  
46.   15. {  
47.   16. id: 2,  
48.   17. title: "每天写必优博客",  
49.   18. start: new Date(y, m, 2)  
50.   19. },  
51.   20. {  
52.   21. id: 2,  
53.   22. title: "每天写必优博客",  
54.   23. start: new Date(y, m, 9)  
55.   24. },  
56.   25. {  
57.   26. id: 3,  
58.   27. title: "开会",  
59.   28. start: new Date(y, m, 20, 9, 0)  
60.   29. },  
61.   30. {  
62.   31. id: 4,  
63.   32. title: "查看facebook",  
64.   33. start: new Date(y, m, 27, 16),  
65.   34. end: new Date(y, m, 29),  
66.   35. url: "http://facebook.com/"  
67.   36. }  
68.   37. ]  
69.   38. });  
70.   39. });  
71.   40.   
72. // --></mce:script>  
73.   
74. javascript部分主要是设置日程安排，各部分如下：  
75.   
76.    1. var d = new Date();  
77.    2. var y = d.getFullYear();  
78.    3. var m = d.getMonth();  
79.   
80. 获取时间，使用getFullYear()和getMonth()分别获取年和月  
81.   
82. draggable表示日程安排是否可拖动  
83. events表示具体的日程安排，格式如下：  
84.   
85.    1. [{  
86.    2. id: 1,  
87.    3. title: "学习jQuery",  
88.    4. start: new Date(y, m, 6, 14, 0),  
89.    5. end: new Date(y, m, 11)  
90.    6. }]  
91.   
92. 注意是一个数组[]，里面包含JSON数据，分别是id，title，start和end，每个ID表示一个具体的事件安排。  
93.   
94. 一，同时可支持动态Ajax加载日程安排JSON数据，具体可查看实例源代码，如下：  
95.   
96.    1. <mce:script type='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 + ' was moved ' + delta + ' days/n' +  
103.    8. '(should probably update your database)');  
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>  
113.   
114. events直接调用PHP文件获取JSON数据，同时实现eventDrop和加载loading事件  
115.   
116. 二，可实现Google日历扩展，具体可查看实例源代码，如下：  
117.   
118.    1. <mce:script type='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. return false;  
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>  
137.   
138. events调用$.fullCalendar.gcalFeed()方法获取google日历数据，同时实现 eventClick和加载loading事件  
139.   
140. 使用jQuery插件FullCalendar日程表非常简单，只需要指定日程的具体事件，就可实现一个日程安排计划，同时可扩展Google日历功能，非常值得推荐。  
141.   
142. FullCalendar 插件官方网址  
143. http://arshaw.com/fullcalendar/  
144.   
145. FullCalendar 插件在线文档说明  
146. http://arshaw.com/fullcalendar/docs/  
147.   
148. FullCalendar 插件在线下载  
149. http://arshaw.com/fullcalendar/download/