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/ 

下面是一个使用oracle链接数据库的fullcalendar的例子

你可能感兴趣的:(fullCalendar)