先上效果图

1.安装，因产品需求，只需要显示天视图和周 视图。

npm install --save "@fullcalendar/core"
npm install --save "@fullcalendar/interaction"
npm install --save "@fullcalendar/timegrid"
npm install --save "@fullcalendar/vue"

2.引入

import FullCalendar from "@fullcalendar/vue";
import timeGridPlulgin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import "@fullcalendar/core/main.css";
//import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";

components: {
    FullCalendar
  },

3.编写组件

  <FullCalendar
              id="fullCalendar2"
              ref="fullCalendar2"
              defaultView="timeGridDay"  //emmmm 默认视图
              :defaultDate="defaultDate" //默认时间
              locale="zh-cn"//中文
              firstDay="1"
              :buttonText="buttonText"//按钮的中文
              weekNumberCalculation="ISO"
              :eventTimeFormat="evnetTime" //每个单元格时间格式
              :slotLabelFormat="slotLabelFormat" //左侧时间格式
              :header="header"//头部按钮
              :custom-buttons="customButtons" //自定义按钮事件
              :plugins="calendarPlugins" //emmm ，忘记是 什么了但是一定要有
              :events="calendarEvents" //数据
              minTime="08:00"
              maxTime="23:00"
              @dateClick="handleDateClick" //切换时间的事件
              @eventClick="handleEventClick" //点击单元格的事件
            />
            //有一些属性是我真的想不起来了，也是这个项目可能用不到，没有去研究
            https://www.helloweba.net/javascript/445.html 这个是中文api链接，里面有很全面的api
            以及属性介绍 ， 但是是jq的！！！！！！！

4.data中的属性配置

划重点 this.$refs.fullCalendar2.getApi()通过这个可以调用到插件的api

   calendarPlugins: [interactionPlugin, timeGridPlulgin],
      header: {
        left: "prev,next,today",
        center: "title",
        right: "timeGridWeek,timeGridDay"
      },
      customButtons: {
        prev: {
          // this overrides the prev button
          text: "PREV",
          click: e => {
            let calendarApi = this.$refs.fullCalendar2.getApi();
            calendarApi.prev();
            this.defaultDate = calendarApi.getDate();
            console.log(this.defaultDate);
            this.getListData();
          }
        },
        next: {
          // this overrides the next button
          text: "NEXT",
          click: e => {
            console.log("eventNext");
            let calendarApi = this.$refs.fullCalendar2.getApi();
            calendarApi.next(); //点击下一天/周
            this.defaultDate = calendarApi.getDate(); //获取当前视图的时间 
            console.log(this.defaultDate);
            this.getListData();//赋值
          }
        },
        today: {
          text: "今天",
          click: e => {
            console.log(e);
            let calendarApi = this.$refs.fullCalendar2.getApi();
            calendarApi.today(); //点击今天的事件
            this.defaultDate = calendarApi.getDate();//获取当前视图的时间
            this.getListData();//赋值
          }
        }
      },
      buttonText: {
        today: "今天",
        month: "月",
        week: "周",
        day: "天"
      },
      slotLabelFormat: {
        hour: "numeric",
        minute: "2-digit",
        omitZeroMinute: false,
        hour12: false,
        meridiem: "short"
      },
      evnetTime: {
        hour: "numeric",
        minute: "2-digit",
        omitZeroMinute: false,
        meridiem: "short",
        hour12: false,
        firstHour: 0
      },
      businessHours: {
        dow: [1, 2, 3, 4, 5], // 周一 - 周四
        start: "08:00", // 上午10点开始
        end: "23:00" // 下午18点结束
      },
      defaultDate: new Date(),//
      calendarEvents: [],

数据格式通过接口返回，然后一个个push

 res.data.map(item => {
                //   console.log(item);
                let obj = {
                  title:
                    item.roomname +
                    "-" +
                    item.course_name +
                    "(" +
                    item.type_name +
                    ")",
                  id: item.id,
                  start: new Date(item.p_date + " " + item.start_time),
                  end: new Date(item.p_date + " " + item.end_time),
                  color: item.color
                };
                arr.push(obj);
              });
              this.calendarEvents = arr;

5.和element-ui el-date-picker 关联起来
这里有一个小问题，就是这个FullCalendar的组件默认时间格式的问题（个人觉得）
yyyy-MM-dd 这中格式好像不可以，所以要用new Date()转换一下 然后通过FullCalendar的api赋值一下 关键代码 this.$refs.fullCalendar2.getApi().gotoDate(time);

<el-date-picker
            v-model="defaultDate"
            type="date"
            :clearable="false"
            value-format="yyyy-MM-dd"
            @change="timeChange"
            placeholder="点击选择查询日期"
          ></el-date-picker>

 timeChange(val) {
      let time = new Date(val);
      this.$refs.fullCalendar2.getApi().gotoDate(time);
      this.defaultDate = time;
      //   this.showDate = val;
      this.getListData();
      this.$forceUpdate();
    },

这里一点要注意时间格式，我没有做很深的研究，只是在项目中使用到了这个插件 记录一下，不喜勿喷，如有疑惑 欢迎讨论！