Vue.js和FullCalendar 5 refetchEvents

问题描述

我正在使用FullCalendar和Vue。 我试图在触发refreshCal（）后重新加载事件，并使用refetchEvents在屏幕上呈现日历。 我必须主要组成部分：

1. 日历：这是代码

<script>
import FullCalendar from '@fullcalendar/vue'
import timeGridplugin from '@fullcalendar/timegrid'
import resourceTimelinePlugin from '@fullcalendar/resource-timeline'
import calendarEdit from '../pages/calendar/edit'

export default {
  components: {
    FullCalendar
  },data() {
    return {
      calendarOptions: {
        plugins: [ timeGridplugin,resourceTimelinePlugin ],schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',initialView: 'timeGridWeek',refetchResourcesOnNavigate: true,//eventSources: ['/api/calendar/json'],events: '/api/calendar/json',eventdisplay: 'block',contentHeight: 'auto',NowIndicator: true,locale: 'en-gb',headerToolbar: {
          left: 'prev,next today',center: 'title',right: 'timeGridWeek,timeGridDay'
        },businessHours: [ // specify an array instead
          {
            daysOfWeek: [ 1,2,3,4,5 ],// Monday,Tuesday,Wednesday
            startTime: '08:00',// 8am
            endTime: '20:00' // 6pm
          },{
            daysOfWeek: [ 6 ],// Thursday,Friday
            startTime: '9:00',// 10am
            endTime: '14:00' // 4pm
          }
        ],slotMinTime: '07:00:00',slotMaxTime: '24:00:00',expandRows: true,eventClick: this.eventModal,}
    }
  },methods: {
    eventModal(args) {
      let modalProps = {
        'event': args.event
      }
      this.$buefy.modal.open({
          props: modalProps,parent: this,component: calendarEdit,hasModalCard: true,trapFocus: true
      })
    }

  }
}
</script>
<template>
  <FullCalendar ref="calsession" :options="calendarOptions"/>
</template>

1. 用于编辑事件的模式组件：

<script>

    export default {
        data() {
            return {
                session: {},startDate: {},startTime: {},endTime: {},message: {}
            }
        },props: {
            event: {
              required: true
            }
        },methods: {
            getSession() {
                this.$http.get(`/api/sessions/${this.event.id}/edit`)
                    .then( (result) => {
                        this.session = result.data;
                        this.startDate = new Date(result.data.start_at)
                        this.startTime = new Date(result.data.start_at)
                        this.endTime = new Date(result.data.finish_at)
                    })
            },update(event) {
                this.saving = true;

                this.$http.put(`/api/sessions/${this.event.id}`,{

                    startDate: this.$moment(this.startDate).utc().format('YYYY-MM-DD'),startTime: this.$moment(this.startTime).utc().format('hh:mm'),endTime: this.$moment(this.endTime).utc().format('hh:mm')

                }).then((response) => {
                    this.refreshCal()
           

                    //this.close()
                })
            },refreshCal() {
                this.$log(this.$parent.$parent.$refs)
                this.$parent.$parent.$refs.calsession.refetchEvents()           
            }   
        },created() {
            this.getSession()

        }
    }
</script>

我一直在尝试

this.$parent.$parent.$refs.calsession.$emit('refetch-events') 

在FullCalendar文档和互联网上的各种研究中都可以找到，但从未奏效。

$ emit（'refetch-events'）或 $ emit（'refetchEvents'）没有任何作用。

仅供参考： this。$ parent。$ parent。$ refs 将引用提供给FullCalendar。

有什么建议吗？

谢谢大家的帮助。

解决方法

如果对全日历使用官方Vue组件：@fullcalendar/vue

不需要使用发射，而是通过 getApi 方法获取Calendar对象：

 let calendar = this.$parent.$parent.$refs.calsession.getApi()

，因此使用方法refetchEvents：

 calendar.refetchEvents()