Vue.js 和 FullCalendar 5 refetchEvents

Question

我正在使用 FullCalendar 和 Vue。 我正在尝试在触发 refreshCal() 后重新加载事件，因此使用 refetchEvents 在屏幕上呈现日历。 我必须要主要组件：

日历：这是代码

<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>

用于编辑事件的模态组件：

<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 的引用。

有什么建议吗？

感谢大家的帮助。

Answer 1

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

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

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

因此使用方法 refetchEvents:

 calendar.refetchEvents()

Vue.js 和 FullCalendar 5 refetchEvents

Vue.js and FullCalendar 5 refetchEvents

ajax

vue.js

fullcalendar-scheduler

fullcalendar-5