最近参与一个任务分配的项目，开发其中的日历模块，选用了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中学习一下，这里面对于该组件的介绍还是比较全面的。