fullcalendar 日程控件后台实时交互实现 (前端代码)

FullCalendar v1.6.4 采用这个版本，官网下载地址及API http://arshaw.com/fullcalendar/ 废话不多说,本人感觉前端效果很牛逼,所以用nodejs+mongodb保存数据。前端: 加载及监听事件 $(document).ready(function() {

  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();
  
  var calendar = $('#calendar').fullCalendar({
      header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay'
      },
      selectable: true,
      selectHelper: true,
      select: function(start, end, allDay) {
          var title = prompt('Event Title:');
          if (title) {
              var params = {title: title,
                  start: start,
                  end: end,
                  allDay: allDay
              };
              $.ajax({
                  url:"/insertCalendar",
                  type:"post",
                  data:params,
                    dataType: 'json',
                    success: function(res){
                        if(res.status == 0){
                            $("#success1").html("<strong>添加成功!</strong>");
                            $("#success1").show();
                            setTimeout(function(){$("#success1").hide();},3000);

                        }else{
                            $("#err1").html("<strong>添加失败!</strong>");
                            $("#err1").show();
                            setTimeout(function(){$("#err1").hide();},3000);
                        }
                        $('#calendar').fullCalendar('refetchEvents');
                    },
                    err:function(res){
                        $("#err1").html("<strong>操作有误!</strong>");
                        $("#err1").show();
                        setTimeout(function(){$("#err1").hide();},3000);
                    }
              });//insert
          }
          
      },
      editable: true,
      events: function(start,end,callback){
          var params = {};
          $.ajax({
                  url:"/findCalendar",
                  type:"post",
                  data:params,
                    dataType: 'json',
                    success: function(res){
                        var events =[];
                        if(res.status==0){                   
                            for(i in res.events){
                                if(res.events[i].allDay == false){
                                    events.push({ 
                                        id:res.events[i]._id,
                                        title:res.events[i].title,
                                        start:new Date(res.events[i].y_start,res.events[i].m_start,res.events[i].d_start,res.events[i].hh_start,res.events[i].mm_start),
                                        end:new Date(res.events[i].y_end,res.events[i].m_end,res.events[i].d_end,res.events[i].hh_end,res.events[i].mm_end),
                                        allDay:false
                                    });
                                }else{
                                    events.push({ 
                                        id:res.events[i]._id,
                                        title:res.events[i].title,
                                        start:new Date(res.events[i].y_start,res.events[i].m_start,res.events[i].d_start),
                                        end:new Date(res.events[i].y_end,res.events[i].m_end,res.events[i].d_end),
                                        allDay:true
                                    });
                                }
                            }
                            try{    
                                //$("#success1").html(events[0].start+"*_*"+events[0].end);
                                //$("#success1").show();
                                callback(events);
                            }catch(e){
                                hc("div.fc-event");
                                fc("span.fc-button");
                            } finally {
                      　　    hc("div.fc-event");
                              fc("span.fc-button");
                      　　}
                            
                        }

                      }
            });
        } ,
 
    eventMouseover: function(event, jsEvent, view){ //监听不止一个元素！.fc-event及初始加载两个子元素均可能
        
        var $h = $(jsEvent.target);
        
        $h.attr("_id",event.id);
        
    },
    //eventDragStart  eventDragStop eventDrop
    eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
        
        if(allDay){
            update_date(event,dayDelta);
        }else{
            
            updatetime_date(event,dayDelta,minuteDelta);
        }
    },
    
    eventResize : function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
        //alert(dayDelta);

        updatetime(event,dayDelta,minuteDelta);
    }
    });
    
});

对应的前端特效及处理ajax函数: $(function(){ /var d = new Date(); d.setHours(d.getHours() + 2); $(’#calendar’).fullCalendar( ‘addEventSource’, [{title:“add”,start:new Date(),end:d}] )/ });

var hc = function(t){ $(t).each(function(){ var $this = $(this); if(!$this.data(“hc”)){ $this.css(“z-index”,-1); var width = $this.width(),height = $this.height();

        var app = "<div class='xxcc alert alert-info' style='z-index:999;display:none;position:absolute;left:-1px;top:-37px;padding:5px;margin:0;width:"+80+"px;height:25px;'><div style='width:80px;position:relative;margin: 0 auto;'><div class='fl'><a class='btn btn-small btn-success' onclick='update(this,event);'><i class='icon-edit'></i></a></div><div class='fl' style='margin-left:15px;'><a class='btn btn-small btn-warning' onclick='removeCalendar(this,event);'><i class='icon-remove '></i></a></div></div></div>";
        //(width-10)
        $this.append(app);
        $this.data("hc","hc");
    }
    $this.hover(function(e){
        $this.css("z-index",1);
        $this.find(".xxcc").show();
        
    },function(e){
        $this.css("z-index",-1);
        $this.find(".xxcc").hide();
    });
})

};

前端监听实现方式很多，采用插件几个监听，由于不会怎么上传图片，不会图片功能，等到会了这个功能附上图片。