如果想用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 );
控件提供的方法把事件数组推入事件，就可以了在图上显示你的事件了。
补充：vue中的实现
<template>
<div class="work-day-manage">
<h3>工作日管理</h3>
<div class="calendar-wrap">
<FullCalendar defaultView="dayGridMonth"
ref="fullCalendar"
:header="{
left: \'dayGridMonth,timeGridWeek, timeGridDay\',
center: \'title\',
right: \'today prev,next,\'
}"
:events="events"
:eventColor="\'#378006\'"
:eventBackgroundColor="\'#378006\'"
:eventResizableFromStart="true"
@eventClick="handleEventClick"
:editable="true"
:droppable="true"
:selectMirror="true"
:selectAllow="selectAllow"
:unselectAuto="false"
:weekends="true"
:selectable="true"
:locale="zhLocale"
@viewSkeletonRender="viewSkeletonRender"
@dateClick="handleDateClick"
@select="handleDateSelect"
:plugins="calendarPlugins"/>
</div>
</div>
</template>
<script>
import FullCalendar from \'@fullcalendar/vue\'
import dayGridPlugin from \'@fullcalendar/daygrid\'
import interactionPlugin from \'@fullcalendar/interaction\'
import timeGridPlugin from \'@fullcalendar/timegrid\'
import zhLocale from \'@fullcalendar/core/locales/zh-cn\'
import { formatDate } from \'@/utils/common\'
export default {
data() {
return {
defaultView: \'dayGridMonth\',
calendarPlugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
zhLocale,
events: [
// event data...
{
title: \'Event1\',
start: \'2019-08-26 15:00:23\',
end: \'2019-08-26 19:00:00\',
startTime: \'2019-08-26 15:00:23\',
endTime: \'2019-08-26 19:00:00\',
allDay: false,
},
{
title: \'Event2\',
start: \'2019-08-21\',
end: \'2019-08-25\',
allDay: false,
user: \'abc\',
backgroundColor: \'orange\',
className: \'event-bar\',
startTime: \'2019-08-21\',
},
{
title: \'Event3\',
start: \'2019-08-21\',
end: \'2019-08-25\',
allDay: false,
user: \'abc\',
backgroundColor: \'orange\',
className: \'event-bar\',
startTime: \'2019-08-21\',
}
],
}
},
components: {
FullCalendar,
},
mounted() {
console.log(formatDate(new Date(), \'YYYY-MM-DD HH:mm:ss\'))
},
methods: {
viewSkeletonRender(info) {
this.defaultView = info.view.type
},
selectAllow() {
if (this.defaultView === \'dayGridMonth\') {
return false
}
return true
},
handleDateClick(arg) {
console.log(arg)
// arg.dayEl.style.backgroundColor = \'red\'
// arg.dayEl.style.backgroundColor = \'red\'
console.log(this.$refs.fullCalendar.getApi().getEvents())
},
handleDateSelect(arg) {
console.log(arg)
},
handleEventClick(eventInfo) {
console.log(eventInfo.event)
},
}
}
</script>
<style lang="less">
@import \'~@fullcalendar/core/main.css\';
@import \'~@fullcalendar/daygrid/main.css\';
@import \'~@fullcalendar/timegrid/main.css\';
.work-day-manage {
padding: 0 20px;
.calendar-wrap {
width: 1000px;
height: 2000px;
.fc {
}
}
}
</style>
喜欢这篇文章？欢迎打赏~~