最终效果：

 安装过程：

1、下载

npm install vue-fullcalendar

2、main.js引用

import FullCalendar from 'vue-fullcalendar'
Vue.use(FullCalendar)

3、vue中使用

<template>
  <div>
    <full-calendar
      :events="monthData"
      class="test-fc"
      first-day="1"
      locale="fr"
      @changeMonth="changeMonth"
      @eventClick="eventClick"
      @dayClick="dayClick"
      @moreClick="moreClick"
      lang="zh"
    ></full-calendar>
  </div>
</template>

<script>
import { FullCalendar } from "vue-fullcalendar";
export default {
  data() {
    return {
      monthData: [
        {
          title: "调查活动", // 事件内容
          start: "2021-09-06", // 事件开始时间
          end: "2021-09-07", // 事件结束时间
          cssClass: "red" // 事件的样式   class名（由后台返回数据）  red为自己定义的class名
        }
      ]
    };
  },
  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>
<style scoped>
.red {
  background: red;
}
.blue {
  background: blue;
}
</style>

1. 首先下载安装所需要的包

   	npm i @fullcalendar/daygrid  @fullcalendar/interaction @fullcalendar/vue
   

2. 引入到当前vue 组件中

   import FullCalendar from "@fullcalendar/vue";
   import dayGridPlugin from "@fullcalendar/daygrid";
   import interactionPlugin from "@fullcalendar/interaction";
   

3. 注册组件

       <FullCalendar :options="calendarOptions" />
   

     components: {
       FullCalendar,
     },
   

4. 配置参数

calendarOptions: {
        locale: "zh", // 中文
        buttonText: {
          // 按钮文本
          today: "今天",
          month: "月视图",
          week: "周视图",
          //   day: "日视图",
        },
        plugins: [dayGridPlugin, interactionPlugin],
        headerToolbar: {
          left: "prev,next today", // 左侧按钮  点击触发对应顺序的字符串代表的事件
          center: "title", // 中间标题
          right: "dayGridMonth,dayGridWeek", // 右侧按钮 点击触发对应顺序的字符串代表的事件
        },
        initialView: "dayGridMonth",  // 初始化 开始视图类型
        editable: false,  // 是否可以拖拽编辑
        selectable: true, 
        dateClick: this.handleDateClick, // 点击日期触发事件
        events: [ // 存储 添加的日程
	        {title: "放假",
	         start:"2021-03-05",
	         end:"2021-03-08",  // 结束日期（不包含当天）
	         id: "bianhao1111",
	         color: "#f00",
	         }
		], 
        eventClick: this.handleEventClick, // 点击 添加的日程触发事件
      },

5. 效果图如下所示
   

前言

之前在做web管理端界面的时候，有一个需求。需要写一个排班的日历表。在网上找了一波，发现了fullcalendar插件，但是在使用过程中也遇到了很多坑。现在排坑完成，分享出来，大家一起进步！

安装插件包

1.在网上看到许多案例都是直接安装
npm install vue-fullcalendar
这样的方法的确包安装成功了，但是在引入Css样式的时候却出现错误，去包里面查看，发现缺少了main.css文件。后面下载了很多案例，终于找到了一个完整的安装包。
2.完整安装包，复制到package.json下的dependencies里面，再npm i

  "@fullcalendar/core": "^4.3.1",
   "@fullcalendar/daygrid": "^4.3.0",
   "@fullcalendar/interaction": "^4.3.0",
   "@fullcalendar/timegrid": "^4.3.0",
   "@fullcalendar/vue": "^4.3.1",

3.使用方法
在想要使用插件的script中，引入

import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

然后，引入组件

 components: {
    FullCalendar,
  },
  data () {
    return {
    isshow:false,
    devices:[],
    text:"",
    isAdd:null,
      buttonText: {
        today: '今天',
        month: '月',
        week: '周',
        day: '天',
        list: '列表'
      },
      calendarPlugins: [ // plugins must be defined in the JS
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin // needed for dateClick
      ],
      calendarWeekends: true,
      calendarEvents: [ // initial event data
        
      ],
      calendarApi: null
    }
  },

最后在templete中引用

 <FullCalendar
      ref="fullCalendar"
      defaultView="dayGridMonth"
      locale="zh-cn"
      :header="{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      }"
      :showNonCurrentDates="false"
      :buttonText="buttonText"
      :plugins="calendarPlugins"
      :weekends="calendarWeekends"
      :events="getCalendarEvents"
      :eventLimit="true"
      eventLimitText="更多"
      @dateClick="handleDateClick"
      @eventClick="handleEventClick"
      @eventMouseEnter="detailView"
      @eventMouseLeave="move"
      />

完整代码

<template>
  <div>
    <div class="main">
    <div v-show="isshow" class="info">{{text}}</div>
      <FullCalendar
      ref="fullCalendar"
      defaultView="dayGridMonth"
      locale="zh-cn"
      :header="{
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
      }"
      :showNonCurrentDates="false"
      :buttonText="buttonText"
      :plugins="calendarPlugins"
      :weekends="calendarWeekends"
      :events="getCalendarEvents"
      :eventLimit="true"
      eventLimitText="更多"
      @dateClick="handleDateClick"
      @eventClick="handleEventClick"
      @eventMouseEnter="detailView"
      @eventMouseLeave="move"
      />
    </div>

  </div>
