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

这个介绍jQuery日历FullCalendar插件是一个非常不错的日历工具，可用于制作日程表或计划安排等，可扩展Google日历功能，制作个性化的日程表，同时可绑定点击事件或拖动事件，使用非常方便，效果图如下： 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文件 使用实例 一，包含文件部分 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> 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> 如果需要绑定拖动事件，可增加ui.draggable.js文件 1. <mce:script type='text/javascript' src="jquery/ui.draggable.js" mce_src="jquery/ui.draggable.js"></mce:script> 二，HTML部分 1. <div id='calendar'></div> 三，Javascript部分 1. <mce:script type='text/javascript'><!-- 2. $(document).ready(function() { 3. var d = new Date(); 4. var y = d.getFullYear(); 5. var m = d.getMonth(); 6. $('#calendar').fullCalendar({ 7. draggable: true, 8. events: [ 9. { 10. id: 1, 11. title: "学习jQuery", 12. start: new Date(y, m, 6, 14, 0), 13. end: new Date(y, m, 11) 14. }, 15. { 16. id: 2, 17. title: "每天写必优博客", 18. start: new Date(y, m, 2) 19. }, 20. { 21. id: 2, 22. title: "每天写必优博客", 23. start: new Date(y, m, 9) 24. }, 25. { 26. id: 3, 27. title: "开会", 28. start: new Date(y, m, 20, 9, 0) 29. }, 30. { 31. id: 4, 32. title: "查看facebook", 33. start: new Date(y, m, 27, 16), 34. end: new Date(y, m, 29), 35. url: "http://facebook.com/" 36. } 37. ] 38. }); 39. }); 40. // --></mce:script> javascript部分主要是设置日程安排，各部分如下： 1. var d = new Date(); 2. var y = d.getFullYear(); 3. var m = d.getMonth(); 获取时间，使用getFullYear()和getMonth()分别获取年和月 draggable表示日程安排是否可拖动 events表示具体的日程安排，格式如下： 1. [{ 2. id: 1, 3. title: "学习jQuery", 4. start: new Date(y, m, 6, 14, 0), 5. end: new Date(y, m, 11) 6. }] 注意是一个数组[]，里面包含JSON数据，分别是id，title，start和end，每个ID表示一个具体的事件安排。 一，同时可支持动态Ajax加载日程安排JSON数据，具体可查看实例源代码，如下： 1. <mce:script type='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 + ' was moved ' + delta + ' days/n' + 8. '(should probably update your database)'); 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:script type='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. return false; 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/