Vue中安装使用fullCalendar时遇到的坑

最新推荐文章于 2024-07-25 13:00:00 发布

柒个M

最新推荐文章于 2024-07-25 13:00:00 发布

阅读量1.2w

点赞数 6

分类专栏： D1：FullCalendar

本文链接：https://blog.csdn.net/qq_38244874/article/details/113331388

版权

D1：FullCalendar 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

按照网上的教程，说安装如下插件：

// 安装相关插件
npm install --save @fullcalendar/core 
npm install --save @fullcalendar/resource-timeline 
npm install --save @fullcalendar/timeline

然后再按需引入：

//按需引入
import FullCalendar from '@fullcalendar/vue'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import interactionPlugin from '@fullcalendar/interaction'
import '@fullcalendar/core/main.css'
import '@fullcalendar/timeline/main.css'
import '@fullcalendar/resource-timeline/main.css'
import '@/styles/cover.scss' //覆盖样式文件

结果控制台报错：找不到样式文件，然后我把样式文件注释掉，接着在html中引入fullCalendar组件，如下：

<FullCalendar ref="calendar" default-view="resourceTimelineNinetyDay" locale="zh-cn" week-number-calculation="ISO"
              slot-width="38"
              :scheduler-license-key="licenseKey"
              :slot-label-format="slotLabelFormat
              。。。。。。。。。。。。。。。

然后，接着报错：

开始怀疑人生了，明明是按照教程操作的，为啥别人就OK，我一运行就报错？

开始网上搜解决办法，后来发现官网上有关Vue的教程Vue版本的fullCalendar，好吧，引入的方式是这样子的：

<FullCalendar ref="fullCalendar" :options="calendarOptions" />

人家只接受一个options,赋值为calnedarOptions。

真的是神坑。

接着，可以在data（）中配置我们的日历：

calendarOptions: {
                    plugins: [
                        dayGridPlugin,
                        timeGridPlugin,
                        interactionPlugin // needed for dateClick
                    ],
                    initialDate: '2021-01-15',
                    isRTL: true,
                    locale: "zh-cn",
                    aspectRatio: 1.65,
                    displayEventTime: true, // 是否显示时间
                    allDaySlot: false, // 周，日视图时，all-day 不显示
                    headerToolbar: {
                        // 日历头部按钮位置
                        left: "",
                        center: "prevYear,prev title next,nextYear",
                        right: "",
                    },
                    customButtons: {
                        prev: {
                            text: "PREV",
                            click: this.handlePreBtnClick,
                        },
                        next: { // this overrides the next button
                            text: "PREV",
                            click: this.handleNextBtnClick,
                        },
                        prevYear: {
                            text: "prevYear",
                            click: this.handlePreYearBtnClick,
                        },
                        nextYear: {
                            text: "nextYear",
                            click: this.handleNextYearBtnClick,
                        }
                    },


                    titleFormat: { // will produce something like "Tuesday, September 18, 2018"
                        year: 'numeric',
                        month: 'numeric',
                        day: 'numeric',
                        // weekday: 'long'
                    },
                    hour12: false,
                    initialView: 'timeGridWeek',
                    // initialEvents: INITIAL_EVENTS, // alternatively, use the `events` setting to fetch from a feed
                    events: [],
                    editable: true,
                    selectable: true,
                    selectMirror: true,
                    dayMaxEvents: true,
                    weekends: true,
                    slotLabelFormat: {
                        hour: "2-digit",
                        minute: "2-digit",
                        meridiem: false,
                        hour12: false, // 设置时间为24小时
                    },
                    // select: this.handleDateSelect,
                    eventClick: this.handleEventClick,
                    eventsSet: this.handleEvents
                    /* you can update a remote database when these fire:
                    eventAdd:
                    eventChange:
                    eventRemove:
                    */
                },

其中：大部分的配置都可以在官网上查到，这里不多说了，只说一个点，就是关于toobar上的按钮，next、pre、nextYear、preYear的使用方法：

                    headerToolbar: {
                        // 日历头部按钮位置
                        left: "",
                        center: "prevYear,prev title next,nextYear",
                        right: "",
                    },
                    customButtons: {   //给按钮添加事件
                        prev: {
                            text: "PREV",
                            click: this.handlePreBtnClick,
                        },
                        next: { // this overrides the next button
                            text: "PREV",
                            click: this.handleNextBtnClick,
                        },
                        prevYear: {
                            text: "prevYear",
                            click: this.handlePreYearBtnClick,
                        },
                        nextYear: {
                            text: "nextYear",
                            click: this.handleNextYearBtnClick,
                        }
                    },

然后在methods方法中写对应的方法如下：

            //下周
            handleNextBtnClick(){
                let calendarApi = this.$refs.fullCalendar.getApi();   //一旦你有ref，你可以通过getApi方法得到底层的日历对象:
                calendarApi.next();   // 调用next方法
                let test = calendarApi.getCurrentData().viewTitle;
                console.log(test);
            },
            //上周
            handlePreBtnClick(){
                let calendarApi = this.$refs.fullCalendar.getApi();
                calendarApi.prev();
                let test = calendarApi.getCurrentData().viewTitle;
                console.log(test);
            },
            //上一年
            handlePreYearBtnClick(){
                let calendarApi = this.$refs.fullCalendar.getApi();
                calendarApi.prevYear();
                let test = calendarApi.getCurrentData().viewTitle;
                console.log(test);
            },
            //下一年
            handleNextYearBtnClick(){
                let calendarApi = this.$refs.fullCalendar.getApi();
                calendarApi.nextYear();
                let test = calendarApi.getCurrentData().viewTitle;
                console.log(test);
            },

最后，成功爬坑，记录下给需要的童学们~