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
这个是相关配置代码,其中比较关键的是有个点击事件和select事件重复,最后我选择了select事件,因为这个事件可以被限制范围,

下面列一些花很大精力查到的,用处很大的属性
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]表示周一以此类推
:select-allow="handlerAllow"  //此处设置一个handlerAllow方法限制select拉取的范围
min-time="00:00:00" max-time="24:00:00" slot-duration="01:00:00" //此处设置每天时间从什么时候开始结束,以及每段时间的间隔为多少
:eventConstraint="businessHours"   //当事件拖动时,限制拖动到灰色区域
aspectRatio="1.5"   //设置日历的宽高比率 ,发现有超出部分可以适当调整
:editable="true" :eventDurationEditable="false"  //事件可以被拖动,禁止事件下拉(因为项目需要固定只能预约一个小时,下拉会导致时间增加)
:selectConstraint="businessHours"   //这个属性找了两天,贼鸡儿难受,此处限制灰色区域创建预约,就是灰色部分不能被点击,eventConstraint这个只是事件拖动时不会被拖到灰色区域
:event-overlap="false"  //阻止两次预约拖动时重叠

<template>
    <div>
        <div class="calendar">
            <FullCalendar :plugins="calendarPlugins" :all-day-slot="false" :header="{ // 头部样式
                left: 'today',
                right:'next'
            }" :button-text="{ //头部按钮样式
                today: '今天'
            }" :event-overlap="false" :events="event" columnHeaderFormat="ddd" :select-overlap="false"
                :first-day="nowDay" :business-hours="businessHours" :select-allow="handlerAllow" :select-mirror="true"
                selectable="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" @select="handleSelect" aspectRatio="1.5"
                :editable="true" :eventDurationEditable="false" :resourceIds="businessHours"
                :selectConstraint="businessHours" :valid-range="visibleRange" />
        </div>
    </div>
</template>

<script>

import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
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',
                //     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
                ["10,17", 20], //周二 2
                [], //周三 3
                ["9,15"],//周四 4
                [],//周五 5
                ["15,24"],//周六 6
            ],
            arr: [],
            businessHours: []
        }
    },
    computed: {
        nowDay () { //使得日历是当前时间的后七天
            return new Date().getDay()
        },
        visibleRange () { //限制日期时间,因为是预约功能,需要设置当前时间之后的多少天内可以预约,超过时间则不能预约
            let nowDate = new Date()
            return {
                start: nowDate,
                end: this.getDateStr(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.setDate(dd.getDate() + 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) { 
            if (typeof (val) == 'string') {
                let a = val.split(",")
                let b = {
                    startTime: `${a[0]}:00`,
                    endTime: `${a[1]}:00`,
                    daysOfWeek: [k]
                }
                this.arr.push(b)
            } else if (typeof (val) == 'number') {
                let c = {
                    startTime: `${val}:00`,
                    endTime: `${val + 1}:00`,
                    daysOfWeek: [k]
                }
                this.arr.push(c)
            }
            this.businessHours = this.arr
        },
        init () {
            this.data.map((item, index) => {
                item.map(j => {
                    this.transform(j, index)
                })
            })
        },
        handlerAllow: info => { 
        //这个是限制过去时间不能点击,并且限制每次点击只能预约一个小时,不能水平拉动
            let a = info.start.getHours()
            let b = info.end.getHours()
            let c = info.start.getDay()
            let d = info.end.getDay()
            const currentDate = new Date()
            const start = info.start
            const end = info.end
            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.startFormatTime(info.endStr),
                }
                if (this.event.length < 5) {
                    this.event = this.event.concat(a)
                    this.$message({
                        type: 'success',
                        message: '操作成功!'
                    });
                } else {
                    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>

其他部分没什么好说的,自己瞅吧,这沙雕插件就是属性难搞,找了好几天.希望大家以后发点干货,别瞎鸡儿转载转载,搜了都是一堆一模一样的东西