在vue中使用FullCanlendar实现日历预约会议室功能

最近接到任务,让实现一个预约功能,让我找找插件,需求是这个样子滴

明白任务以后,那咱就开抄呗~(bushi 开找
经过一番寻找,最后我决定使用FullCalendar,为啥用这个呢,你看它样子长的像不像我的需求,虽然说不上是有一些像吧,但简直就是一模一样.

更关键的是这玩意有很全的文档(但全是英文的!!),而且支持在vue中直接使用.

FullCanlendar介绍

FullCanlendar一款日历插件,支持react,Vue,angular以及原生js.支持年月日各种样式风格,上面是日的样式和我需求是一样的,还有经典的日历模式.
官网:https://fullcalendar.io/

Vue中使用FullCanlendar

• 进行安装

npm install --save @fullcalendar/vue @fullcalendar/core

( 这两个是基础包,额外的功能需要在额外下载对应的包,额外的功能对应的包可以自行查找, https://fullcalendar.io/docs/plugin-index )

• 按需引入

import FullCalendar from '@fullcalendar/vue'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import interactionPlugin from '@fullcalendar/interaction'

然后在对应的vue页面进行导入 并注册组件 (后两个为我需要的额外功能包)

• 配置项配置

<FullCalendar class="calenderCon" :options="calendarOptions" ref="fullCalendar" />
 
export default {
  components: {
    FullCalendar
  },
   data() {
    return {
      //不要改这个变量的名字
      calendarOptions: { 
        locale: 'zh-cn', //选择语言
        headerToolbar: false, // 不显示头部按钮
        plugins: [interactionPlugin, resourceTimelinePlugin],//把需要的功能包导入
        initialView: 'resourceTimeline', //初始化要渲染的包
        schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source', //此配置是为了消除右下角的版权提示
        resourceAreaHeaderContent: '房间名称', // 纵轴的第一行 用来表示纵轴的名称
        resourceAreaWidth: '5%',//纵轴饿宽度
        resources: [], //纵轴的数据
        slotLabelFormat: { //时间格式配置
          hour: 'numeric',
          minute: '2-digit', //分钟显示2位
          omitZeroMinute: false, // 是否显示分钟
          meridiem: 'short',
          hour12: false, //12小时制还是24小时制
        },
        slotDuration: '00:30:00', //时间间隔 默认半小时
        slotMinTime: '08:00:00', // 开始时间
        slotMaxTime: '18:00:00', // 结束时间
        selectable: true, //是否可以在日历表上选择
        select: this.showDialog, // 选择时间段触发的事件
        selectOverlap: (event) => { //已有事件的各自是否还能选择
          return event.rendering === 'background';
        },
        events: [], // 日历右侧主体事件数据
        eventClick: this.eventClick, // 事件点击事件
      },
    }
  },
  created() {
    this.init()
  },
   methods: {
    init() {
      setTimeout(() => {
        // 模拟资源
        this.calendarOptions.resources = [{
          id: 'A1111',
          groupId: '1',
          title: '房间 A'
        },
        {
          id: 'B',
          groupdId: '1',
          title: '房间 B'
        },
        {
          id: 'C',
          groupId: '1',
          title: '房间 C'
        },
        {
          id: 'd',
          groupId: '1',
          title: '房间 d'
        },
        ]
      }, 1000)
      // 模拟事件
      this.calendarOptions.events = [{
        id: '666',
        resourceId: 'A1111',
        title: '模拟会议',
        start: '2022-11-02 10:00',
        end: '2022-11-02 11:00',
        display: 'background', //事件块的样式 不写的时候默认是块
        color: 'transparent', // 边框颜色
        textColor: '#303133', // 文字颜色
        backgroundColor: '#E6E7F4', // 背景颜色
      }
      ]
    },
    //选择日期格子触发
    showDialog(selectInfo) {
      let calendarApi = selectInfo.view.calendar;
      calendarApi.unselect(); // clear date selection 清空上次选择
      // let 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() {
      let calendarApi = this.$refs.fullCalendar.getApi()
      let calendar = calendarApi.view.calendar
      calendar.gotoDate('要跳转的日期')
    }
  },
 }

以上没有涉及到定制化功能,基本插件库的功能都可以实现,插件还有很多高级的功能,需要的小伙伴自己去探究吧~ 欢迎交流讨论