如何在FullCalendar的Vue实例上运行FullCalendar()

Question

我正在使用vue实现 of FullCalendar，我希望从日历实例中获取当前显示的月份和年份。这是一个Laravel应用程序，所以我将FullCalendar组件注册到app.js中，然后在相关的Vue组件中调用它：

app.js

import FullCalendar from '@fullcalendar/vue';
...
...
Vue.component('full-calendar', FullCalendar);
...
...
const app = new Vue({
    el: '#app',

    router: new VueRouter(routes),
});

然后

MyComponent.vue

<template>
    <div>
        <full-calendar class="mt-2"
            ref="cc"
            @eventClick="eventClicked"
            @eventRender="eventRender"
            :selectable="true"
            default-view="dayGridMonth" 
            :events="change_events" 
            :plugins="calendar_plugins"></full-calendar>
        </div>
</template>

<script>
   ...
</script>

现在，我试图在这个实例上调用getDate()方法，因此我在Vue方法中尝试了以下操作：

 methods: {

    getSelectedMonth() {
      console.log(this.$refs.cc.getDate());
    },
}

我也尝试过this.$refs.cc.fullCalendar.getDate()，，但对我来说很明显，我引用错了。如何引用日历实例，以便仍然可以调用其上的FullCalendar方法？或者有其他方法可以通过Vue绑定来实现这一点？

我一直在犯的错误是：

app.js:82407 [Vue warn]: Error in v-on handler: "TypeError: this.$refs.cc.getDate is not a function"

Answer 1

找到它后，只需调用getApi()方法就可以访问完整的Api。

methods: {

    getSelectedMonth() {
      let calendarApi = this.$refs.cc.getApi();
      console.log(calendarApi.getDate());
    },
}