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/

评论

1 楼 mrzhanghuzi 2013-09-05  

下载不了呀