FullCalendar插件的基本使用
我的另一博客地址：https://segmentfault.com/u/lyrfighting/articles
前段时间，一直在开发考勤系统，当时为满足设计的需求，选了好几个插件，最后决定采用Fullcanlendar的插件。感觉这个插件可以满足现阶段的功能开发需求
需求图
一、使用方式
1、依赖的文件引入
2、页面使用--具体的各项属性和方法可以参照中文手册https://blog.csdn.net/ymnets/article/details/78661247
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>Fullcanlendar代码示例</title>
<link rel="stylesheet" type="text/css" href="css/fullcalendar.min.css"/>
<link rel="stylesheet" type="text/css" href="css/fullcalendar.print.css"/>
</head>
<body>
<div class="canlendar" id="calendar"></div>
<script type="text/javascript" src="js/moment.min.js" ></script>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery-ui.min.js" ></script>
<script type="text/javascript" src="js/fullcalendar.min.js" ></script>
<script> $('#calendar').fullCalendar({
/*设置日历头部信息，如果设置为false，则不显示头部信息。
* 包括left,center,right左中右三个位置都可以对应一下配置
* title:显示当前月份/周、日信息
* prev:用于切换到上一月/周/日视图的按钮
* next:用于切换到下一月/周/日视图的按钮
* prevYear：用于切换到上一年视图的按钮
* nextYear：用于切换到下一年视图的按钮
* */
header:{
left: '',
center: 'Fullcanlendar示例demo',
right: 'today prev,next'
},
theme:false,//如果设置为true，则需要加载jquery ui相关css和js文件,默认值为false
firstDay:1,//设置一周中显示的第一天是哪天，周日是0，周一是1，类推
isRTL:false,//设置为ture时则日历从右往左显示
weekends:true,//是否显示周末，设为false则不显示周六和周日。默认值为true
hiddenDays:[],//隐藏一周中的某一天或某几天，数组形式，如隐藏周二和周五：[2,5]，默认不隐藏，除非weekends设置为false。
weekMode:'fixed',//在月视图里显示周的模式，因为每月周数可能不同，所以月视图高度不一定。fixed：固定显示6周高，日历高度保持不变liquid：不固定周数，高度随周数变化variable：不固定周数，但高度固定
weekNumbers:false,//是否在日历中显示周次(一年中的第几周)，如果设置为true，则会在月视图的左侧、周视图和日视图的左上角显示周数。
weekNumberCalculation:'iso',//周次的显示格式。
//height:600,//设置日历的高度，包括header日历头部，默认未设置，高度根据aspectRatio值自适应。
//contentHeight://设置日历主体内容的高度，不包括header部分，默认未设置，高度根据aspectRatio值自适应。
aspectRatio:1.35,//设置日历单元格宽度与高度的比例。
handleWindowResize:true,//是否随浏览器窗口大小变化而自动变化。
render:function(view){
console.log('render',view)
},//method,绑定日历到id上。$('#id').fullCalendar('render');
destroy:function(){ },
weekNumbers : false, //是否在视图左边显示这是第多少周，默认false eventLimit: true, //数据条数太多时，限制各自里显示的数据条数（多余的以“+2more”格式显示），默认false不限制,支持输入数字设定固定的显示条数 viewRender : function(view,element){//在视图被渲染时触发（切换视图也触发） 参数view为视图对象，参数element为Jquery的视图Dom }, dayRender : function(date, cell){//日期格式Render钩子函数（我没理解清楚）
console.log("↓↓↓dayRender↓↓↓");
console.log(date);
console.log(cell);
},
windowResize : function(){//浏览器窗体变化时触发
console.log("---windowResize---");
}, allDayText : "全天", //自定义全天视图的名称
slotDuration : "01:00:00", //一格时间槽代表多长时间，默认00:30:00（30分钟）
slotLabelFormat : "H(:mm)a", //日期视图左边那一列显示的每一格日期时间格式
slotLabelInterval : "02:00:00", //日期视图左边那一列多长间隔显示一条日期文字(默认跟着slotDuration走的，可自定义)
snapDuration : "05:00:00", //其实就是动态创建一个日程时，默认创建多长的时间块 slotEventOverlap : false, //相同时间段的多个日程视觉上是否允许重叠，默认true允许 noEventsMessage : "L没数据啊", //listview视图下，无数据时显示提示
defaultDate : '2018-09-10', //默认显示那一天的日期视图getDates(true)
nowIndicator : true, //周/日视图中显示今天当前时间点（以红线标记），默认false不显示
monthNames : ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //月份自定义命名
monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], //月份缩略命名（英语比较实用：全称January可设置缩略为Jan）
dayNames: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //同理monthNames
dayNamesShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"], //同理monthNamesShort
weekNumberTitle : "周", //周的国际化,默认为"W" eventLimitText : "更多", //当一块区域内容太多以"+2 more"格式显示时，这个more的名称自定义（应该与eventLimit: true一并用）
dayPopoverFormat : "YYYY年M月d日", //点开"+2 more"弹出的小窗口标题，与eventLimitClick可以结合用
navLinks : true, // “xx周”是否可以被点击，默认false，如果为true则周视图“周几”被点击之后进入日视图。本地测试：没什么效果 dayClick: function(date, jsEvent, view) {//空白的日期区，单击时触发
console.log("↓↓↓dayClick↓↓↓");
console.log('Clicked on: ' + date.format());
console.log('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
console.log('Current view: ' + view.name); //$(this).css('background-color', 'red');
},
eventClick: function(calEvent, jsEvent, view) {//日程区块，单击时触发
console.log(jsEvent.target)
alert(jsEvent.target.innerHTML)
console.log("↓↓↓eventClick↓↓↓");
console.log('Event: ' + calEvent.title);
console.log('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
console.log('Current view: ' + view.name); return false; //return false可以阻止点击后续事件发生（比如event中的url跳转事件）
},
eventMouseover: function(calEvent, jsEvent, view){//鼠标在日程区块上时触发 console.log(jsEvent)
console.log(calEvent.start._i)
$('.hover-dateStr').html(calEvent.start._i)
console.log(jsEvent.pageY,jsEvent.pageX)
$('.hover-container').removeClass('none').animate({'top':jsEvent.pageY,'left':jsEvent.pageX})
if(!canRun){
// 判断是否已空闲，如果在执行中，则直接return
return;
}
},
eventMouseout: function(calEvent, jsEvent, view){//鼠标从日程区块离开时触发
$('.hover-container').addClass('none')
},
selectable: false, //允许用户可以长按鼠标选择多个区域(比如月视图，可以选中多天；日视图可以选中多个小时)，默认false不能选择多区域的
selectHelper: true, //接selectable，周/日视图在选择时是否预先画出“日程区块”的样式出来
unselectAuto : true, //是否点击页面上的其他地方会导致当前的选择被清除，默认true
unselectCancel : "", //一种方法来指定元素，会忽略unselectauto选项，默认''
selectOverlap : true, //确定用户是否被允许选择被事件占用的时间段，默认true可占用时间段 selectAllow : function(selectInfo){ //精确的编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择
console.log("↓↓↓selectConstraint↓↓↓");
console.log("start:"+selectInfo.start+"|end:"+selectInfo.end+"|resourceId:"+selectInfo.resourceId);
return true;
},
select: function(start, end,jsEvent,view) { //点击空白区域/选择区域内容触发 },
unselect : function(view, jsEvent){//选择操作取消时触发
console.log("↓↓↓unselect↓↓↓");
console.log("view:"+view);
}, lazyFetching : true, //是否启用懒加载技术--即只取当前条件下的视图数据，其它数据在切换时触发，默认true只取当前视图的，false是取全视图的
defaultTimedEventDuration : "02:00:00", //在Event Object中如果没有end参数时使用，如start=7:00pm，则该日程对象时间范围就是7:00~9:00
defaultAllDayEventDuration : { days: 1 }, //默认1天是多长，（有的是采用工作时间模式，所以支持自定义）
loading : function(isLoading, view){ //视图数据加载中、加载完成触发
console.log("↓↓↓loading↓↓↓");
if(isLoading == true){
console.log("view:"+view+",开始加载");
}else if(isLoading == false){
console.log("view:"+view+",加载完成");
}else{
console.log("view:"+view+",除非天塌下来否则不会进这个分支");
}
}, eventOrder : "title", //多个相同的日程数据排序方式，String / Array / Function, 默认值: "title"
eventRender : function(event, element, view) { //当Event对象开始渲染时触发
console.log("eventRender():"+event.title);
},
eventAfterAllRender : function(view){console.log("eventAfterAllRender();");}, //当所有Event对象渲染完成时触发
editable: true, //支持Event日程拖动修改，默认false
eventStartEditable : true, //Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
eventDurationEditable : false, //Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽 dragOpacity:0.2, //拖拽时不透明度，0.0~1.0之间，数字越小越透明
dragScroll : true, //是否在拖拽时自动移动容器，默认true
eventOverlap : true, //拖拽时是否重叠
eventConstraint : { //限制拖拽拖放的位置（即限制有些地方拖不进去）：an event ID, "businessHours", object
start: '10:00', // a start time (10am in this example)
end: '18:00', // an end time (6pm in this example)
dow: [ 1, 2, 3, 4 ] // days of week. an array of zero-based day of week integers (0=Sunday) (Monday-Thursday in this example)
},
longPressDelay : 1000, //面向可touch设备（如移动设备），长按多少毫秒即可拖动,默认1000毫秒（1S）
eventDragStart : function(event, jsEvent, ui, view){ //日程开始拖拽时触发
console.log("eventDragStart():"+event.title);
},
eventDragStop : function(event, jsEvent, ui, view){ //日程拖拽停止时触发
console.log("eventDragStop():"+event.title);
},
eventDrop : function(event, delta, revertFunc, jsEvent, ui, view){ //日程拖拽停止并且已经拖拽到其它位置了
console.log("eventDrop():"+event.title);
},
eventResizeStart : function( event, jsEvent, ui, view ) { //日程大小调整开始时触发
console.log("eventResizeStart():"+event.title);
},
eventResizeStop : function(event, jsEvent, ui, view){ //日程大小调整停止时触发
console.log("eventResizeStop():"+event.title);
},
eventResize : function(event, delta, revertFunc, jsEvent, ui, view){ //日程大小调整完成并已经执行更新时触发
console.log("eventResize():"+event.title);
},
events:[
{
"time": "9:20--18:20",
"antualTime":"9:40--18:40",
"start": "2018-09-01" },
{
"time": "9:40--18:40",
"antualTime":"9:40--18:40",
"start": "2018-09-02"
}
]
}); </script>
</body>
</html>
三、获取数据：
整个的插件使用的难点就在于获取数据，如果依赖events函数直接获得数据源的话，将后台传过来的当月数据整理好放入回调函数中，也是可行的，但是在获取上一个月或者下一个月的时候数据不会再次获取数据；
使用eventSources也是同样的道理，具体可以查看博客https://www.helloweba.net/javascript/454.html；
使用ajax请求，向后台请求该月份的数据的话，最好的方式就是在切换月份的时候，请求接口，获取数据；而不是一次获取大量的数据渲染，这样会导致渲染速度太慢，网页响应速度慢，影响用户的体验。
//初始化日程表
events:function(start, end, timezone,callback){
var date = this.getDate().format('YYYY-MM');
var arr=date.split("-");
var events = loopMonthDay(arr[0],arr[1]); //loopMonthDay(arr[0],arr[1]); 是自己封装的函数
callback(events);//将整理好格式的数组放在回调中执行，这样在切换月份的时候就会自动掉接口获取
}
四、说明
因为默认的Fullcanlendar的样式比较简单直接，所以一般情况下是需要改写样式的。
FullCalendar插件的基本使用的更多相关文章
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（86）-日程管理-fullcalendar插件用法
前言 本文分享fullcalendar用法,最后面提供代码下载 说到日程管理,基于JQuery的插件FullCalendar当之无愧,完整的API稳定和调用方式,非常易于扩展!可以用于系统的个人历程管 ...
- fullcalendar插件日程管理
日程管理-fullcalendar插件用法 前言 本文分享fullcalendar用法,最后面提供代码下载 说到日程管理,基于JQuery的插件FullCalendar当之无愧,完整的API稳定和 ...
- fullCalendar插件基本使用
效果图 html代码,需要引入jquery,layui,fullCalendar <!DOCTYPE html> <html lang="en"> < ...
- js jquery 实现 排班,轮班，日历，日程。使用fullcalendar 插件
如果想用fullcalendar实现排班功能,或者日历.日程功能.那么只需要简单的几步: 这里先挂官网链接: fullcalendar fullcalendar官网下载链接 一.下载及简单配置 1.这 ...
- Easyui+MVC+FullCalendar插件实现日程记录功能
好久好久好久,,,没有写博客了,,久到账号都忘记了....分享一个干货.... 废话少说,先看看效果图. 要实现这样一个功能,先创建一个用于存储日程的记录表(不要问我为什么都是大写,因为初版在orac ...
- 日历插件FullCalendar应用：(二)数据增删改
接上一篇 日历插件FullCalendar应用:(一)数据展现. 这一篇主要讲使用fullcalendar插件如何做数据的增删改,用到了art.dialog web对话框组件,上一篇用到的webFor ...
- FullCalendar应用——整合农历节气和节日
FullCalendar用来做日程管理功能非常强大,但是唯一不足的地方是没有将中国农历历法加进去,今天我将结合实例和大家分享如何将中国农历中的节气和节日整合到FullCalendar中,从而增强其实用 ...
- FullCalendar Timeline View 使用
FullCalendar Timeline View(v4) The Scheduler add-on provides a new view called “timeline view” with ...
- Jquery 记一次使用fullcalendar的使用记录
最近接了一个需求,把excel做的表格开发到系统里,本来想直接做成表格的形式,后来考虑到数据库中的表结构不好设计,最后决定做成日历的形式: 先上成品图 需要引用的js,fullcalendar官网可以 ...
随机推荐
- 开发环境无错，部署至测试环境报错“NoSuchMethodError”OR"NoSuchClassError"
背景: 实现一个简单的功能,需要用到jedis的jar包连接Redis.在之前便已经有使用jedis,它的版本比较旧,是2.1的.而新实现的功能,在编码的时候使用的是2.8的.在开发环境完成单元测试后 ...
- [Angularjs-学习笔记]工具篇
因为一开始学习前端知识一直都是在慕课网,所以这次准备学习下angularjs等了好久,终于慕课网出了angularjs的内容,于是准备开始跟着老师的步骤进行学习. 大漠老师关于开发工具的内容讲得比较快 ...
- Git 之Windows环境下学习系列
Git .SVN .TFS 相同点 不同点 Git 版本控制 优点: 分布式版本控制.无需联网就能版本提交 开源 缺点 入门学习难度高 SVN 优点: 集中式版本控制. 个人开源 缺点 ...
- How to clear fmadm log or FMA faults log (ZT)
Here are the step by step of clearing the FMA faults on most of Oracle/Sun server. Work perfectly on ...
- DDD学习笔录——领域驱动设计的常见误区(即错误的理解)
可以将DDD看成一种开发思想体系:它促成了一种新的以领域为中心的思维方式. 它是一种学习过程,而非最终目标,这就是DDD的最大优势. 任何团队都可以编写一个软件来满足一组用例的需求,但那些将时间和精力 ...
- 问题：Custom tool error: Failed to generate code for the service reference 'AppVot；结果：添加Service Reference, 无法为服务生成代码错误的解决办法
添加Service Reference, 无法为服务生成代码错误的解决办法 我的解决方案是Silverlight+WCF的应用,Done Cretiria定义了需要在做完Service端的代码后首先运 ...
- SpringMVC + AJAX 实现多文件异步上传
转自:https://www.jianshu.com/p/f3987f0f471f 今天,我就这个问题来写一篇如何用 SpringMVC + AJAX 实现的多文件异步上传功能.基本的代码还是沿用上篇 ...
- DAY12-前端之CSS
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 CSS实例 ...
- FileZilla Server下通过别名设置虚拟目录
说明:FileZilla Server 的虚拟目录设置与其它 FTP 服务器软件有所不同.在 FileZilla Server 中设置虚拟目录,必须采用 FTP 根目录 + 虚拟目录名的形式来进行.比 ...
- 下拉菜单控件JComboBox的使用
---------------siwuxie095 工程名:TestUI 包名:com.siwuxie095.ui 类名:TestList.ja ...