Fullcalendar⽇历插件+vue实现指定时间内进⾏预约功能，指定时间外禁⽌创建预
约。。。
⾸先吐槽这个Fullcalendar这个插件的沙雕⽂档，都是英⽂,⾕歌翻译⼜翻译得很笨，查看了很多⽂档和博客，很都是复制粘贴党.浪费⼤家时间.
/***/在项⽬中需要加⼀个预约功能，后端传给我⼀个类似下图这样的数据结构，这个就是限制预约时间段,⽐如data数组中第⼀项data[0] = [15] 意思是周⽇ 只有15点到16点可以预约.data[1]=[6,“8,12”] 就是周⼀的6点到7点,8点到下午三点可以预约，如图
1.⾸先需要下载Fullcalendar以及相关配置
npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/moment @fullcalendar/interaction
这个是相关配置代码，其中⽐较关键的是有个点击事件和lect事件重复，最后我选择了lect事件，因为这个事件可以被限制范围,
下⾯列⼀些花很⼤精⼒查到的,⽤处很⼤的属性
columnHeaderFormat="ddd" // 格式化表头，成周⼀周⼆...默认为11/19周⼆,11/20周三...
:first-day="nowDay" //此处创建⼀个nowDay⽅法使当前⽇期始终在第⼀列，后⾯则为当前时期后六天
:business-hours="businessHours" //此处创建⼀个businessHours数组数据结构类似于[{startTime:"6:00",endTime:"8:00",daysOfWeek:[0]}] ,daysOfWeek:[0]表⽰周⽇,daysOfWeek:[1]表⽰周⼀以此类推
:lect-allow="handlerAllow" //此处设置⼀个handlerAllow⽅法限制lect拉取的范围
min-time="00:00:00" max-time="24:00:00" slot-duration="01:00:00" //此处设置每天时间从什么时候开始结束，以及每段时间的间隔为多少
:eventConstraint="businessHours" //当事件拖动时，限制拖动到灰⾊区域
aspectRatio="1.5" //设置⽇历的宽⾼⽐率 ，发现有超出部分可以适当调整
:editable="true" :eventDurationEditable="fal" //事件可以被拖动，禁⽌事件下拉(因为项⽬需要固定只能预约⼀个⼩时，下拉会导致时间增加)
:lectConstraint="businessHours" //这个属性找了两天，贼鸡⼉难受，此处限制灰⾊区域创建预约，就是灰⾊部分不能被点击,eventConstraint这个只是事件拖动时不会被拖到灰⾊区域
:event-overlap="fal" //阻⽌两次预约拖动时重叠
<template>
<div>
<div class="calendar">
<FullCalendar :plugins="calendarPlugins" :all-day-slot="fal" :header="{ // 头部样式
left: 'today',
right:'next'
}" :button-text="{ //头部按钮样式
today: '今天'
}" :event-overlap="fal" :events="event" columnHeaderFormat="ddd" :lect-overlap="fal"
:first-day="nowDay" :business-hours="businessHours" :lect-allow="handlerAllow" :lect-mirror="true"
lectable="true" min-time="00:00:00" max-time="24:00:00" slot-duration="01:00:00"
slot-label-format="HH:mm" default-view="timeGridWeek" locale="zh-cn" @eventClick="handleEventClick"
@eventDrop="handDrop" :eventConstraint="businessHours" @lect="handleSelect" aspectRatio="1.5"
:editable="true" :eventDurationEditable="fal" :resourceIds="businessHours"
:lectConstraint="businessHours" :valid-range="visibleRange" />
</div>
</div>
</template>
<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
大学体验英语综合教程3
import momentPlugin from '@fullcalendar/moment'
import'@fullcalendar/core/locales/zh-cn'
import timeGridPlulgin from '@fullcalendar/timegrid'
export default {
components: {
FullCalendar
},
data (){
return{
calendarPlugins: [dayGridPlugin, timeGridPlulgin, momentPlugin, interactionPlugin],
event: [
// {
// start: '2019-11-20 14:00:00',
// start: '2019-11-20 14:00:00',
// end: '2019-11-20 15:00:00',
// },
/
/ {
// start: '2019-11-22 12:00:00',
// end: '2019-11-22 13:00:00'
// }
],
data: [
[15], //周⽇ 0
[6, "8,12"], //周⼀ 1
音标发音48个正确发音["10,17", 20], //周⼆ 2
[], //周三 3
queued["9,15"],//周四 4
[],//周五 5
["15,24"],//周六 6
],
arr: [],
businessHours: []
}
},
computed: {
nowDay (){ //使得⽇历是当前时间的后七天
return new Date().getDay()
},
visibleRange (){ //限制⽇期时间，因为是预约功能，需要设置当前时间之后的多少天内可以预约，超过时间则不能预约let nowDate = new Date()
return{creditnote
start: nowDate,
end: DateStr(this.day) //后⾯写了⼀个⽅法转化
}
},英文翻译字典
},
created (){
this.init()
},
methods: {
startFormatTime (t){
let a = new Date(t).toJSON()
let b = new Date(+new Date(a) + 8 * 3600 * 1000)
let c = b.toISOString()
let d = c.replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '');
return d
},
getDateStr (t){
var dd= new Date();
dd.Date() + t);
var y = dd.getFullYear();
var m =(dd.getMonth() + 1)< 10 ? "0" + (dd.getMonth() + 1):(dd.getMonth() + 1);//获取当前⽉份的⽇期，不⾜10补0 var d = dd.getDate()< 10 ? "0" + dd.getDate(): dd.getDate();//获取当前⼏号，不⾜10补0
return y + "-" + m + "-" + d;
},
transform (val, k){
part
if(typeof (val)=='string'){
let a = val.split(",")
let b ={
startTime: `${a[0]}:00`,
costarendTime: `${a[1]}:00`,
daysOfWeek: [k]
}
this.arr.push(b)
}el if(typeof (val)=='number'){
let c ={
startTime: `${val}:00`,
endTime: `${val + 1}:00`,
endTime: `${val + 1}:00`,
daysOfWeek: [k]
}
this.arr.push(c)
}
this.businessHours = this.arr
},
init (){beneficial
this.data.map((item, index)=>{
item.map(j =>{
})
})
},
handlerAllow: info =>{
//这个是限制过去时间不能点击，并且限制每次点击只能预约⼀个⼩时，不能⽔平拉动let a = Hours()
let b = Hours()
let c = Day()
let d = Day()
const currentDate = new Date()
const start = info.start
const end = d
return(start <= end && start >= currentDate && b - a == 1 && c == d)
},
handleSelect (info){
this.$confirm('是否选择该时间为预约时间?', '提⽰', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(()=>{
let a ={
start: this.startFormatTime(info.startStr),
end: this.dStr),
}
if(this.event.length < 5){
this.event = at(a)
this.$message({
type: 'success',
message: '操作成功!'
});
omp
}el{
this.$message({
type: 'warning',
message: '⼀周最多只能预约3次!'
});
}
}).catch(()=>{});
},
handleEventClick (val){
console.log(1111, val)
},
handDrop (val){
console.log(1, val)
}
}
}
</script>
<style lang="scss" scoped>
@import '~@fullcalendar/core/main.css';
@import '~@fullcalendar/daygrid/main.css';
苏州在线
@import '~@fullcalendar/timegrid/main.css';
</style>
其他部分没什么好说的,⾃⼰瞅吧，这沙雕插件就是属性难搞，找了好⼏天.希望⼤家以后发点⼲货，别瞎鸡⼉转载转载，搜了都是⼀堆⼀模⼀样的东西
