一、漢化

需要漢化的地方不多，就一些英文的月份，周幾而已，簡單修改一下

// locale
isRTL: false,
firstDay: 0,
monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
monthNamesShort: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort:
 
 ['週日','週一','週二','週三','週四','週五','週六'],
buttonText: {
    prev: "<span class='fc-text-arrow'>&lsaquo;</span>",
    next: "<span class='fc-text-arrow'>&rsaquo;</span>",
    prevYear: "<span class='fc-text-arrow'>&laquo;</span>",
    nextYear: "<span class='fc-text-arrow'>&raquo;</span>"
 
,
    today: '返回今天',
    month: '月',
    week: '周',
    day: '日'
},

按鈕顯示的內容，除了可以直接改原始檔之外，也可以在頁面的初始化js中配置“buttonText”的值，比如：

buttonText: {
    prev: "<span class='fc-text-arrow'>&lsaquo;上個月</span>",
    next: "<span class='fc-text-arrow'>下個月&rsaquo;</span>",
    prevYear: "<span class='fc-text-arrow'>&laquo;上一年</span>",
    nextYear: "<span class='fc-text-arrow'>下一年&raquo;</span>"
},

簡單漢化後就成了這樣：

二、新增農曆，節氣，節假日的資訊顯示

作為一款萬年曆，沒有這些中國特色的東西，出門都不好意思說自己是日曆。

要顯示這些農曆，節假日資訊，有兩種方法:

一是直接呼叫google calendar的訂閱地址，把這些資訊通過配置fullCalendar自帶的events的方式，像顯示日程安排一樣顯示出來，fullCalendar是原生支援google calendar呼叫的（不過貌似只能調一個檔案）；

比如官方示例裡的顯示美國節假日的例子：

// US Holidays
events: 'http://www.google.com/calendar/feeds/usa__en%40holiday.calendar.google.com/public/basic'

換一下源地址中的ID部分，就可以顯示其他日程，比如：

中國節假日(Calendar ID: [email protected]); 
農曆(Calendar ID: [email protected]); 

二是直接修改原始檔，這個相對第一種直接調相對麻煩些，不過好處就是可以完全自定義，想怎樣就怎樣……毫無疑問，作為一個患有輕微程式碼強迫症的程式猿，果斷選擇自己修改原始檔，至於events方式，就留著以後用來顯示假期安排吧。

既然要自定義，那就需要一個節氣節假日以及農曆資訊的庫，比較了一下各大導航站（因為導航站一般都有萬年曆……），在hao123扒到一個看起來不錯的js庫（點我檢視lunar.js）,包含了農曆，節氣和節假日。嗯……hao123的日曆風格貌似也挺不錯，OK，就它了！

為了方便，直接把lunar.js的內容拷到fullCalendar的js檔案fullCalendar.js裡；然後就可以修改顯示日期的單元格的內容和樣式啦。直接貼修改的程式碼：

if (showNumbers) {
html += "<div class='fc-day-number'>" + date.getDate() + "</div>";    
// modified by feifei.im 增加節氣顯示
var cTerm = lunar(date).term;
if(cTerm){
    html += "<div class='fc-day-cnTerm'>"+cTerm+"</div>";
}    
// modified by feifei.im 增加節日顯示
var fes = lunar(date).festival();
if(fes && fes.length>0){
    html += "<div class='fc-day-cnTerm'>"+$.trim(fes[0].desc)+"</div>";
}    
// modified by feifei.im 無節日節氣時，增加農曆顯示
if(!cTerm && (!fes || fes.length==0)){
    html += "<div class='fc-day-cnDate'>"+lunar(date).lMonth + "月" + lunar(date).lDate +"</div>";
}
}

這邊為了保持整齊，如果當前日期有節氣或者節假日的話，就不顯示農曆了

OK,現在節氣節假日已經可以顯示了

三、新增年月下拉框，方便選擇日期

現在的日曆大體功能已經實現了，但是有一點比較影響使用者體驗：現在要是想看幾年前或者幾個月前的日期，必須一次次的點“上一年”，“上個月”的按鈕，直到點到需要的日期。一兩年也就罷了，十幾二十年的話就糾結了……

所以，新增一個下拉框用來顯示並選擇當前年月資訊還是很有必要滴……

方便起見，直接把fullCalendar的“title”部分修改成下拉框（也就是下圖顯示的這個部分）：

直接貼程式碼：

1.修改title的內容，原生的是直接顯示文字，改成下拉框的形式

