FullCalendar作為一款功能強大的日曆外掛，用途十分廣泛。今天我們用它來實現一個簡單的節假日設定功能，程式碼非常簡潔，有助於理解外掛的呼叫方式。本文程式碼需用到SpringMVC和Mysql。

1、在官網下載fullCalendar.js（LZ的js和樣式都是改過的，可以在文末下載）
2、建立頁面

• 2.1定義一個div：

 <div id="calendar" style="width: 600px"></div>

• 2.2在Script中呼叫fullCalendar外掛，指令碼如下：

 function calendarInit(){
    $('#calendar').fullCalendar({
        theme: false,
        header: {
            left: 'prev,next',
            center: 'title',
            right: 'today'//,agendaWeek,agendaDay
        },
        monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
        dayNames: ["週日", "週一", "週二", "週三", "週四", "週五", "週六"],
        dayNamesShort: ["週日", "週一", "週二", "週三", "週四", "週五", "週六"],
        today: ["今天"],
        firstDay: 1,
        buttonText: {
            today: '本月',
            month: '月',
            week: '周',
            day: '日',
            prev: '<<上一月',
            next: '下一月>>'
        },
        buttonIcons:false,
        viewDisplay: function (view) {//按照月份動態查詢資料
            $("td .fc-widget-content").css('background-color', 'transparent');
            $("#hidDay").val('');
            viewStart = $.fullCalendar.formatDate(view.start, "yyyy-MM-dd");
            viewEnd = $.fullCalendar.formatDate(view.end, "yyyy-MM-dd");
            getData();//獲取當前頁面節假日資料
        },
        editable: false,//判斷該日程能否拖動
        dayClick: function (date, allDay, jsEvent, view) {//日期點選事件
            changeColor(date,this);//改變背景顏色
        }
    });
}
 

3、初始化節假日，預設初始化近五年

• 3.1年份下拉框指令碼：

for (var i = 1990; i <= 2050; i++) {
    selStartYear.add(new Option(i + "年", i));
    selEndYear.add(new Option(i + "年", i));
}

• 3.2前後端資料互動指令碼：

function initData() {
    vDialogInitData.hide();
    showMask(1000);
    var postData = "iSYear=" + $("#selStartYear").val() + "&iEYear=" + $("#selEndYear").val();
    $.post("InitHolidayData", postData, function (response) {
        if (response) {
            getData();
            alert("初始化成功！");
        }
        else {
            alert("初始化失敗！");
        }
        hideMask();
    })
}
 

• 3.3 Java初始化節假日程式碼：

public boolean initHoliday(Integer iSYear, Integer iEYear){
    afwfdayoffDao.deleteInitModel(iSYear,iEYear);//刪除已有資料
    Date dStart=Function.stringToDate(iSYear+"-01-01","yyyy-MM-dd");//格式化起始時間
    Date dEnd=Function.stringToDate(iEYear+"-12-31","yyyy-MM-dd");//格式化結束時間
    while(dStart.compareTo(dEnd)<0){//迴圈遍歷待初始化的時間日期
        Afwfdayoff model=new Afwfdayoff();//節假日資料模型
        Calendar cal = Calendar.getInstance();
        cal.setTime(dStart);
        if(cal.get(Calendar.DAY_OF_WEEK) == Calendar.SATURDAY || cal.get(Calendar.DAY_OF_WEEK) == Calendar.SUNDAY){
           model.name="週末";
           model.sort=1;
        }
        if(cal.get(Calendar.DAY_OF_MONTH) ==1){ //判斷節假日型別
           switch (cal.get(Calendar.MONTH)){
               case 0:
                   model.name="元旦";
                   model.sort=2;
                   break;
               case 4:
                   model.name="勞動節";
                   model.sort=2;
                   break;
               case 9:
                   model.name="國慶節";
                   model.sort=2;
                   break;
           }
        }
        if(model.sort!=null) {//儲存節假日資料
            model.dater = dStart;
            afwfdayoffDao.insert(model);
        }
        cal.add(Calendar.DATE,1);//當前日期加1
        dStart=cal.getTime();
    }
     return true;
}
 

• 3.4資料庫中初始化結果示例：
  

4、節假日設定

public boolean SetWorkday(String dates,Integer iType,String sName) {
    String[] arrDay = dates.split(",");//獲取待設定的時間陣列
    int iLength = arrDay.length;
    if (iLength > 0) {
        for (int ii = 0; ii < iLength; ii++) {//迴圈遍歷
            if (arrDay[ii].length() > 0) {
                afwfdayoffDao.deleteByDays(arrDay[ii]);//刪除已有資料
                if (iType != 0) {
                    Afwfdayoff model = new Afwfdayoff();
                    if (sName.trim().length() == 0) {
                        if (iType == 2) {
                            sName = "節假日";
                        } else {
                            sName = "調休";
                        }
                    }
                    model.name = sName;
                    model.dater = Function.stringToDate(arrDay[ii], "yyyy-MM-dd");
                    model.sort = iType;
                    afwfdayoffDao.insert(model);//儲存節假日資訊
                }
            }
        }
    }
    return true;
}

最終效果圖：

Ps：該程式碼設定好節假日資料，也可以用於日程管理，人事考勤，專案週期計算等應用中。

喜歡文章的朋友歡迎關注公眾號《星空知識》