Vue Full Calendar (next, prev) buttons trigger
原文：https://stackoverflow.com/questions/50887335/vue-full-calendar-next-prev-buttons-trigger
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.
-
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 Jun 16 '18 at 19:19
Create a button yourself and give it a @click="next" event https://github.com/CroudTech/vue-fullcalendar#methods
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
}
}
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>
