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}}

這功能貌似多餘了，呵呵

最終的效果如下圖：

 

 

 

Tag標籤: JavaScript(責任編輯：admin)