Vue 项目中 使用fullcalendar 时间段选择插件（类似课程表格）

最近完成一个项目，有这样的需求，我们需要选择一个会议室，但是最好能够通过在图上显示出该 会议室在某某时间段内已经被预定了。

先看一下这个功能最终实现的效果，看一看是不是你想要的效果，是您需要的请继续读下去，如果不是请忽略本文。

本文中是基于VUE+elementui项目中实现的前后端分离的前端功能部分：

所使用的插件：https://github.com/fullcalendar/fullcalendar这个项目功能很丰富

插件的官方文档：https://fullcalendar.io/

vue版本的官方文档：https://fullcalendar.io/docs/vue

实现本功能需要注意（基本的业务逻辑）：

1.过去的时间不能选择；

2.已经选择过的时间范围内不能再次选择；

下面你需要在你的项目中安装如下的插件: 命令行npm install xxxxx:

npm install --save @fullcalendar/vue @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/moment @fullcalendar/interaction

最后贴上我的最终的代码：

<template>
  <div class="container" style="width:60%; margin: 0 auto;">
    <FullCalendar
      :plugins="calendarPlugins"
      :all-day-slot="false"
      :header="{
        left:'prev',
        center:'title',
        right: 'today ,next'
      }"
      :slot-event-overlap="false"
      :events="[
        {
          title: '计算机学院小组会议',
          start: '2019-05-15 10:00:00',
          end: '2019-05-15 16:00:00',
          color:'orange'
        },
        {
          start: '2019-05-14 10:00:00',
          end: '2019-05-14 14:00:00',
          title: '东南大学计算机学术会议',
          color:'green'
        }
      ]"
      :button-text="{
        today: '今天'
      }"
      :unselect-auto="false"
      :select-overlap="false"
      :business-hours="{
        startTime: '07:00',
        endTime:'18:00',
        daysOfWeek: [ 1, 2, 3, 4, 5, 6, 0 ]
      }"
      :select-allow="handlerSeelctAllow"
      select-mirror="true"
      min-time="07:00:00"
      max-time="23:00:00"
      selectable="true"
      slot-duration="00:30"
      slot-label-format="HH:mm"
      title-format="YYYY年MM月D日"
      default-view="timeGridWeek"
      locale="zh-cn"
      @dateClick="handleDateClick"
      @select="handleSelect"/>
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlulgin from '@fullcalendar/timegrid'
import '@fullcalendar/core/locales/zh-cn' // 支持中文
import momentPlugin from '@fullcalendar/moment'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarPlugins: [dayGridPlugin, timeGridPlulgin, momentPlugin, interactionPlugin],
      // 随时判断时间是否合法，通过返回true/false来判断是否能够选择
      handlerSeelctAllow: info => {
        const currentDate = new Date()
        const start = info.start
        const end = info.end
        return (start <= end && start >= currentDate)
      }
    }
  },
  methods: {
    // 当点击时候
    handleDateClick(arg) {
      console.log(arg)
    },
    // 当选择结束的时候获取开始和结束时间
    handleSelect(info) {
      console.log('form' + info.startStr + ' to ' + info.endStr)
    }

  }
}
</script>

<style lang="scss" scope>
@import '@fullcalendar/core/main.css';
@import '@fullcalendar/daygrid/main.css';
@import '@fullcalendar/timegrid/main.css';
</style>

以上就是fullcalendar基本的操作了，如果您还需要一些其他的功能，请查阅相关文档继续学习。

后记：用代码来实现自己的想法是快乐的，这种成就感是金钱买不到的，这就是我继续前行的动力。因为热爱，所以再多的付出也都是值得的，当软件运行成功的一刻，我想我是这个世界上最幸福的人。

这篇文章重在自我学习和探讨，当不借助外力或者拿来主义的思路去解决问题时，或许就是我们技术加速前进的开始。