FullCalendar（日程管理控件）

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

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

http://arshaw.com/fullcalendar/docs/

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>