fullcalendar配合vue实现会议室使用情况查看

效果图

 

<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 // 点击按钮触发的事件，这里要注意的是当按钮绑定了事件之后该按钮原本自带的事件将会失效
          }
        },
        plugins: [interactionPlugin, resourceTimelinePlugin], // 把需要的功能包导入
        initialView: 'resourceTimeline', // 初始化要渲染的包
        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source', // 此配置是为了消除右下角的版权提示
        // resourceAreaHeaderContent: '房间名称', // 纵轴的第一行 用来表示纵轴的名称
        resourceAreaWidth: '9%', // 纵轴饿宽度
        resources: [], // 纵轴的数据
        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, // 选择时间段触发的事件
        // selectOverlap: (event) => { // 已有事件的各自是否还能选择
        //   return event.rendering === 'background'
        // },
        events: [], // 日历右侧主体事件数据
        // 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}` // 如果月份是个位数，在前面补0
      if (strDate < 10) strDate = `0${strDate}` // 如果日是个位数，在前面补0
      const nowDate = `${year}-${month}-${strDate}`
      this.value1 = nowDate
      this.changeDate(nowDate)
    },
    openDate() {
      if (this.$refs.date) {
        this.$refs.date.focus()
      }
    },
    // // 选择日期格子触发
    // 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', // 背景颜色
    //   }
    //   // 创建一个新事件格子 向日历中增加一个事件格子
    //   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>

日历使用饿了么组件配合api方法实现