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

你可能感兴趣的:(fullCalendar)