Vue.js and FullCalendar 5 refetchEvents - ajax

Question

I am using FullCalendar and Vue.
I am trying to reload the events once the refreshCal() is triggered and so render the calendar on the screen with refetchEvents.
I have to main components:
The Calendar: here is the code
<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>
A modal component to edit the event:
<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>
I have been trying
this.$parent.$parent.$refs.calsession.$emit('refetch-events')
as found in FullCalendar documents and various researches on the internet but it has never worked.
$emit('refetch-events') or $emit('refetchEvents') doens't do anything.
Just for information: this.$parent.$parent.$refs gives the refs to FullCalendar.
Any suggestion?
Thank you all for any kind of help.

Answer 1

if using the official Vue component for Fullcalendar: #fullcalendar/vue
don't need to use emit but get the Calendar object through the getApi method:
let calendar = this.$parent.$parent.$refs.calsession.getApi()
and so using the method refetchEvents:
calendar.refetchEvents()