Vue Full Calendar (next, prev) buttons trigger

2
votes

I'm using https://www.npmjs.com/package/vue-full-calendar in the project. I run into

problem when I need to get callback or trigger of next and prev buttons of calendar.

My api of backend built on parameter month returing events. I have request methods in Vuejs, which accept parameter and return events. For current month I just use the fetch method in created() function, it returns events and I simply make equals to calendar events, something like that:

axios.get(/fetch/events?month=6).then(e => this.events = this.responseToEvents(e.data)).catch( e => ...).

Now I need to understand when user click on next or previous buttons for triggering this request with property month and refetch events. I didn't find a way to make it, the only way is to use jQuery.

3
javascriptvue.jsvuejs2fullcalendar
Your plugin is just a wrapper around fullcalender, which is a jQuery plugin. Every jQuery event is emitted through the plugin. You can just use on of these callbacks described in the doku fullcalendar.io/docs/event-display – Reiner

3 Answers

2
votes

You can override default buttons:

<full-calendar ref="fullCalendar" :custom-buttons="customButtons" :header="header" />

<script>   
  data() {
    return {
      header: {
        left: "prev,next today",
        center: "title",
        right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek"
      },
      customButtons: { 
        prev: { // this overrides the prev button
          text: "PREV", 
          click: () => {           
            console.log("eventPrev");
            let calendarApi = this.$refs.fullCalendar.getApi();
            calendarApi.prev();
          }
        },
        next: { // this overrides the next button
          text: "PREV",
          click: () => {
             console.log("eventNext");
             let calendarApi = this.$refs.fullCalendar.getApi();
             calendarApi.next();
          }
        }
      }
    }

</script>
1
votes

Create a button yourself and give it a @click="next" event https://github.com/CroudTech/vue-fullcalendar#methods

0
votes

Emitted Events: changeMonth
e.g. 

<template>
  <full-calendar
    @changeMonth="changeMonth"
  ></full-calendar>
</template>

import FullCalendar from 'vue-fullcalendar'

...
  components: {
    FullCalendar
  },
...

methods: {
  changeMonth(start, end, currentMonthStartDate) {
     console.log(currentMonthStartDate); // the start date of the current month after changing month by clicking the '<'(previous) or '>'(next) button
  }
}