最近參與一個任務分配的項目，開發其中的日曆模塊，選用了fullCalendar這個日曆控件，在此記錄一下在項目中的用到該控件的地方，方便以後使用時查閱。
一、下載地址
https://fullcalendar.io/download，下載解壓後複製進項目中直接就可使用。
二、fullCalendar的使用
由於我使用的前端框架時easyui，所以每個前端頁面包含了一個js和一個jsp文件。在jsp文件裏非常簡單，導入相應的js和css文件即可。
<head>
<link href='../fullcalendar.min.css' rel='stylesheet' />
<link href='../fullcalendar.print.min.css' rel='stylesheet' media='print' />
<script src='../fullcalendar.min.js'></script>
<script src='../lib/moment.min.js'></script>
<script src='../lib/jquery.min.js'></script>
</head>
<body>
<!-- 在你想放日曆的地方加入該div即可 -->
<div id='fullcalendar'></div>
</body>
js文件裏是fullcalendar的各項使用配置，如下所示。
//日曆控件配置初始化
$('#calendar').fullCalendar({
//設置頭部信息
header:{
left:'prev,next today',
center:'title',
right:'agendaDay,agendaWeek,month,listMonth'
},
//設置頭部按鈕顯示文字
buttonText:{
today:'今天',
month:'月',
week:'周',
day:'日',
list:'事件列表'
},
//設置頭部title顯示格式
views:{
month:{
titleFormat:'YYYY年 MM月'
},
week:{
titleFormat:'YYYY年 MM月 DD日'
},
day:{
titleFormat:'YYYY年 MM月 DD日'
}
},
monthNames:['1','2','3','4','5','6','7','8','9','10','11','12'], //設置月份顯示內容
monthNamesShort:['1','2','3','4','5','6','7','8','9','10','11','12'], //設置月份顯示內容
dayNames:['週日','週一','週二','週三','週四','週五','週六'], //設置周顯示內容
dayNamesShort:['週日','週一','週二','週三','週四','週五','週六'], //設置周顯示內容
defaultDate:nowDate, //設置日曆初始日期
slotLabelFormat:'H:mm', //設置日曆Y軸時間顯示格式
allDaySlot:false, //設置全天事件取消
navLinks:false, //設置不能通過點擊事件跳轉到日視圖
businessHours:true, //設置強調時間段
editable:false, //設置事件不能被編輯
overlap:false, //設置事件不可拖動
firstDay:1, //設置日曆每行開始爲周幾
timeFormat:'H:mm', //設置事件顯示日期格式
//鼠標懸停事件，顯示懸浮框
eventMouseover:function(event,jsEvent,view){
var str = "任務名稱：" + event.title + "\n開始時間：" + timestampToNewTime(event.start_time) + "\n結束時間：" + timestampToNewTime(event.end_time) + "\n任務描述：" + event.task_desc + "\n發起人：" + event.create_name + "\n處理人：" + event.do_name;
$(this).attr('title',str);
$(this).css('font-weight','normal');
},
//事件點擊，觸發彈出層
eventClick:function(event,jsEvent,view){
//...此處省略事件點擊後的處理代碼
//event是點擊的事件對象
//jsEvent是點擊事件的座標信息
//view是當前的視圖對象
}
});
//設置按鈕點擊事件:prev
//其他按鈕也可以該方式進行設置，且點擊按鈕不會覆蓋原有的操作（依舊會切換視圖並執行下列操作）
$('#calendar').find('.fc-prev-button').click(function(){
//清除日曆上所有事件（事件源還存在，只是在日曆上不顯示）
$('#calendar').fullCalendar('removeEvents');
clearAllEvents();
//獲取日曆當前的日期（很方便的一個功能，進行視圖轉換等操作後直接可獲取日曆當前的日期）
var moment = $('#calendar').fullCalendar('getDate');
var date = moment.format().split("T")[0];
//當前日曆日期和視圖名稱
var dd = strToDate(date);
var view = $('#calendar').fullCalendar('getView');
var range_start_date;
var range_end_date;
//根據不同視圖確定日期範圍
if (view.name == 'month'){
//...此處省略事件點擊後的處理代碼
}
if (view.name == 'agendaWeek'){
//...此處省略事件點擊後的處理代碼
}
if (view.name == 'listMonth'){
//...此處省略事件點擊後的處理代碼
}
if (view.name == 'agendaDay'){
//...此處省略事件點擊後的處理代碼
}
getEventData(query_task_url,range_start_date,range_end_date);
//生成一個事件,其中title和start是必須屬性
//fullCalendar中的event必須帶有title和start屬性,還有一些屬性可選填如color是設置事件顯示背景顏色
//除了自帶的一些屬性,還可以向event中加入一些自定義的屬性,fullcalendar不會覆蓋這些屬性，讀取事件時也可以獲得這些屬性
var event={
id:id,
title:title,
start:start,
end:end,
//...
color:'blue'
}
//fullcalendar中的事件主要是以事件源爲主，事件源可以是數組、文件或是函數
var events=[];
events.push(event);
//向日歷中添加事件源，使事件源中所有對象在日曆中顯示
$('#calendar').fullCalendar('addEventSource',events);
});
以上簡單的介紹了一下fullCalendar的使用配置，如果有對該組件感興趣的朋友，可以去https://www.helloweba.net/javascript/445.html中學習一下，這裏面對於該組件的介紹還是比較全面的。