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

jQuery插件FullCalendar日程表实现可扩展Google日历功能
[javascript] view plaincopy

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