How do I run .getDate() on a Vue instance of FullCalendar

I'm using the vue implementation of FullCalendar, and I want to get the currently displayed month and year from the calendar instance. This is a Laravel app, so I register the FullCalendar component in app.js and then call it in the relevant Vue component:

app.js


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

    router: new VueRouter(routes),
});

Then

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>

Now, I'm trying to call the getDate() method on this instance, so I tried the following in a Vue method:

 methods: {

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

I also tried this.$refs.cc.fullCalendar.getDate(), but it's obvious to me I'm referencing it wrong. How can I reference the calendar instance so that I can still call the FullCalendar methods on it? Or is there another way to do this via Vue bindings?

The error I keep getting is:

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

1 answer

  • answered 2020-05-22 12:55 Cornel Verster

    Found it, you just need to call the getApi() method to access the full Api.

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