FullCalender的配置和使用
来源：互联网 发布：龙华行知实验学校 编辑：程序博客网 时间：2024/06/04 19:14
引入依赖的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>新建 HTML File 引入相关文件：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <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>
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( $('<option/>') .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中有一些很常用的属性，非常实用。
//月视图下日历格子宽度和高度的比例aspectRatio: 1.35,//月视图的显示模式，fixed：固定显示6周高；liquid：高度随周数变化；variable: 高度固定weekMode: 'liquid',//初始化时的默认视图，month、agendaWeek、agendaDaydefaultView: 'month',//agenda视图下是否显示all-dayallDaySlot: 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:mmend //结束的时间，可以不填，格式为 yyyy-MM-dd 或 yyyy-MM-dd HH:mmurl //可以不填，点击时跳转到指定urlclassName //数据的样式，可以不填color //背景和边框颜色，可以不填，默认为#3a87adbackgroundColor //背景颜色，可以不填，默认为#3a87adborderColor //边框颜色，可以不填，默认为#3a87adtextColor //文本颜色,可以不填，默认为白色}
实例
往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('鼠标离开 ...'); // ...},
- 1
- 2
- 3
- 4
- 5
- 6
3. 鼠标选择事件
通过鼠标点击或者拖动选择日历中的对象会触发select的callback，参数start表示选择的开始时间，参数end表示选择的结束时间，常用于快速添加阶段性时间的日程，具体方法如下（使用Console日志打印选择的开始和结束时间） ：
相关的属性设置：
//设置是否可被单击或者拖动选择selectable: true,//点击或者拖动选择时，是否显示时间范围的提示信息，该属性只在agenda视图里可用selectHelper: true,//点击或者拖动选中之后，点击日历外的空白区域是否取消选中状态 true为取消 false为不取消，只有重新选择时才会取消unselectAuto: true，- 5
- 6
下面是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视图下开始拖动，改变的是毫秒数：
附录 完整代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <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+'天！'); }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 ---'); // ... }, 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'); // ... }, 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' }, ] }); //初始化语言选择的下拉菜单值 $.each($.fullCalendar.langs, function(langCode) { $('#lang-selector').append( $('<option/>') .attr('value', langCode) .prop('selected', langCode == initialLangCode) .text(langCode) ); }); //当选择一种语言时触发 $('#lang-selector').on('change', function() { if (this.value) { $('#calendar').fullCalendar('option', 'lang', this.value); } }); });</script></html>阅读全文
0 0
- FullCalender的配置和使用
- Jquery 日程安排 fullcalender 的使用
- jquery的fullCalender插件运用
- JQuery fullcalender文档
- fullcalender 中文语言包
- struts的配置和使用
- cvs的配置和使用
- VSS的配置和使用
- 数据源的配置和使用
- VSS的配置和使用
- log4net的配置和使用
- VSS的配置和使用
- CVS的配置和使用
- VSS的配置和使用
- vsftp 的配置和使用
- Samba的配置和使用
- log4j的配置和使用
- cvs的配置和使用
- 华为手机6.0系统系列崩溃，情况未明
- Matlab将多个柱形图放于一个图中
- docker 的基本命令
- JS中的形参与实参
- Linux学习之文件处理命令（二）目录处理命令 && 文件处理命令
- FullCalender的配置和使用
- opencv中霍夫变换cv::HoughLinesP函数的使用方法和形参说明
- DTW
- CSDN第一次来。听说是程序员之家啊。所以注册个帐号
- 用递归实现买鸭子问题 C语言
- 数组去重
- CNN笔记：通俗理解卷积神经网络
- IT界的技术风潮是不可以追赶的
- 一步步教你实现Android HotFix热更新
