Vue 项目中如何使用fullcalendar 时间段选择插件(类似课程表格)
作者：xiaopengyaonixi
最近完成一个项目,需要选择一个会议室,但是最好能够通过在图上显示出该 会议室在某某时间段内已经被预定了,初看这个功能感觉很棘手,仔细分析下实现起来还是挺容易的,下面通过示例代码讲解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基本的操作了，如果您还需要一些其他的功能，请查阅相关文档继续学习。
后记：用代码来实现自己的想法是快乐的，这种成就感是金钱买不到的，这就是我继续前行的动力。因为热爱，所以再多的付出也都是值得的，当软件运行成功的一刻，我想我是这个世界上最幸福的人。
这篇文章重在自我学习和探讨，当不借助外力或者拿来主义的思路去解决问题时，或许就是我们技术加速前进的开始。
到此这篇关于Vue 项目中 使用fullcalendar 时间段选择插件（类似课程表格）的文章就介绍到这了,更多相关Vue使用fullcalendar插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！