另一篇讲的挺详细的：fullCalendar基本使用 ，不过是用原生js写。
我将补充基于vue的使用，以及一些未提到的用法：
安装引用以及基本使用，见官网如下地址
使用
1、大体效果选择
选择自己想要的大体效果，可在整体效果里查看，自己想要拖拽、编辑事件、点击等效果，查看对应模块的效果实现。demo地址
2、Api选择
全部api都会在这里显示：所有api
3、使用
HTML
<template>
<div class="container">
<div @click="backToday">返回今天</div>
<FullCalendar
class="demo-app-calendar"
ref="fullCalendar" // 做标记，以方便在事件中取用插件中的方法
:plugins="calendarPlugins" // 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
:slotEventOverlap="false" // 事件时间重合时，是否覆盖
defaultView="dayGridMonth" // 默认视图，设为dayGridMonth，月日程
locale="zh-cn" // 切换语言，当前为中文
:timeGridEventMinHeight="20" //设置事件的最小高度
:allDaySlot="false" // 周，日视图时，all-day 不显示
:eventLimit="true" //设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示
:eventLimitText="eventLimitText" //设置超过事件时的“更多”字样提示，点击后显示弹窗，eventLimitText可设置字样
:nowIndicator="true" // 当前是否有红线标识
height="parent"
:views="eventLimitNum" // 在views中设置事件显示数量
:displayEventEnd="false" // 是否显示事件结束时间
:slotLabelFormat="{ // 周，日视图时，左侧的显示的时间格式，以下为：00:00，00:30...5:30
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
meridiem: 'short',
hour12: false
}"
:displayEventTime="false" //是否显示时间时间
:header="{ // 顶部按钮，以及他们的排列顺序
left:'today',
center: 'prev,title,next',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
}"
:buttonText="{ // 顶部按钮的文字显示
today: '回到今天',
month: '月',
week: '周',
day: '日'
}"
:columnHeaderText="columnHeaderText" // 表格的表头显示字样，默认为sun,mon,tue.... 中文则显示：周日，周一，周二....
:events="calendarEventsNew" // 存放数据的入口（面板中显示的事件，一般我们创建或者获取到的事件，按规定格式放入，即可显示在面板中）
@datesRender="datesRender" // 日期渲染时，触发的事件，默认传入info,一个包含view和el的对象
:selectable="true" //是否支持选择
@eventPositioned="eventPositioned" //事件被放置在日历的最终位置后触发。可在此调整事件的存放位置
@eventClick="eventClick" // 事件被点击时触发
@eventMouseEnter="eventMouseEnter" // 划入事件时触发
/>
</div>
</template>
引入
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
JS
export default {
components: { FullCalendar }, // 引入后注册
data() {
return {
calendarPlugins: [// 插件引入后在此声明后，才可使用
// plugins must be defined in the JS
dayGridPlugin,
timeGridPlugin,
interactionPlugin // needed for dateClick
],
eventLimitNum: {
// 事件显示数量限制
dayGrid: {
eventLimit: 6
},
timeGrid: {
eventLimit: 2 // adjust to 6 only for timeGridWeek/timeGridDay
}
},
columnHeaderText: function(date) {
let day = date.getDay()
let map = {
0: '周日',
1: '周一',
2: '周二',
3: '周三',
4: '周四',
5: '周五',
6: '周六'
}
return map[day]
},
calendarEvents: [
// 面板中的事件
]
}
},
methods: {
eventPositioned(info) {
console.log('事件被放置在日历的最终位置后触发')
},
eventLimitText() {
return '更多,或者其他字样'
},
datesRender(info) {
console.log('当呈现一组新的日期时触发。')
},
eventMouseEnter({ el, event }) { //可从info中解构我们需要的东西
console.log('划入事件时触发。')
}，
// ...
// 获取插件中的方法，比如回到今天的today()方法,下面的为自定义的
backToday() {
let calendarApi = this.$refs.fullCalendar.getApi() //通过getApi()方法获取
calendarApi.today() //调用回到今天的today()方法
},
}
}
CSS
需要引入相应的css文件
<style lang='scss'>
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/timeline/main.css';
@import '~@fullcalendar/resource-timeline/main.css';
</style>
4、踩坑
事件hover效果： eventMouseEnter
与 eventMouseLeave，在vue中，配合使用时，划入日程event中，会同时触发eventMouseEnter与eventMouseLeave，而且会多次重复，经查看是因为在eventMouseEnter与eventMouseLeave改变了数据（然而就是要通过触发它来改变数据 的【手动白眼】），用原生js则不会出现这个问题。
