因公司想做个添加事件的日历,,找遍插件感觉fullcaledar最强大,,而且很多人推荐,故找到最易理解的解释做笔记
Github地址：https://github.com/fullcalendar/fullcalendar
官网地址：http://fullcalendar.io/
引入依赖的JS和CSS
由于 FullCalendar 自身是个 JQuery 插件，所以首先要引入 ：
<script src='jquery.min.js'>script>然后是 FullCalendar 的依赖（可以在FullCalendar的官网下载）：
<link href='fullcalendar.css' rel='stylesheet' /> <script src='moment.min.js'>script> <script src='fullcalendar.min.js'>script>FullCalendar还为我们提供了国际化的依赖（下载的FullCalendar目录中包含），目录下的lang文件夹也需要拷贝到和当前资源同一目录下：
<script src='lang-all.js'>script最后是Bootstrap的依赖：
<link href='bootstrap.min.css' rel='stylesheet' /> <script src='bootstrap.min.js'>script>构建index.html
新建 HTML File 引入相关文件：
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <link href='fullcalendar.css' rel='stylesheet' /> <link href='bootstrap.min.css' rel='stylesheet' /> <style> /* 语言选择 */ #top { background: #eee; border-bottom: 1px solid #ddd; padding: 0 10px; line-height: 40px; font-size: 12px; } /* 日历 */ #calendar { margin: 40px auto; padding: 0 10px; } /* Event 参数 className 的值 */ .done:before { content:"【 已完成 】"; background-color:yellow; color:green; text-align:center; font-weight:bold; width:100%; } /* Event 参数 className 的值 */ .doing:before { content:"【 未完成 】"; background-color:yellow; color:red; text-align:center; font-weight:bold; } style> head> <body> <div id='top'> Language: <select id='lang-selector'>select> div> <div id='calendar'>div> body> <script src='jquery.min.js'>script> <script src='moment.min.js'>script> <script src='fullcalendar.min.js'>script> <script src='lang-all.js'>script> <script src='bootstrap.min.js'>script> html>初始化FullCalendar
JavaScript初始化：
<script type="text/javascript"> $(document).ready(function() { //国际化默认值为'en'，代表使用英文 var initialLangCode = 'en'; //初始化FullCalendar $('#calendar').fullCalendar({ //设置头部信息，如果不想显示，可以设置header为false header: { //日历头部左边：初始化切换按钮 left: 'prev,next today', //日历头部中间：显示当前日期信息 center: 'title', //日历头部右边：初始化视图 right: 'month,agendaWeek,agendaDay' }, //设置是否显示周六和周日，设为false则不显示 weekends: true, //日历初始化时显示的日期，月视图显示该月，周视图显示该周，日视图显示该天，和当前日期没有关系 defaultDate: '2016-06-06', //日程数据 events: [ { title: 'All Day Event', start: '2016-08-11' } ] }); //初始化语言选择的下拉菜单值 $.each($.fullCalendar.langs, function(langCode) { $('#lang-selector').append( $('') .attr('value', langCode) .prop('selected', langCode == initialLangCode) .text(langCode) ); }); //当选择一种语言时触发 $('#lang-selector').on('change', function() { if (this.value) { $('#calendar').fullCalendar('option', 'lang', this.value); } }); }); script>配置完成
我们可以看到配置完成后，FullCalendar的雏形也出来了。 
常用属性设置
FullCalendar中有一些很常用的属性，非常实用。
//月视图下日历格子宽度和高度的比例
aspectRatio: 1.35,
//月视图的显示模式，fixed：固定显示6周高；liquid：高度随周数变化；variable: 高度固定
weekMode: 'liquid',
//初始化时的默认视图，month、agendaWeek、agendaDay defaultView: 'month', //agenda视图下是否显示all-day allDaySlot: true, //agenda视图下all-day的显示文本 allDayText: '全天', //agenda视图下两个相邻时间之间的间隔 slotMinutes: 30, //区分工作时间 businessHours: true, //非all-day时，如果没有指定结束时间，默认执行120分钟 defaultEventMinutes: 120, //设置为true时，如果数据过多超过日历格子显示的高度时，多出去的数据不会将格子挤开，而是显示为 +...more ，点击后才会完整显示所有的数据 eventLimit: true,日程数据的设置
我们可以设置日程数据的内容来得到丰富的显示效果。
{
id //唯一标识，可以不填，持久化时编辑数据时使用
title //显示在日历上的内容
allDay //标识是否为全天，可以不填，调用event.allDay时会自动区分是否为全天
start //开始的时间，格式为 yyyy-MM-dd 或 yyyy-MM-dd HH:mm
end //结束的时间，可以不填，格式为 yyyy-MM-dd 或 yyyy-MM-dd HH:mm url //可以不填，点击时跳转到指定url className //数据的样式，可以不填 color //背景和边框颜色，可以不填，默认为#3a87ad backgroundColor //背景颜色，可以不填，默认为#3a87ad borderColor //边框颜色，可以不填，默认为#3a87ad textColor //文本颜色,可以不填，默认为白色 }实例
往events中添加一些静态数据，完整的效果如下。
events: [
{
id: 1,
title: '这是一个all-day数据',
allDay: true,
start: '2016-08-11'
},
{
id: 2,
title: '开始时间为12PM', start: '2016-08-11 12:00' }, { id: 3, title: '给一点颜色', start: '2016-08-11', color: 'red' }, { id: 4, title: '使用className:done', start: '2016-08-10 09:00', end: '2016-08-11 18:00', color: 'blue', className: 'done' }, { id: 5, title: '使用className:doing', start: '2016-08-11 09:00', end: '2016-08-12 18:00', color: 'green', className: 'doing' }, { id: 6, title: '使用URL和字体颜色', start: '2016-08-11', color: 'pink', url: 'http://flovel.xyz', className: 'doing', textColor: 'black' }, { id: 7, title: '使用backgroundColor和borderColor', start: '2016-08-11 09:00', end: '2016-08-12 18:00', backgroundColor: 'gray', borderColor: 'red', className: 'done' }, ]
各种事件
1. 鼠标点击事件
（1）通过鼠标点击日历某一天触发dayClick的callback，参数date为点击的日期或时间，常用于为某一天或为某一时刻添加日程，具体方法如下（使用Console日志打印点击的日期或时间） ：
dayClick : function( date ) {
//do something here...
console.log('dayClick触发的时间为：', date.format());
// ...
},
在month视图下点击时：
在agenda视图下点击时会带上对应的时间：
（2）通过鼠标点击日历某一Event数据触发eventClick的callback，参数event表示被点击的Event，常用于编辑某一Event数据，具体方法如下（使用Console日志打印点击的Event数据基本信息） ：
eventClick : function( event ){
//do something here...
console.log('eventClick中选中Event的id属性值为：', event.id); console.log('eventClick中选中Event的title属性值为：', event.title); console.log('eventClick中选中Event的start属性值为：', event.start.format('YYYY-MM-DD HH:mm')); console.log('eventClick中选中Event的end属性值为：', event.end.format('YYYY-MM-DD HH:mm')); console.log('eventClick中选中Event的color属性值为：', event.color); console.log('eventClick中选中Event的className属性值为：', event.className); // ... },
2. 鼠标悬浮事件
通过鼠标经过或者离开日历某一天触发callback，参数event表示鼠标经过或离开的Event，常用来通过一些悬浮DIV展示Event数据的基本信息，具体方法如下（使用Console日志打印事件的触发过程） ：
（1）鼠标经过
eventMouseover : function( event ) {
//do something here...
console.log('鼠标经过 ...');
console.log('eventMouseover被执行，选中Event的title属性值为：', event.title);
// ...
},
（2）鼠标离开
eventMouseout : function( event ) {
//do something here...
console.log('eventMouseout被执行，选中Event的title属性值为：', event.title);
console.log('鼠标离开 ...');
// ...
},
3. 鼠标选择事件
通过鼠标点击或者拖动选择日历中的对象会触发select的callback，参数start表示选择的开始时间，参数end表示选择的结束时间，常用于快速添加阶段性时间的日程，具体方法如下（使用Console日志打印选择的开始和结束时间） ：
相关的属性设置：
//设置是否可被单击或者拖动选择
selectable: true,
//点击或者拖动选择时，是否显示时间范围的提示信息，该属性只在agenda视图里可用
selectHelper: true,
//点击或者拖动选中之后，点击日历外的空白区域是否取消选中状态 true为取消 false为不取消，只有重新选择时才会取消 unselectAuto: true,下面是select的callback方法：
select: function( start, end ){
//do something here...
console.log('select触发的开始时间为：', start.format());
console.log('select触发的结束时间为：', end.format());
// ...
},
如果dayClick和select同时存在时，两个callback都会执行，需要注意。
在month视图下选择时：
设置了selectHelper为true，在agenda视图下选择时会带上对应的时间，Helper会显示选择的时间范围：
4. 鼠标拖动事件
通过鼠标按住拖动某一Event触发eventDrop的callback，参数event表示被拖动的Event，参数dayDelta表示这次拖动导致Event移动了多少天或时间, 向前为正数, 向后为负数，参数revertFunc 用来在提交数据失败时将刚才的拖动恢复到原状，拖动改变日程时间范围常用于快速编辑某一Event的日程时间，具体方法如下（使用Console日志打印鼠标拖动Event的过程） ：
相关的属性设置：
//Event是否可被拖动或者拖拽
editable: true,
//Event被拖动时的不透明度
dragOpacity: 0.5,下面是eventDrop的callback方法，判断了month视图和agenda视图下不同的时间改变：
eventDrop : function( event, dayDelta, revertFunc ) {
//do something here...
console.log('eventDrop --- start ---');
console.log('eventDrop被执行，Event的title属性值为：', event.title);
if(dayDelta._days != 0){ console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._days+'天！'); }else if(dayDelta._milliseconds != 0){ console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._milliseconds/1000+'秒！'); }else{ console.log('eventDrop被执行，Event的start和end时间没有改变！'); } //revertFunc(); console.log('eventDrop --- end ---'); // ... },在month视图下开始拖动，改变的是天数：
开始拖动，可以看到不透明度发生了变化。
松开鼠标，完成拖动。
在agenda视图下开始拖动，改变的是毫秒数：
Event初始位置。
开始拖动，可以看到不透明度发生了变化。
松开鼠标，完成拖动。
5. 鼠标拖拽事件
通过鼠标按住Event的一侧进行拖拽触发eventResize的callback，参数event表示被拖拽的Event，参数dayDelta表示这次拖拽改变日程结束时间导致Event日程结束时间增加了多少天或时间,，参数revertFunc 用来在提交数据失败时将刚才的拖拽恢复到原状，拖拽改变日程结束时间常用于快速编辑某一Event的日程结束时间，具体方法如下（使用Console日志打印鼠标拖拽Event的过程） ：
相关的属性设置：
//Event是否可被拖动或者拖拽，之前拖动配置过了，此处不必配置
editable: true,
下面是eventResize的callback方法，判断了month视图和agenda视图下不同的时间改变：
eventResize : function( event, dayDelta, revertFunc ) {
//do something here...
console.log(' --- start --- eventResize');
console.log('eventResize被执行，Event的title属性值为：', event.title);
if(dayDelta._days != 0){ console.log('eventResize被执行，Event的start和end时间改变了：', dayDelta._days+'天！'); }else if(dayDelta._milliseconds != 0){ console.log('eventResize被执行，Event的start和end时间改变了：', dayDelta._milliseconds/1000+'秒！'); }else{ console.log('eventResize被执行，Event的start和end时间没有改变！'); } //revertFunc(); console.log('--- end --- eventResize'); // ... },注意：
（1）all-day的Event可以在month、agendaWeek视图下向右拖拽改变日程结束时间
（2）非all-day的Event，不可以在month视图下拖拽，只能在agenda视图下向下拖拽改变日程结束时间
在month视图下开始拖拽，改变的是天数：
在agenda视图下开始拖动，改变的是毫秒数：
附录 完整代码
<html lang="en"> <head> <meta charset="UTF-8"> <title>Titletitle> <link href='fullcalendar.css' rel='stylesheet' /> <style> /* 语言选择 */ #top { background: #eee; border-bottom: 1px solid #ddd; padding: 0 10px; line-height: 40px; font-size: 12px; } /* 日历 */ #calendar { margin: 40px auto; padding: 0 10px; } /* Event 参数 className 的值 */ .done:before { content:"【 已完成 】"; background-color:yellow; color:green; text-align:center; font-weight:bold; width:100%; } /* Event 参数 className 的值 */ .doing:before { content:"【 未完成 】"; background-color:yellow; color:red; text-align:center; font-weight:bold; } style> head> <body> <div id='top'> Language: <select id='lang-selector'>select> div> <div id='calendar'>div> body> <script src='jquery.min.js'>script> <script src='moment.min.js'>script> <script src='fullcalendar.min.js'>script> <script src='lang-all.js'>script> <script type="text/javascript"> $(document).ready(function() { var initialLangCode = 'en'; $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, weekends: true, weekMode: 'liquid', defaultView: 'month', allDayText: '全天', businessHours: true, defaultEventMinutes: 120, eventLimit: true, dayClick : function( date ) { //do something here... console.log('dayClick触发的时间为：', date.format()); // ... }, //设置是否可被单击或者拖动选择 selectable: true, //点击或者拖动选择时，是否显示时间范围的提示信息，该属性只在agenda视图里可用 selectHelper: true, //点击或者拖动选中之后，点击日历外的空白区域是否取消选中状态 true为取消 false为不取消，只有重新选择时才会取消 unselectAuto: true, select: function( start, end ){ //do something here... console.log('select触发的开始时间为：', start.format()); console.log('select触发的结束时间为：', end.format()); // ... }, eventClick : function( event ){ //do something here... console.log('eventClick中选中Event的id属性值为：', event.id); console.log('eventClick中选中Event的title属性值为：', event.title); console.log('eventClick中选中Event的start属性值为：', event.start.format('YYYY-MM-DD HH:mm')); console.log('eventClick中选中Event的end属性值为：', event.end.format('YYYY-MM-DD HH:mm')); console.log('eventClick中选中Event的color属性值为：', event.color); console.log('eventClick中选中Event的className属性值为：', event.className); // ... }, eventMouseover : function( event ) { //do something here... console.log('鼠标经过 ...'); console.log('eventMouseover被执行，选中Event的title属性值为：', event.title); // ... }, eventMouseout : function( event ) { //do something here... console.log('eventMouseout被执行，选中Event的title属性值为：', event.title); console.log('鼠标离开 ...'); // ... }, //Event是否可被拖动或者拖拽 editable: true, //Event被拖动时的不透明度 dragOpacity: 0.5, eventDrop : function( event, dayDelta, revertFunc ) { //do something here... console.log('eventDrop --- start ---'); console.log('eventDrop被执行，Event的title属性值为：', event.title); if(dayDelta._days != 0){ console.log('eventDrop被执行，Event的start和end时间改变了：', dayDelta._days+'天！'); }