1

我正在使用 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将 refs 提供给 FullCalendar。

有什么建议吗?

谢谢大家的任何帮助。

4

1 回答 1

0

如果为 Fullcalendar 使用官方 Vue 组件@fullcalendar/vue

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

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

所以使用方法refetchEvents:

 calendar.refetchEvents()
于 2020-09-09T22:36:50.140 回答