先上效果圖：

image.png

<template>
  <div class="app-container">
    <div class="calendar">
      <i class="el-icon-date" @click="openDate" />
      <div class="block">
        <el-date-picker
          ref="date"
          v-model="value1"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="選擇日期"
        />
      </div>
    </div>
    <FullCalendar
      v-if="calendar"
      ref="fullCalendar"
      style="margin-top: 30px;"
      class="calenderCon"
      :options="calendarOptions"
    />
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import interactionPlugin from '@fullcalendar/interaction'
import { getCalendar } from '@/api/meet-manage/meeting-manage'
export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendar: false,
      isShow: false,
      value1: '',
      list: [],
      calendarOptions: {
        locale: 'zh-cn', // 選擇語言
        headerToolbar: {
          left: 'prev',
          center: 'title',
          right: 'today,next'
          // right: 'dayGridMonth timeGridWorkWeek timeGridWeek timeGridDay'
        },
        customButtons: { // 定義可在headerToolbar / footerToolbar中使用的自定義按鈕
          today: {
            text: '今天', // 按鈕的展示文本
            click: this.todayClick // 點擊按鈕觸發(fā)的事件硕勿，這里要注意的是當按鈕綁定了事件之后該按鈕原本自帶的事件將會失效
          }
        },
        plugins: [interactionPlugin, resourceTimelinePlugin], // 把需要的功能包導入
        initialView: 'resourceTimeline', // 初始化要渲染的包
        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source', // 此配置是為了消除右下角的版權提示
        // resourceAreaHeaderContent: '房間名稱', // 縱軸的第一行 用來表示縱軸的名稱
        resourceAreaWidth: '9%', // 縱軸餓寬度
        resources: [], // 縱軸的數(shù)據(jù)
        slotLabelFormat: { // 時間格式配置
          hour: 'numeric',
          minute: '2-digit', // 分鐘顯示2位
          omitZeroMinute: false, // 是否顯示分鐘
          meridiem: 'short',
          hour12: false // 12小時制還是24小時制
        },
        slotDuration: '00:30:00', // 時間間隔 默認半小時
        slotMinTime: '07:00:00', // 開始時間
        slotMaxTime: '24:00:00', // 結束時間
        // selectable: true, // 是否可以在日歷表上選擇
        // select: this.showDialog, // 選擇時間段觸發(fā)的事件
        // selectOverlap: (event) => { // 已有事件的各自是否還能選擇
        //   return event.rendering === 'background'
        // },
        events: [], // 日歷右側主體事件數(shù)據(jù)
        // eventClick: this.eventClick, // 事件點擊事件
        resourceAreaColumns: [
          {
            headerContent: '會議室名稱',
            field: 'title'
          },
          {
            headerContent: '容量(人)',
            field: 'area'
          }
        ]
      }
    }
  },
  watch: {
    value1() {
      console.log(this.value1)
      this.changeDate(this.value1)
    }
  },

  created() {
    this.getCalendar()
  },
  methods: {
    async getCalendar() {
      const res = await getCalendar()
      console.log(res)
      res.data.events.forEach(el => {
        el.title = el.start.slice(11, 16) + '-' + el.end.slice(11, 16)
      })
      this.calendarOptions.resources = res.data.resource
      this.calendarOptions.events = res.data.events
      this.calendar = true
    },
    todayClick() {
      const date = new Date()
      const year = date.getFullYear() // 獲取完整的年份(4位)
      let month = date.getMonth() + 1 // 獲取當前月份(0-11,0代表1月)
      let strDate = date.getDate()
      if (month < 10) month = `0${month}` // 如果月份是個位數(shù)，在前面補0
      if (strDate < 10) strDate = `0${strDate}` // 如果日是個位數(shù)贝乎，在前面補0
      const nowDate = `${year}-${month}-${strDate}`
      this.value1 = nowDate
      this.changeDate(nowDate)
    },
    openDate() {
      if (this.$refs.date) {
        this.$refs.date.focus()
      }
    },
    // // 選擇日期格子觸發(fā)
    // showDialog(selectInfo) {
    //   console.log(selectInfo, '選擇格子')
    //   const calendarApi = selectInfo.view.calendar
    //   calendarApi.unselect() // clear date selection 清空上次選擇
    //   const obj = {
    //     resourceId: selectInfo.resource.id,
    //     title: '會議名稱',
    //     start: selectInfo.start,
    //     end: selectInfo.end
    //     // color: 'transparent', // 邊框顏色
    //     // textColor: '#fff', // 文字顏色
    //     // backgroundColor: '#409EFF', // 背景顏色
    //   }
    //   // 創(chuàng)建一個新事件格子 向日歷中增加一個事件格子
    //   calendarApi.addEvent(obj)
    // },
    // // 事件點擊
    // eventClick(eventInfo) {
    //   console.log(eventInfo, '事件點擊')
    // },
    // 切換日期  可以切換到對應天顯示事件
    changeDate(val) {
      const calendarApi = this.$refs.fullCalendar.getApi()
      const calendar = calendarApi.view.calendar
      calendar.gotoDate(val)
    }
  }
}
</script>
<style scoped lang="scss">
.app-container {
  width: 100%;
  height: 100%;
  background: #fff;
}

.calendar {
  position: relative;
  margin-bottom:-90px;
  left: 55%;
  top: 0%;
  .block {
        opacity: 0;
  }
}
/deep/ .fc-event-title{
    position: relative;
    left: 50%;
    transform: translateX(-50%) !important;
}
/deep/ .fc .fc-resource-timeline-divider{
width: 0;
}
.calenderCon{
height: 790px;
width: 100%;
}
/deep/ .fc-datagrid-cell .fc-resource{
width: 70px !important;
}
</style>

配合qiankun可能會出現(xiàn)資源加載不到的問題、但是測試環(huán)境并未 出現(xiàn)