vue-fullcalendar 用法詳解 （vue 2.0的日歷插件）

原文：https://www.jianshu.com/p/3e652dc44633

一、下載

npm install vue-fullcalendar

https://www.jianshu.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', // 事件內容 start : '2018-12-11', // 事件開始時間 end : '2018-12-30', // 事件結束時間 cssClass: 'red' // 事件的樣式 class名（由后台返回數據） 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、插件顯示效果

 

vue-fullcalendar.png

6、注意：

如果要修改插件內容的話，盡量不要通過下載引入，可在改完后，將插件引入assets中（即在本地引入），以防代碼更新覆蓋掉已修改的內容。

個人用法

• npm install vue-fullcalendar 下載插件，只引用node_modules/vue-fullcalendar/src文件夾，改名為vue-fullcalendar
• 修改下載的插件，並在本地引入（不是全局引入），是為了防止 npm install 覆蓋掉修改
  的內容。

• 按以下結構引入了src/assets中

  
  
   

  

  屏幕快照 2019-04-08 上午10.46.45.png
• 可以執行 npm uninstall vue-fullcalendar 將下載的日歷插件刪掉（不需要全局調用）
• 引用日歷的組件

import FullCalendar from '../../../../assets/vue-fullcalendar/fullCalendar.vue' export default { ...... components: { 'full-calendar': FullCalendar }, } 

• 修改案例：（改本地引入的vue-fullcalendar）

1、修改 點擊更多時，顯示的內容及樣式 （body.vue）
判斷顯示title還是content值，cssClass為后台返回，用於自定義樣式

 

屏幕快照 2019-04-08 上午10.57.34.png

// 當前日歷的數據（后台返回） [{ content: "BBB [ 研發3 ] 002003 / 難度：D / 結束時間：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 [ 研發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> 

 

屏幕快照 2019-04-08 上午11.12.21.png

2、修改 日歷中的 more，改為當天事件個數（body.vue）

 

屏幕快照 2019-04-08 上午11.05.29.png

// 代碼
<!--顯示條數--> <p v-if="day.events.length > eventLimit" class="more-link" @click.stop="selectThisDay(day, $event)"> {{day.events.length - getEventsLength(day.events)}} 條 </p> <!--獲取事件個數--> methods : { getEventsLength (events) { let arr = [] events.forEach((item, index) => { if (item.isShow == false) { arr.push(item) } }, this) return arr.length } } 

 

屏幕快照 2019-04-08 上午11.12.34.png

3、修改日歷中的中文英文

 

屏幕快照 2019-06-05 上午11.07.53.png

4、修改日歷上的內容（body.vue）
文章用以下方法定義內容
{{isBegin(event, day.date, day.weekDay)}}

 

屏幕快照 2019-07-03 下午12.48.42.png

 

屏幕快照 2019-07-03 下午12.53.46.png

event.title即為日歷上展示的文字，后台返回數據時，可以用title直接返回，也可以自己定義參數名。可以參考上面的數據結構

5、修改點擊日歷事件，彈框展示的數據（直接修改插件body.vue中的如圖部分）

 

屏幕快照 2019-07-08 下午5.06.40.png

• 報錯：

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 } }

作者：zlf_j
鏈接：https://www.jianshu.com/p/3e652dc44633
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。