FullCalendar（日程管理控件）

(以下是我学习FullCalendar控件时，网络上收集的一些资料)

第一部分（官方资料）

jquery.fullCalendar官方网址: http://arshaw.com/fullcalendar/

jquery.fullCalendar英文文档: http://arshaw.com/fullcalendar/docs/

jquery.fullCalendar下载:http://arshaw.com/fullcalendar/download/

第二部分（官方文档的翻译）

http://blog.csdn.net/lgg201/article/details/4818941

第三部分（视频教程）

http://www.verycd.com/topics/2782321/（一共两集）

第四部分（实战）

（自己做了一个日程管理）

主要的代码如下：

 <script type='text/javascript'>
     $(document).ready(function() {
         artDialog.notice = function (options) {
             var opt = options || {},
                 api, aConfig, hide, wrap, top,
                 duration = 800;

             var config = {
                 id: 'Notice',
                 left: '100%',
                 top: '100%',
                 fixed: true,
                 drag: false,
                 resize: false,
                 follow: null,
                 lock: false,
                 init: function(here){
                     api = this;
                     aConfig = api.config;
                     wrap = api.DOM.wrap;
                     top = parseInt(wrap[0].style.top);
                     hide = top + wrap[0].offsetHeight;

                     wrap.css('top', hide + 'px')
                         .animate({top: top + 'px'}, duration, function () {
                             opt.init && opt.init.call(api, here);
                         });
                 },
                 close: function(here){
                     wrap.animate({top: hide + 'px'}, duration, function () {
                         opt.close && opt.close.call(this, here);
                         aConfig.close = $.noop;
                         api.close();
                     });

                     return false;
                 }
             };

             for (var i in opt) {
                 if (config[i] === undefined) config[i] = opt[i];
             };

             return artDialog(config);
         };
         var date = new Date();
         var d = date.getDate();
         var m = date.getMonth();
         var y = date.getFullYear();
         $('#calendar').fullCalendar({
             theme: true,
             header: {
                 left: 'prev,next today',
                 center: 'title',
                 right: 'month,agendaWeek,agendaDay'
             },
             //fullcalendar本地化
             //timeFormat:{agenda: 'h:mm TT{ - h:mm TT}'}, //默认是{agenda: ‘h:mm{ - h:mm}}, 影响的是添加的具体的日程上显示的时间格式.
             monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
             monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
             dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
             dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
             today: ["今天"],
             firstDay: 1,
             buttonText: {
                 today: '今天',
                 month: '月',
                 week: '周',
                 day: '日',
                 prev: '上一月',
                 next: '下一月'
             },
             allDaySlot:false,
             selectable: true,
             selectHelper: true,
             aspectRatio:2.7,
             editable: false,
             allDayDefault:false,
             viewDisplay: function(view) {
             var viewStart = $.fullCalendar.formatDate(view.start,"yyyy-MM-dd HH:mm:ss");
             var viewEnd = $.fullCalendar.formatDate(view.end,"yyyy-MM-dd HH:mm:ss");
             $("#calendar").fullCalendar('removeEvents');
             $.getJSON('http://localhost:8080/pnote/schedule/listevents.action',{start:viewStart,end:viewEnd},function(data) {
                for(var i=0;i<data.length;i++) {
                    var obj = new Object();
                    obj.id = data[i].id;
                    obj.title = data[i].title;
                    obj.description = data[i].description;
                    obj.color = data[i].color;
                    obj.remindertime = $.fullCalendar.parseDate(data[i].remindertime);
                    obj.messagenotice = data[i].messagenotice;
                    obj.description = data[i].description;
                    obj.start = $.fullCalendar.parseDate(data[i].start);
                    obj.end = $.fullCalendar.parseDate(data[i].end);
                    $("#calendar").fullCalendar('renderEvent',obj,true);
                }
              }); //把从后台取出的数据进行封装以后在页面上以fullCalendar的方式进行显示
            },
            eventMouseover: function(event, jsEvent, view){
                 showDetail(event, jsEvent);
            },
             eventMouseout: function(event, jsEvent, view){
                 $('#tip').remove();
             },
             //日程点击：添加日程
             dayClick: function(date, allDay, jsEvent, view) {
                  var obj =new Object();
                  art.dialog.open('newschedule.html',{
                     title: '添加日程',
                     lock: true,
                     width:300,
                     height:400,
                     fixed: true, //固定定位
                     //background: '#600', // 背景色
                     opacity: 0.6,   // 透明度
                     // 在open()方法中，init会等待iframe加载完毕后执行
                     init: function () {
                         var iframe = this.iframe.contentWindow;
                         //var top = art.dialog.top;// 引用顶层页面window对象
                         var start = iframe.document.getElementById('form-start');
                         start.value = $.fullCalendar.formatDate(date,"yyyy-MM-dd HH:mm:ss");
                      },
                      okVal:'提交日程',
                      ok: function () {
                         var iframe = this.iframe.contentWindow;
                         if (!iframe.document.body) {
                             alert('iframe还没加载完毕呢');
                             return false;
                         };

                         var start = iframe.document.getElementById('form-start').value;
                         var end = iframe.document.getElementById('form-end').value;
                         var remindertime = iframe.document.getElementById('form-remindertime').value;
                         obj.title = iframe.document.getElementById('form-title').value;
                         obj.description = iframe.document.getElementById('form-description').value;
                         obj.start = $.fullCalendar.parseDate(start);
                         obj.end = $.fullCalendar.parseDate(end);
                         obj.color = iframe.document.getElementById('form-color').value;
                         if (obj.title== '') {
                             alert("标题不能为空");
                             return false;
                          }else if(start== '') {
                             alert("开始日期不能为空");
                             return false;
                          }else if(end == '') {
                             alert("结束日期不能为空");
                             return false;
                          }else if(iframe.document.getElementById('form-messagenotice').checked) {
                                 if(remindertime == '') {
                                     alert("短信提醒时间不能为空");
                                     return false;
                                 }
                                 obj.messagenotice = 1;
                                 obj.remindertime = $.fullCalendar.parseDate(remindertime);
                             }else {
                                 obj.messagenotice = 0;
                                 obj.remindertime = null;
                             }

                          $.post("http://localhost:8080/pnote/schedule/addevents",{//把刚输入的日程计划信息传到后台，保存到数据库
                             title: obj.title,
                             start:start,
                             end:end,
                             description:obj.description,
                             remindertime:remindertime,
                             color:obj.color,
                             messagenotice:obj.messagenotice
                             },
                             function (data, textStatus){
                                 obj.id = data[0].id;
                             }, "json"
                           );
                           $('#calendar').fullCalendar('renderEvent', obj);  //核心的更新代码
                           $('#calendar').fullCalendar('unselect');
                           art.dialog.notice({
                                 title: '笔记之家',
                                 width: 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩
                                 content: '日程已添加至后台！',
                                 icon: 'face-smile',
                                 time: 3
                             });
                           return true;
                        },
                         cancel: true
                     });
             },
             eventClick:function(calEvent, jsEvent, view){
                 art.dialog.open('newschedule.html', {
                     title: '更新日程',
                     lock: true,
                     width:300,
                     height:400,
                     //background: '#600', // 背景色
                     opacity: 0.6,   // 透明度
                     // 在open()方法中，init会等待iframe加载完毕后执行
                     init: function () {
                         var iframe = this.iframe.contentWindow;
                         //var top = art.dialog.top;// 引用顶层页面window对象
                         iframe.document.getElementById('form-start').value = $.fullCalendar.formatDate(calEvent.start,"yyyy-MM-dd HH:mm:ss");
                         iframe.document.getElementById('form-end').value = $.fullCalendar.formatDate(calEvent.end,"yyyy-MM-dd HH:mm:ss");
                         iframe.document.getElementById('form-description').value = calEvent.description;
                         iframe.document.getElementById('form-title').value = calEvent.title;
                         if(calEvent.messagenotice == 1) {
                             iframe.document.getElementById('form-messagenotice').checked = true;
                             iframe.document.getElementById('form-remindertime').value =  $.fullCalendar.formatDate(calEvent.remindertime,"yyyy-MM-dd HH:mm:ss");
                             iframe.document.getElementById('showtxt').style.display='block';
                         }else {
                         }
                         iframe.document.getElementById('form-color').value = calEvent.color;
                     },
                     okVal:'修改日程',
                     ok: function () {
                         var iframe = this.iframe.contentWindow;
                         if (!iframe.document.body) {
                             alert('iframe还没加载完毕呢')
                             return false;
                         };

                         var start = iframe.document.getElementById('form-start').value;
                         var end = iframe.document.getElementById('form-end').value;
                         var remindertime = iframe.document.getElementById('form-remindertime').value;
                         calEvent.title = iframe.document.getElementById('form-title').value;
                         calEvent.description = iframe.document.getElementById('form-description').value;
                         calEvent.start = $.fullCalendar.parseDate(start);
                         calEvent.end = $.fullCalendar.parseDate(end);
                         calEvent.color = iframe.document.getElementById('form-color').value;
                         if (calEvent.title== '') {
                             alert("标题不能为空");
                             return false;
                          }else if(start== '') {
                             alert("开始日期不能为空");
                             return false;
                          }else if(end == '') {
                             alert("结束日期不能为空");
                             return false;
                          }else if(iframe.document.getElementById('form-messagenotice').checked) {
                                 if(remindertime == '') {
                                     alert("短信提醒时间不能为空");
                                     return false;
                                 }
                                 calEvent.messagenotice = 1;
                                 calEvent.remindertime = $.fullCalendar.parseDate(remindertime);
                             }else {
                                 calEvent.messagenotice = 0;
                                 calEvent.remindertime = null;
                             }
                         $.post("http://localhost:8080/pnote/schedule/updateevents",{//把要更新的日程计划信息传到后台，保存到数据库
                                 id:calEvent.id,
                                 title: calEvent.title,
                                 start:start,
                                 end:end,
                                 description:calEvent.description,
                                 color:calEvent.color,
                                 remindertime:remindertime,
                                 messagenotice:calEvent.messagenotice
                             }
                         );
                         $('#calendar').fullCalendar('updateEvent', calEvent);
                         //弹出提示
                         art.dialog.notice({
                             title: '笔记之家',
                             width: 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩
                             content: '日程已更新！',
                             icon: 'face-smile',
                             time: 3
                         });
                         return true;
                     },
                     cancel: true,
                   //删除日程，保存到数据库
                     button: [{
                         name: '删除日程',
                         callback: function () {
                             //this.content('你同意了').time(2);
                              $.post("http://localhost:8080/pnote/schedule/deleteevents",{
                                 id:calEvent.id
                              });
                             $('#calendar').fullCalendar('removeEvents',calEvent.id);
                             art.dialog.notice({
                                 title: '笔记之家',
                                 width: 150,// 必须指定一个像素宽度值或者百分比，否则浏览器窗口改变可能导致artDialog收缩
                                 content: '日程已删除！',
                                 icon: 'face-smile',
                                 time: 3
                             });
                             return true;
                          }
                          }]
                    });
                 }
             });
         });

     function showDetail(obj, e){
         var str;
         if(obj.messagenotice == 1)  str = "短信提醒时间："+$.fullCalendar.formatDate(obj.remindertime,"yyyy-MM-dd HH:mm:ss");
         else {str = "短信提醒未启动";}
         var eInfo = '<div id="tip"><ul>';
         eInfo += '<li class="clock">' + '开始：'+$.fullCalendar.formatDate(obj.start,"yyyy-MM-dd HH:mm:ss") +'</br>结束：'+$.fullCalendar.formatDate(obj.end,"yyyy-MM-dd HH:mm:ss")+ '</li>';
         eInfo += '<li class="message">' +'日志：'+ obj.description + '<br/> </li>';
         //eInfo += '<li>分类：' + obj.title + '</li>';
         eInfo += '<li class="postmessage">' + str + '<br/> </li>';
         eInfo += '</ul></div>';
         $(eInfo).appendTo($('body'));
         $('#tip').css({"opacity":"0.4", "display":"none", "left":(e.pageX + 20) + "px", "top":(e.pageY + 10) + "px"}).fadeTo(600, 0.9);
         //鼠标移动效果
         $('.fc-event-inner').mousemove(function(e){
             $('#tip').css({'top': (e.pageY + 10), 'left': (e.pageX + 20)});
         });
     }

 </script>
 <style type='text/css'>

     body {
         margin-top: 10px;
         text-align: center;
         font-size: 13px;
         font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
         }

     /********************************************** 鼠标悬停tip提示  ************************************************/
     #tip{
         position: absolute;
         width: 250px;
         max-width: 400px;
         text-align: left;
         padding: 4px;
         border: #87CEEB solid 7px;
         border-radius: 5px;
         background: #00BFFF;
         z-index: 1000;
         behavior: url('/css/css3/pie.htc');
     }
     #tip ul{
         margin: 0;
         padding: 0;
     }
     #tip ul li{
         font-family:'Microsoft YaHei', 微软雅黑, 'Microsoft JhengHei', 宋体;
         font-size:15px;
         list-style: none;
         padding-left: 40px;
     }
     .clock{
         /*line-height: 60px;*/
         background: url('./fullcalendar/images/clock.png') no-repeat;
         background-size:40px 40px;
     }
     .postmessage{
         /*line-height: 60px;
         font-size: 12px;*/
         background: url('./fullcalendar/images/message.png') no-repeat;
         background-size:40px 40px;
     }
     .message{
         /*margin-top: 5px;*/
         /*line-height: 60px;*/
         background: url('./fullcalendar/images/text.png') no-repeat;
         background-size:40px 40px;
     }
 </style>
 </head>
 <body>
     <div id="container">
         <div id='selectdate'></div>
         <div id='calendar'></div>
     </div>
 </body>
 </html>