作者：zlf_j
鏈接：http://www.reibang.com/p/3e652dc44633
來源：簡書
著作權(quán)歸作者所有嘀略。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
引用怕自己找不到
一趁啸、下載
npm install vue-fullcalendar
http://www.reibang.com/p/1b4858e06662
二、顯示在頁面上
1、main.js
import FullCalendar from 'vue-fullcalendar'
Vue.use(FullCalendar)
2算柳、用到日歷的組件
<template>
<div>
<full-calendar :events="monthData" class="test-fc"
first-day='1' locale="fr"
@changeMonth="changeMonth" // 切換月時的事件，可自己定義事件
@eventClick="eventClick" // 點擊當天的事件姓言，可自己定義事件
@dayClick="dayClick" // 點擊當月的事件瞬项，可自己定義事件
@moreClick="moreClick"></full-calendar> // 點擊 more, 展示當天所有事件，可自己定義事件
</div>
</template>
<script>
import { FullCalendar } from 'vue-fullcalendar'
export default {
data() {
return {
monthData: []
}
},
methods: {
// 選擇月份
changeMonth (start, end, current) {
console.log('changeMonth', start.format(), end.format(), current.format())
},
// 點擊事件
eventClick (event, jsEvent, pos) {
console.log('eventClick', event, jsEvent, pos)
},
// 點擊當天
dayClick (day, jsEvent) {
console.log('dayClick', day, jsEvent)
},
// 查看更多
moreClick (day, events, jsEvent) {
console.log('moreCLick', day, events, jsEvent)
},
},
components: {
'full-calendar': require('vue-fullcalendar')
},
</script>
參考：https://github.com/Wanderxx/vue-fullcalendar
3何荚、事件返回的值囱淋，可依照以下格式（可以添加值，顯示出來的值餐塘，可從插件中自行修改）
monthData: [
{
title : 'eeeeeeeee', // 事件內(nèi)容
start : '2018-12-11', // 事件開始時間
end : '2018-12-30', // 事件結(jié)束時間
cssClass: 'red' // 事件的樣式 class名（由后臺返回數(shù)據(jù)） red為自己定義的class名
},
{
title : 'sssss',
start : '2018-12-25',
end : '2018-12-30',
cssClass: 'blue'
},
{
title : 'dddddddd',
start : '2018-12-09',
end : '2018-12-30',
cssClass: 'blue'
},
{
title : 'cccccc',
start : '2018-12-20',
end : '2018-12-30'
cssClass: 'red'
},
{
title : 'aaaaaa',
start : '2018-12-01',
end : '2018-12-30',
cssClass: 'red'
},
{
title : 'bbbbbb',
start : '2018-12-05',
end : '2019-1-10',
cssClass: 'blue'
}
]
<style>
.red {
background: red;
}
.blue {
background: blue;
}
</style>
4妥衣、修改點擊事件（添加刪除等功能，可以通過插件所給事件自行修改）
5戒傻、插件顯示效果
6税手、注意：
如果要修改插件內(nèi)容的話，盡量不要通過下載引入需纳，可在改完后芦倒，將插件引入assets中（即在本地引入），以防代碼更新覆蓋掉已修改的內(nèi)容不翩。
個人用法
npm install vue-fullcalendar 下載插件熙暴，只引用node_modules/vue-fullcalendar/src文件夾，改名為vue-fullcalendar
修改下載的插件慌盯，并在本地引入（不是全局引入），是為了防止 npm install 覆蓋掉修改
的內(nèi)容掂器。-
按以下結(jié)構(gòu)引入了src/assets中
image 可以執(zhí)行 npm uninstall vue-fullcalendar 將下載的日歷插件刪掉（不需要全局調(diào)用）
引用日歷的組件
import FullCalendar from '../../../../assets/vue-fullcalendar/fullCalendar.vue'
export default {
......
components: {
'full-calendar': FullCalendar
},
}
- 修改案例：（改本地引入的vue-fullcalendar）
1亚皂、修改 點擊更多時，顯示的內(nèi)容及樣式 （body.vue）
判斷顯示title還是content值国瓮，cssClass為后臺返回灭必，用于自定義樣式image
// 當前日歷的數(shù)據(jù)（后臺返回）
[{
content: "BBB [ 研發(fā)3 ] 002003 / 難度：D / 結(jié)束時間：2019-05-23"
cssClass: "B"
end: "2019-05-23"
field_shot_number: "002003"
id: 1154
project_id: 4
start: "2019-03-26"
status: 1
title: "BBB [ 研發(fā)3 ] 002003"
type: 0
}]
// 代碼
<div class="more-body">
<ul class="body-list">
<li v-for="event in selectDay.events"
v-show="event.isShow" :class="event.cssClass"
@click="dayClick(event,$event)">
{{event.content ? event.content: event.title}}
</li>
</ul>
</div>
2狞谱、修改 日歷中的 more，改為當天事件個數(shù)（body.vue）
image
// 代碼
<!--顯示條數(shù)-->
<p v-if="day.events.length > eventLimit"
class="more-link" @click.stop="selectThisDay(day, $event)">
{{day.events.length - getEventsLength(day.events)}} 條
</p>
<!--獲取事件個數(shù)-->
methods : {
getEventsLength (events) {
let arr = []
events.forEach((item, index) => {
if (item.isShow == false) {
arr.push(item)
}
}, this)
return arr.length
}
}
3禁漓、修改日歷中的中文英文
image
4跟衅、修改日歷上的內(nèi)容（body.vue）
文章用以下方法定義內(nèi)容
{{isBegin(event, day.date, day.weekDay)}}imageimageevent.title即為日歷上展示的文字，后臺返回數(shù)據(jù)時播歼，可以用title直接返回伶跷，也可以自己定義參數(shù)名∶啬可以參考上面的數(shù)據(jù)結(jié)構(gòu)
5叭莫、修改點擊日歷事件，彈框展示的數(shù)據(jù)（直接修改插件body.vue中的如圖部分）
- 報錯：
failed to mount component :template or render function
- 解決辦法：
修改 fc-body和fc-header的引入方法：
fullCalendar.vue
import header from './components/header.vue'
import body from './components/body.vue'
export default {
components : {
'fc-body' : body,
'fc-header' : header
}
}
