另一篇講的挺詳細(xì)的：fullCalendar基本使用 榄攀，不過是用原生js寫躺涝。
我將補(bǔ)充基于vue的使用逊笆，以及一些未提到的用法：
安裝引用以及基本使用谋减，見官網(wǎng)如下地址
使用
1艇肴、大體效果選擇
選擇自己想要的大體效果，可在整體效果里查看棉磨，自己想要拖拽江掩、編輯事件、點(diǎn)擊等效果乘瓤，查看對(duì)應(yīng)模塊的效果實(shí)現(xiàn)环形。demo地址
2、Api選擇
全部api都會(huì)在這里顯示：所有api
3衙傀、使用
HTML
<template>
<div class="container">
<div @click="backToday">返回今天</div>
<FullCalendar
class="demo-app-calendar"
ref="fullCalendar" // 做標(biāo)記抬吟，以方便在事件中取用插件中的方法
:plugins="calendarPlugins" // 引入的插件，比如fullcalendar/daygrid统抬，fullcalendar/timegrid引入后才可顯示月火本，周，日
:slotEventOverlap="false" // 事件時(shí)間重合時(shí)聪建，是否覆蓋
defaultView="dayGridMonth" // 默認(rèn)視圖钙畔，設(shè)為dayGridMonth，月日程
locale="zh-cn" // 切換語言金麸，當(dāng)前為中文
:timeGridEventMinHeight="20" //設(shè)置事件的最小高度
:allDaySlot="false" // 周擎析，日視圖時(shí)，all-day 不顯示
:eventLimit="true" //設(shè)置月日程挥下，與all-day slot的最大顯示數(shù)量揍魂，超過的通過彈窗顯示
:eventLimitText="eventLimitText" //設(shè)置超過事件時(shí)的“更多”字樣提示，點(diǎn)擊后顯示彈窗棚瘟，eventLimitText可設(shè)置字樣
:nowIndicator="true" // 當(dāng)前是否有紅線標(biāo)識(shí)
height="parent"
:views="eventLimitNum" // 在views中設(shè)置事件顯示數(shù)量
:displayEventEnd="false" // 是否顯示事件結(jié)束時(shí)間
:slotLabelFormat="{ // 周愉烙，日視圖時(shí)，左側(cè)的顯示的時(shí)間格式解取，以下為：00:00，00:30...5:30
hour: 'numeric',
minute: '2-digit',
omitZeroMinute: false,
meridiem: 'short',
hour12: false
}"
:displayEventTime="false" //是否顯示時(shí)間時(shí)間
:header="{ // 頂部按鈕返顺，以及他們的排列順序
left:'today',
center: 'prev,title,next',
right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
}"
:buttonText="{ // 頂部按鈕的文字顯示
today: '回到今天',
month: '月',
week: '周',
day: '日'
}"
:columnHeaderText="columnHeaderText" // 表格的表頭顯示字樣禀苦，默認(rèn)為sun,mon,tue.... 中文則顯示：周日蔓肯，周一，周二....
:events="calendarEventsNew" // 存放數(shù)據(jù)的入口（面板中顯示的事件振乏，一般我們創(chuàng)建或者獲取到的事件蔗包，按規(guī)定格式放入，即可顯示在面板中）
@datesRender="datesRender" // 日期渲染時(shí)慧邮，觸發(fā)的事件调限，默認(rèn)傳入info,一個(gè)包含view和el的對(duì)象
:selectable="true" //是否支持選擇
@eventPositioned="eventPositioned" //事件被放置在日歷的最終位置后觸發(fā)∥蟀模可在此調(diào)整事件的存放位置
@eventClick="eventClick" // 事件被點(diǎn)擊時(shí)觸發(fā)
@eventMouseEnter="eventMouseEnter" // 劃入事件時(shí)觸發(fā)
/>
</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 }, // 引入后注冊(cè)
data() {
return {
calendarPlugins: [// 插件引入后在此聲明后耻矮，才可使用
// plugins must be defined in the JS
dayGridPlugin,
timeGridPlugin,
interactionPlugin // needed for dateClick
],
eventLimitNum: {
// 事件顯示數(shù)量限制
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('事件被放置在日歷的最終位置后觸發(fā)')
},
eventLimitText() {
return '更多,或者其他字樣'
},
datesRender(info) {
console.log('當(dāng)呈現(xiàn)一組新的日期時(shí)觸發(fā)。')
},
eventMouseEnter({ el, event }) { //可從info中解構(gòu)我們需要的東西
console.log('劃入事件時(shí)觸發(fā)忆谓。')
}裆装，
// ...
// 獲取插件中的方法，比如回到今天的today()方法,下面的為自定義的
backToday() {
let calendarApi = this.$refs.fullCalendar.getApi() //通過getApi()方法獲取
calendarApi.today() //調(diào)用回到今天的today()方法
},
}
}
CSS
需要引入相應(yīng)的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中，配合使用時(shí)昙沦，劃入日程event中琢唾，會(huì)同時(shí)觸發(fā)eventMouseEnter與eventMouseLeave，而且會(huì)多次重復(fù)盾饮，經(jīng)查看是因?yàn)樵趀ventMouseEnter與eventMouseLeave改變了數(shù)據(jù)（然而就是要通過觸發(fā)它來改變數(shù)據(jù) 的【手動(dòng)白眼】）采桃，用原生js則不會(huì)出現(xiàn)這個(gè)問題。
