js jquery 实现 排班,轮班,日历,日程。使用fullcalendar 插件
如果想用fullcalendar实现排班功能,或者日历、日程功能。那么只需要简单的几步:
这里先挂官网链接:
fullcalendar
fullcalendar官网下载链接
一、下载及简单配置
1、这里先明确你想要的是哪种形式式:fullcalendar 提供多种日历形式:
你们可以在官网首页的演示里面看到,在这里我主要讲一下我这里使用的两种实现:
(1)日历模式(只是用fullcalendar实现)
(2)时间轴模式(除了fullcalendar还用了官网的另一个插件叫schedule
在下载了fullcalendar之后将其引入你自己的项目,只需要进行很简单的配置就可以进行使用了。
这是需要运行插件的几个基本的配置,将其引入页面
<link rel='stylesheet' href='fullcalendar/fullcalendar.css' />
<script src='lib/jquery.min.js'></script>
<script src='lib/moment.min.js'></script>
<script src='fullcalendar/fullcalendar.js'></script>
此处需要注意的是jquery和moment的js必须在fullcalendar的js之前引入。如果你也想做时间轴模式的日历,并且已经下载了schedule的话,那么你需要在在页面中引入schedule的js和css
也就是说不但要引入fullcalendar的还要引入schedule的。
<link href='fullcalendar.css' rel='stylesheet' />
<link href='scheduler.css' rel='stylesheet' />
<script src='moment.js'></script>
<script src='jquery.js'></script>
<script src='fullcalendar.js'></script>
<script src='scheduler.js'></script>
之后在页面定义一个div 这个div会被渲染成日历插件比如我建立一个div
<div id='calendar'></div>
那么这时候就可以在js中进行配置了
$('#calendar').fullCalendar({defaultView: 'month',height: 'auto',header: false,displayEventTime:true,displayEventEnd:true,weekMode:"liquid",aspectRatio:2,allDaySlot:false,timeFormat: 'HH:mm',locale:'zh-cn',})
这其中的一些配置根据自己的需求来定,具体官方文档
需要说明的是fullcalendar提供schedule的免费使用,不过在插件上会有水印。要想去掉水印可以在配置中加上这一句
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
加在上面的配置里就可以。
这样运行之后你可以得到一个日历了
其中的defaultView是决定显示是月 还是年 或者是星期的。对于fullcalendar有以下几种取值:
month
basicWeek
basicDay
agendaWeek
agendaDay
listYear
listMonth
listWeek
listDay
如果你同时下载了schedule想要以小时来分割每日的时间那么你可以使用以下几种视图:
timelineDay
timelineWeek
timelineMonth
timelineYear
当然你也可以自定义视图 具体看文档自定义视图
这里我写一个例子
views: {agendaFourDay: {type: 'timeline',duration: { days: 4 },buttonText: '4 day'},},
这里我设置了一个4天的区间,表明在这种模式下,我的日历显示跨度为四天。然后设置defaultView:agendaFourDay,就好了。完整写就是这样。
$('#calendar').fullCalendar({defaultView: 'agendaFourDay',height: 'auto',header: false,displayEventTime:true,displayEventEnd:true,weekMode:"liquid",aspectRatio:2,allDaySlot:false,timeFormat: 'HH:mm',locale:'zh-cn',views: {agendaFourDay: {type: 'timeline',duration: { days: 4 },buttonText: '4 day'},},})
除了一开始在配置中写好,fullcalendar提供方法可以在js中更改视图,这样就能自定义按钮来控制视图了
$('#calendar').fullCalendar("changeView","basicDay ");
这样就把视图类型更改为basicDay 了。
当然上述配置也可以在js中修改。体现在代码里就是
上面是一个例子 底下是格式。
$('#calendar').fullCalendar('option','height',"600")
$('#calendar').fullCalendar('option','属性',"属性值")
改代码把日历的高度定义为600px。
还有很多种方法 参看文档的(method)
以下就完成了插件的基本配置。
二、往插件里传数据
以下是我向日历里传数据的方法
function drawCalendar(data) {$('#calendar').fullCalendar( 'removeEvents');var events=[];for(var i=0, len=data.length; i<len; i++){var timeDate=data[i];//如果非整天时间,则显示时分数据var isallDay=true;if(timeDate["end"] !=null && timeDate["start"] != null){if(moment(timeDate["start"].replace(" ","T")).format("HH:mm") !== "00:00" || moment(timeDate["end"].replace(" ","T")).format("HH:mm") !== "00:00"){isallDay = false;}}var item={title : timeDate["title"],start : timeDate["start"].replace(" ","T"),className : "event-bar",allDay : isallDay,end : timeDate["end"]==null ? "" : timeDate["end"].replace(" ","T"),backgroundColor : getCalendarColor(timeDate["user"]),user : timeDate["user"],startTime : timeDate["startTime"],endTime : timeDate["endTime"]};events.push(item);}$('#calendar').fullCalendar( 'addEventSource', events );
}
其中
$('#calendar').fullCalendar( 'removeEvents');
是用来先移除原来控件中的事件的。
event是事件数组,事件就是图里面一条一条的,把item(下面的属性各项,有设置事件条的颜色的,也有设置开始结束时间的,与英文意思相同这里不多做解释,有不懂得可以在评论中问我)
var item={title : timeDate["title"],start : timeDate["start"].replace(" ","T"),className : "event-bar",allDay : isallDay,end : timeDate["end"]==null ? "" : timeDate["end"].replace(" ","T"),backgroundColor : getCalendarColor(timeDate["user"]),user : timeDate["user"],startTime : timeDate["startTime"],endTime : timeDate["endTime"]};
推入事件数组。
再用
$('#calendar').fullCalendar( 'addEventSource', events );
控件提供的方法把事件数组推入事件,就可以了在图上显示你的事件了。
具体有很多细节的东西会在我别的博客中展现。
希望这篇文章对你有用。本文为原创,转载请附加我的博客链接,谢谢。
如果有疑问请在下面留言~~~
js jquery 实现 排班,轮班,日历,日程。使用fullcalendar 插件相关推荐
- js 排班插件_js jquery 实现 排班,轮班,日历,日程。使用fullcalendar 插件
如果想用fullcalendar实现排班功能,或者日历.日程功能.那么只需要简单的几步: 这里先挂官网链接: fullcalendar fullcalendar官网下载链接 一.下载及简单配置 1.这 ...
- php日历排班表,日历排班表软件下载
日历排班表软件app是一款掌上智能排版助手.日历排班表软件app主要为有倒班.值班需求的工作人员提供智能排班功能,您可以通过日历排班表软件app输入对应的数据,就可以精准算出自己的上班.值班时间,非常 ...
- java 排班日历_快速简化排班(智能排班)-日历排班
在前面的文章中,我们详细探讨了传统模式下的排班问题,流程很简单,但有些企业班别较多(比如有20个班别),而且每个班别都需要设定一个周末和假日班(这就变成了60个甚至更多班别,比如有些班别周六和周日的判 ...
- js 排班插件_排班小程序
更新记录 1.0.5(2020-11-04) 修改源码版发布 1.0.3(2020-11-04) 添加源码版授权 查看更多 云函数类插件通用教程 使用云函数类插件的前提是:使用HBuilderX 2. ...
- vue之排班日历的 实现
这里写自定义目录标题 vue之排班日历的 实现 index.vue 排班日历组件 calendar.vue calendar.js vue之排班日历的 实现 查询日期和数据,展示对于的排班日历,蓝色为 ...
- 尚医通(十五)医院排班管理
目录 一.医院排班管理需求 1.页面效果 2.接口分析 二.科室列表(接口) 1.添加service接口和实现 2.添加DepartmentController方法 三.科室列表(前端) 1.添加隐藏 ...
- 前端ui组件(1):日程排班—11个优秀JavaScript 日历插件
日历是我们生活中重要的一部分.在当今世界,人们大多使用网络或移动日历.它们随处可见,包括在各种软件中:预订应用.旅行软件.项目管理.管理面板等. 出于多种原因,用户可能需要在网站上使用日历.用户需要容 ...
- php日历排班表,排班表 : 轮班工作者必备的排班神器
排班表是一款实用的排班软件, 它帮助有规律轮班的人群清晰记录白班.夜班.休息时间,并用多种颜色.图标进行标注,解决繁琐的排班问题.支持同步到系统日历和通知中心下拉查看,还支持农历和起床闹钟. 清晰易用 ...
- Jeesite引用fullcalendar实现日程排班
Jeesite引用fullcalendar实现日程排班: 备注:fullcalendar不同的jar版本,使用方式不同,此次使用的是1.6版本. 参考一:eventClick triggering - ...
最新文章
- Window7 安装开源swf反编译软件JPEXS Free Flash Decompiler(FFdec)实录
- 神策数据:从技术视角看,如何更多、更好、更快地实施A/B试验
- AS3.0第一个实例:(Hello World)
- 1224 哥德巴赫猜想(2)
- java is a like a_JAVA基础——is-a 、have-a、和 like-a的区别
- 坑爹的公交卡充值的流程
- linux 源码安装node 9,linux如何安装node?
- 云计算学习笔记002---云计算的理解及介绍,google云计算平台实现原理
- 【免费毕设】ASP.NET电子购物商城系统(源代码+lunwen)
- win11安装助手闪退怎么办 Windows11安装助手闪退的解决方法
- es6基础(4)--字符串扩展
- 74ls161中rco是什么_催化燃烧RCO设备多少钱?为什么价格差别如此之大?
- adsl拨号服务器构建代理池
- IP地址和交换机原理
- 2022校园春季招聘自带内推码投递链接合集
- 处女座女的爱情黑暗面 水瓶座男不爱你的表现是什么
- 电路原理 | 非线性电阻电路的小信号法,动态电路电感
- MySQL:账户管理
- 一般计算机电源都在什么服务,1u工控服务器电源与普通电脑电源能互用吗
- 视频话题识别与跟踪 - demo 【问题总结1.1-视频处理】