</template>

<script >
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import edit from "./edit"

export default {
  name: "Frequency",
  components: {
    FullCalendar,
           edit
  },

  data () {
    return {
    isshow:false,
    devices:[],
    text:"",
    isAdd:null,
      buttonText: {
        today: '今天',
        month: '月',
        week: '周',
        day: '天',
        list: '列表'
      },
      calendarPlugins: [ // plugins must be defined in the JS
        dayGridPlugin,
        timeGridPlugin,
        interactionPlugin // needed for dateClick
      ],
      calendarWeekends: true,
      calendarEvents: [ // initial event data
        
      ],
      calendarApi: null
    }
  },
  methods: {
        dev(){
                this.$frequency.getName().then(resp=>{
                    if(resp.data.code==200){
                       this.devices=resp.data.data
                    }
                })
            },
       
    getCalendarEvents (info, successCallback, failureCallback) {
      const events = [
        ...this.calendarEvents,
      
      ]
      successCallback(events)
    },
    toggleWeekends () {
      this.calendarWeekends = !this.calendarWeekends // update a property
    },
    gotoPast () {
      this.calendarApi.gotoDate('2019-08-01') // call a method on the Calendar object
    },
    detailView(event){
        console.log(event)
        this.isshow=true
        this.text=event.event.title
       
    },
    handleDateClick (arg) {
        console.log(arg)
         this.isAdd=true;
                  this.$layer.iframe({
                    shadeClose: false,
                    content: {
                    content: edit, //传递的组件对象
                    parent: this, //当前的vue对象
                    shadeClose: false,
                     data: {
                    dateStr:arg.dateStr
                    }
                    },
                    title: "排班",
                });
      this.calendarApi.refetchEvents()
    },
    move(){
        this.isshow=false
    },
    handleEventClick (info) {
        console.log(info)
         this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            let params={
                id:info.event.id
            }
            this.$frequency.delete(params).then(resp=>{
                if(resp.data.code==200){
                     this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.getFrequencyList();
                //   this.calendarApi.refetchEvents()
                }
            })

         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
       
       },
    parserDate(date) {
      var t = Date.parse(date)
      if (!isNaN(t)) {
        return new Date(Date.parse(date.replace(/-/g, '/')))
      }
    },
    getFrequencyList(){
        this.$frequency.getFrequencyList().then(resp=>{
            if(resp.data.code==200){
                console.log("拿到数据",resp.data.data)
                 this.calendarEvents=[]
                resp.data.data.forEach(element => {
                    let obj={};
                    obj.title=element.teamName+":"+element.startTime+"-"+element.endTime+"备注:"+element.remark
                    obj.start=this.parserDate(element.date)
                    obj.allDay=true,
                    obj.id=element.id
                    this.calendarEvents.push(obj)

                });
                // console.log("push进去",this.calendarEvents)
                console.log("是否进入")
                this.calendarApi.refetchEvents()
            }
        })
    }
  },
  mounted () {
   
    this.dev()
    this.calendarApi = this.$refs.fullCalendar.getApi();
  },
  created(){
       this.getFrequencyList();
  }
};
</script>

<style lang="scss" scoped>
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
@import '~@fullcalendar/timegrid/main.css';
.main {
  margin: 10px;
  text-align: center;
  background: #fff;
  padding: 10px;
}
.info{
    min-height: 50px;
    min-width: 300px;
    line-height: 30px;
    position:fixed;
    top:0px;
    left: 43%;
    color:forestgreen;
    background: rgba(173,255,47,.2);
}
</style>

我做出来的效果