我正在使用 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将 refs 提供给 FullCalendar。
有什么建议吗？
谢谢大家的任何帮助。