如果想用fullcalendar实现排班功能，或者日历、日程功能。那么只需要简单的几步：

这里先挂官网链接：

fullcalendar

fullcalendar官网下载链接

一、下载及简单配置

1、这里先明确你想要的是哪种形式式：fullcalendar 提供多种日历形式：

你们可以在官网首页的演示里面看到，在这里我主要讲一下我这里使用的两种实现：

(1)日历模式(只是用fullcalendar实现)

(2)时间轴模式(除了fullcalendar还用了官网的另一个插件叫schedule

在下载了fullcalendar之后将其引入你自己的项目，只需要进行很简单的配置就可以进行使用了。

这是需要运行插件的几个基本的配置，将其引入页面

此处需要注意的是jquery和moment的js必须在fullcalendar的js之前引入。如果你也想做时间轴模式的日历，并且已经下载了schedule的话，那么你需要在在页面中引入schedule的js和css

也就是说不但要引入fullcalendar的还要引入schedule的。

之后在页面定义一个div 这个div会被渲染成日历插件比如我建立一个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)

以下就完成了插件的基本配置。

二、往插件里传数据

以下是我向日历里传数据的方法

functiondrawCalendar(data) {

$('#calendar').fullCalendar( 'removeEvents');var events=[];for(var i=0, len=data.length; 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中的实现

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)

},

}

}

@import'~@fullcalendar/daygrid/main.css';

@import'~@fullcalendar/timegrid/main.css';

.work-day-manage {

padding:020px;

.calendar-wrap {

width: 1000px;

height: 2000px;

.fc {

}

}

}