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
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。