FullCalendar的二次開發、擴充

FullCalendar：

官方網址
http://arshaw.com/fullcalendar/

FullCalendar是一個jQuery日曆外掛程式，它使用Ajax來擷取每一個月的日曆事件並能夠配置成使用自己的日曆事件來源比如從Google Calendar擷取事件。支援拖放日曆中的事件，自訂點擊和拖放事件。預設的如下：

 

官方的版本，其實還有很多需要擴充的，比如添加事件、滑鼠效果、事件樣式等。項目需要，對它作了一次擴充，應該是很常用的功能吧，因此把它寫下來，為有需要的人準備。

 1. 滑鼠事件。移上去後當日背景色改變。這個功能我查了官方的文檔，發現它們只是對事件有響應，並沒有對當前日期的響應，對事件響應的名稱是：eventMouseover和enentMouseout 可以做到當滑鼠放到事件上時，可以改變事件的背景、文本等效果。添加這個效果很容易，直接使用jQuery的hover方法就可以了：

$(".fc-state-default").hover(
    function(){
        $(this).addClass("calendar_hover");
    },
    function(){
        $(this).removeClass("calendar_hover");
    }
);

添加一個樣式：.calendar_hover{background:red;}

 2. 滑鼠移上去出現添加事件的符號。這裡需要改動它的核心JS了（沒辦法啦，要不使用jQuery插進去，不過既然改了，就不要在乎這些啦，唉...）

開啟fullcalendar.js

找到第1094行，即是renderGrid方法裡的一個產生td標籤的迴圈，在產生日期數的前面添加一段：

<span date='"+d.format("yyyy-MM-dd")+"' class='add_opt'></span>

這裡的d.format(....)方法是對JS中date類的擴充方法：

/** 
 * 時間對象的格式化; 
 */  
Date.prototype.format = function(format) { 
     /* 
      * eg:format="YYYY-MM-dd hh:mm:ss"; 
      */  
     var o = {  
         "M+" :this.getMonth() + 1, // month  
         "d+" :this.getDate(), // day  
         "h+" :this.getHours(), // hour  
         "m+" :this.getMinutes(), // minute  
         "s+" :this.getSeconds(), // second  
         "q+" :Math.floor((this.getMonth() + 3) / 3), // quarter  
         "S" :this.getMilliseconds()  
     // millisecond  
     }  
   
     if (/(y+)/.test(format)) {  
         format = format.replace(RegExp.$1, (this.getFullYear() + "")  
                 .substr(4 - RegExp.$1.length));  
     }  
   
     for ( var k in o) {  
         if (new RegExp("(" + k + ")").test(format)) {  
             format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]  
                     : ("00" + o[k]).substr(("" + o[k]).length));  
         }  
     } 
     return format;  
 }  

因為點擊添加按鈕以後，需要擷取當天的日期，所以我將日期寫到div的屬性裡面，方便擷取。

當然，如果點擊上一月下一月的按鈕的時候，這個數會改變，所以再找到1160行的：td.find('div.fc-day-number').text(d.getDate());

在後面添加一個改變日期的指令碼： td.find("span.add_opt").attr("date",d.format("yyyy-MM-dd"));

這樣，即使改變了日期，也可以跟著改變了。接下來的處理就容易了。

按鈕的樣式，隨便自己寫了，我是把它設定為隱藏，圖片作背景。當滑鼠放到日期上時顯示，滑鼠放上去後改變背景圖片。點擊顯示事件添加框。 

$(".fc-state-default").hover(
    function(){
        $(this).find(".add_opt").css('display','inline-block');//顯示
        $(this).addClass("calendar_hover");
    },
    function(){
        $(this).find(".add_opt").hide();//限期添加按鈕
        $(this).removeClass("calendar_hover");
    }
);
//添加按鈕點擊事件
$(".fc-state-default .add_opt").click(function(){
    var date = $(this).attr("date");
    var top = $(this).offset().top;
    var left = $(this).offset().left;
    $("#new_action").css({top:top,left:left});//設定添加框的位置
    $("#new_action").slideDown();
    $("#new_action input[name='date']").val(date);//添加框內form的date值設定
});

其它代碼自己寫了，這樣事件添加就完成了

3. 改變事件樣式。不知道為什麼，在文檔裡面都沒有說明可以配置事件的樣式：className

[{
    'id':1,
    'title':'Test',
    'start':'2010-06-06',
    'end':'2010-06-07',
    'url':'http://www.youyu.us',
    'className':'myStyle'//這裡可以設定此action的樣式
}]

4. 配置中設定樣式，這個功能是我找到className時使用的，後來一直沒有刪掉。

找到_renderDaySegs方法，在此方法完成前添加以下代碼：

    if(options.type!=null){
        for (var key in options.type){
            $("."+key+" a").css(options.type[key]);
        }
    }

這樣就可以在設定檔中設定action對應的樣式了，配置中添加：

 type:{'myStyle':{'background':'red','font-size':14}}

這功能貌似多餘了，呵呵

最終的效果如：