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

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

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

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

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