FullCalendar是一款基于jquery的日历控件,它有着很强大的功能，下面我来给大家介绍一下FullCalendar使用技巧吧，希望此方法对各位有帮助呀。

简介

官方网站：

英文文档：

使用方法

1. 下载压缩包fullcalendar-1.6.3.zip解压
2. 在html页面中导入资源

 代码如下 复制代码

<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="js/fullcalendar.min.js"></script>

几点说明：
FullCalendar需要jquery，如果项目已经引入了jquery，此处不需要重复导入
如果要在日历中使用鼠标拖拽功能，需要导入jquery-ui
压缩包中包含的jquery-ui文件仅包含了jquery.ui.core.js, jquery.ui.widget.js, jquery.ui.mouse.js, jquery.ui.draggable.js, jquery.ui.resizable.js的功能；如果项目已经引入了包含以上功能的jquery-ui文件，此处不可重复导入，重复导入会造成jquery-ui的其它功能失效
3. 调用插件

 代码如下 复制代码

$(function(){
 $('#calenderDemo').fullCalendar({});
});

配置日历表头

 代码如下 复制代码

$('#calenderDemo').fullCalendar({
 header:{
  left: 'prev,next today',
  center: 'title',
  right: 'month,agendaWeek,agendaDay'
 }
});

left、center、right参数对应页面表头三个位置（左、中、右），参数值多个之间可以使用逗号或者空格隔开，可选值范围如下：
title – 当前日期文本
prev – 向前翻按钮
next – 向后翻按钮
prevYear – 前一年按钮
nextYear – 后一年按钮
today – 今天按钮
month – 月视图
basicWeek – 周视图
basicDay – 日视图
agendaWeek – 带小时周视图
agendaDay – 带小时日视图

配置中文界面

 代码如下 复制代码

$('#calenderDemo').fullCalendar({
 buttonText: {
  today: '今天',
  month: '月',
  week: '周',
  day: '天'
 },
 allDayText: '全天',
 monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
 monthNamesShort: ['1','2','3','4','5','6','7','8','9','10','11','12'],
 dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
 dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
});

日程对象event
日历中显示的日程事件

 代码如下 复制代码

{
title: ‘some name’,
start: ’2013-08-08′,
end: ’2013-08-12′
}

基本参数说明
title – 事件名称，显示在日程中
start – 日程开始时间
end – 日程结束时间
其它参数
id
allDay
url
className
editable
startEditable
durationEditable
source
color
backgroundColor
borderColor
textColor
除此以外，可以根据功能需要在event对象中添加自定义的属性

显示日程

 代码如下 复制代码

$('#calenderDemo').fullCalendar({
 events:[]
});

添加参数events: array/json string/function
可以为数组：

 代码如下 复制代码

events: [
 {
  title: 'All Day Event',
  start: new Date()
 },
 {
  title: 'Long Event',
  start: new Date(),
  end: new Date(new Date().getTime()+86400000)
 }
]

可以通过ajax加载json数据：

 代码如下 复制代码

events: {
 url: '/myfeed.php',
 type: 'POST',
 data: {
  custom_param1: 'something',
  custom_param2: 'somethingelse'
 },
 error: function() {
  alert('there was an error while fetching events!');
 },
 color: 'yellow',   // a non-ajax option
 textColor: 'black' // a non-ajax option
}

也可以是一个function：

 代码如下 复制代码

events: function(start, end, callback) {
 // 取得日程数据后回调
 callback(events);
}

添加日程
通过点击日历单元格，添加新日程

 代码如下 复制代码

var calendar = $('#calenderDemo').fullCalendar({
 dayClick: function(date, allDay, jsEvent, view) {
  // 此处可以进行弹窗、后台通信等处理
  // 本例仅在日历中添加一个新日程
  calendar.fullCalendar('renderEvent',
   {
    title: '日程' + new Date().getTime(),
    start: date,
    allDay: allDay
   }
  );
 }
});