一、安装

npm install vue-full-calendar

二、使用步骤

1、main.js全局引入

import FullCalendar from 'vue-full-calendar'

Vue.use(FullCalendar)

 

或者在需要用到的组件中局部引入，需要注册和引入样式：

import { FullCalendar } from 'vue-full-calendar'
import 'fullcalendar/dist/fullcalendar.css'

components : { FullCalendar},

 

2、使用

<template>

<div>

<full-calendar
    :config="config"
    ref="calendar"
    :events='events'
    @event-selected = 'eventClick'// 点击事件的事件，可自己定义事件
    @day-click="dayClick">   // 点击当天的事件，可自己定义事件  
</full-calendar>

</template>

 

3、配置数据

config是日历的基本配置

3、事件返回的值，可依照以下格式（可以添加值，显示出来的值，可从插件中自行修改）

events: [

    {

      title : 'eeeeeeeee',  // 事件内容

      start : '2018-12-11', // 事件开始时间

      end : '2018-12-30',   // 事件结束时间

       },

 

 

4、修改点击事件（添加删除等功能，可以通过插件所给事件自行修改）

// 点击事件
eventClick(event){
    this.checkedDate = event.start._i
    this.id=event.id;
    this.shownewdialog=true;
},

 

5、效果图