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