$.each(this.split(','), function(j, buttonName) {
if (buttonName == 'title') {
//e.append("<span class='fc-header-title'><h2>&nbsp;</h2></span>");
// modified feifei.im 下拉框選擇年月
var selectHtml = '';
var i = 0;
selectHtml +="<span id='fc-dateSelect' class='fc-header-title'>";
selectHtml +="<select name='fcs_date_year' id='fcs_date_year' class='selectable m_year mr15'>";
// 迴圈年份
for(i=1901;i<=2100;i++){        
selectHtml +="<option value='"+i+"'>"+$.trim(i+"年")+"</option>";                        
}
selectHtml +="</select>";
selectHtml +="<select name='fcs_date_month' id='fcs_date_month' class='selectable m_year'>";
// 迴圈月份
var monthDigitCN = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二'];
for(i=0;i<=11;i++){
selectHtml +="<option value='"+i+"'>" +$.trim(monthDigitCN[i]+"月") + "</option>";
}
selectHtml +="</select>";
selectHtml +="</span>";
e.append(selectHtml);
if (prevButton) {
    prevButton.addClass(tm + '-corner-right');
}
prevButton = null;
}

2.修改原title更新方法，之前是修改title的文字，改成修改下拉框的選中值

function updateTitle(html) {
        //element.find('h2').html(html);
        // modified feifei.im 更新title時修改為下拉框
    var shtm = html.split(" ");
    if(shtm && shtm.length>1){
        $("#fcs_date_month").find("option").filter(function(){return ($(this).text() == $.trim(shtm[0]));}).prop('selected', true);
    $('#fcs_date_year option[value="'+$.trim(shtm[1])+'"]').prop('selected', true);
    }    
}

這邊有個坑,網上流傳的根據select的text值修改select的選中狀態的程式碼根本沒用啊！！
就是這貨$('#fcs_date_month option[text="'+$.trim(shtm[1])+'"]').attr('selected', true);
後來改成上面的“$("#fcs_date_month").find("option").filter……”這種實現方式才可以

3.此時下拉框已經能隨著當前月份年份的變化自動改變選中的值，但是使用者自己選擇年份月份的時候還是沒有任何反應的……所以得給下拉框繫結相應的響應事件

由於下拉框是動態生成的，所以用delegate來繫結，並呼叫fullCalendar外掛自帶的跳轉到某個日期的方法“gotoDate”。

程式碼如下

/** 繫結事件到日期下拉框 **/
$(function(){
    $("#fc-dateSelect").delegate("select","change",function(){
        var fcsYear = $("#fcs_date_year").val();
        var fcsMonth = $("#fcs_date_month").val();
        $("#calendar").fullCalendar('gotoDate', fcsYear, fcsMonth);
    });
});

4.OK，下拉框顯示並選擇日期功能改造成功

四、新增日期詳細資訊顯示

經過簡單改造，fullCalendar已經可以滿足要求了，不過為了更好的使用者體驗嘛，可以加上一個顯示當天日期的詳細資訊（天干地支，生肖節氣什麼的）的功能（好吧，我會告訴你我是赤果果的在抄hao123麼……）

老規矩，直接貼程式碼：

官方示例裡，只有一個

<div id="calendar"></div>

用來顯示日曆控制元件的相關內容，現在我們把它擴充套件下，加點東西

<!-- 載入提示 -->
<div id="msgTopTipWrapper">
    <div id="msgTopTip">
        <span><i class="iconTip"></i>正在載入日曆資料...</span>
    </div>
</div>
<div class="calendarWrapper">
<!-- 日期詳細資訊 -->
    <div class="rightSidePanel mb50 fr">
        <div id="div_day_detail" class="h_calendar_alm">
            <div class="alm_date"></div>
            <div class="alm_content nofestival">
                <div class="today_icon"></div>
                <div class="today_date"></div>
                <p id="alm_cnD"></p>
                <p id="alm_cnY"></p>
                <p id="alm_cnA"></p>
                <div class="alm_lunar_date"></div>
            </div>
        </div>
    </div>
<!-- 日曆主體 -->
    <div id="calendar" class="dib"></div>
</div>

然後加上頁面載入時初始化今日詳細資訊的js程式碼：

/** 當天資訊初始化 **/
$(function(){
var dayDate = new Date();
var d = $.fullCalendar.formatDate(dayDate,"dddd");
var m = $.fullCalendar.formatDate(dayDate,"yyyy年MM月dd日");
var lunarDate = lunar(dayDate);
$(".alm_date").html(m + " " + d);
$(".today_date").html(dayDate.getDate())
$("#alm_cnD").html("農曆"+ lunarDate.lMonth + "月" + lunarDate.lDate);
$("#alm_cnY").html(lunarDate.gzYear+"年 "+lunarDate.gzMonth+"月 "+lunarDate.gzDate+"日");
$("#alm_cnA").html("【"+lunarDate.animal+"年】");
        var fes = lunarDate.festival();
        if(fes.length>0){
            $(".alm_lunar_date").html($.trim(lunarDate.festival()[0].desc));
            $(".alm_lunar_date").show();
        }else{
            $(".alm_lunar_date").hide();
        }
    });

加上對應的css樣式後，現在重新整理頁面已經可以看到當天的詳細資訊了，但是我們需要可以檢視每天的詳細資訊，所以要給日期的單元格加上對應的觸發時間，fullCalendar已經有這功能了，配置一下就OK,同時順便配置一下載入提示資訊的顯示與隱藏：

dayClick : function(dayDate, allDay, jsEvent, view) { //點選單元格事件            
    var d = $.fullCalendar.formatDate(dayDate,"dddd");
    var m = $.fullCalendar.formatDate(dayDate,"yyyy年MM月dd日");
    var lunarDate = lunar(dayDate);
    $(".alm_date").html(m + " " + d);
    $(".today_date").html(dayDate.getDate())
    $("#alm_cnD").html("農曆"+ lunarDate.lMonth + "月" + lunarDate.lDate);
    $("#alm_cnY").html(lunarDate.gzYear+"年 "+lunarDate.gzMonth+"月 "+lunarDate.gzDate+"日");
    $("#alm_cnA").html("【"+lunarDate.animal+"年】");
    var fes = lunarDate.festival();
    if(fes.length>0){
        $(".alm_lunar_date").html($.trim(lunarDate.festival()[0].desc));
            $(".alm_lunar_date").show();
        }else{
            $(".alm_lunar_date").hide();
        }
        // 當天則顯示“當天”標識
        var now = new Date();
        if (now.getDate() == dayDate.getDate() && now.getMonth() == dayDate.getMonth() && now.getFullYear() == dayDate.getFullYear()){
            $(".today_icon").show();
        }else{
            $(".today_icon").hide();
        }
    },
    loading : function(bool) {
        if (bool)
            $("#msgTopTipWrapper").show();
        else
            $("#msgTopTipWrapper").fadeOut();
    }

至此，改造之後的fullCalendar已經滿足要求啦。至此基本改造完成，下一步的目標是要在日曆上顯示節假日的放假上班安排，這個可以通過fullCalendar的events配置，後端生成相應json來實現。

配置很簡單，就是之前配置events的方法，只不過地址換成自己的：

events : "${ctx}/topic/rili/getFestival",

然後後端對應的返回相應的json串即可，比如我用的springMVC就這麼搞：

@ResponseBody
@RequestMapping(value="/topic/rili/getFestival",method = RequestMethod.GET)
public List<Map<String,Object>> riLiGetFestival() {    
    List<Map<String,Object>> festivalList = new ArrayList<Map<String,Object>>();
    // 2014全部假期日期表
    String holidayTitles = "春節假期;清明節假期;勞動節假期;端午節假期;中秋節假期;國慶節假期;元旦假期;春節調休上班;春節調休上班;勞動節調休上班;國慶節調休上班";
    String holidayStarts = "2014-1-31;2014-4-5;2014-5-1;2014-5-31;2014-9-6;2014-10-1;2014-1-1;2014-1-26;2014-2-8;2014-5-4;2014-9-28;2014-10-11";
    String holidayEnds = "2014-2-6;2014-4-7;2014-5-3;2014-6-2;2014-9-8;2014-10-7;2014-1-1;2014-1-26;2014-2-8;2014-5-4;2014-9-28;2014-10-11";
    String[] arrHolidayTitles = holidayTitles.split(";");
    String[] arrHolidayStarts = holidayStarts.split(";");
    String[] arrHolidayEnds = holidayEnds.split(";");
    for (int i=arrHolidayTitles.length-1;i>=0;i--){
        Map<String,Object> map = new HashMap<String,Object>();      
        map.put("id", i);
        map.put("title", arrHolidayTitles[i]);
        map.put("start", arrHolidayStarts[i]);
        map.put("end", arrHolidayEnds[i]);
        festivalList.add(map);
    }
    return festivalList;
}

這樣就能顯示假期資訊啦

修改後的相應的原始碼以及css樣式檔案需要的童鞋可以戳下面的連結下載下來看看哦~