Activation of navigation buttons in the Vue Full Calendar control the movement to the next and previous

Question

Activation of navigation buttons in the Vue Full Calendar control the movement to the next and previous

In my current project, I am utilizing https://www.npmjs.com/package/vue-full-calendar. However, I have encountered an issue when trying to receive callbacks or triggers from the next and previous buttons on the calendar.

My backend API is structured around receiving events based on a monthly parameter. In Vuejs, I have request methods that accept parameters and return events. For the current month, I simply call the fetch method within the created() function, retrieve the events, and assign them to the calendar like so:
axios.get(/fetch/events?month=6).then(e => this.events = this.responseToEvents(e.data)).catch( e => ...).

Now, I need to figure out how to detect when a user clicks on the next or previous buttons in order to trigger a re-fetch of events with the appropriate month property. So far, I haven't found a solution that doesn't involve using jQuery.

javascript vue.js vuejs2 fullcalendar

Answer 1

Answer №1

You have the ability to customize 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: { // changing the prev button
          text: "PREV", 
          click: () => {           
            console.log("eventPrev");
            let calendarApi = this.$refs.fullCalendar.getApi();
            calendarApi.prev();
          }
        },
        next: { // updating the next button
          text: "NEXT",
          click: () => {
             console.log("eventNext");
             let calendarApi = this.$refs.fullCalendar.getApi();
             calendarApi.next();
          }
        }
      }
    }

</script>

Answer 2

You have the ability to customize 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: { // changing the prev button
          text: "PREV", 
          click: () => {           
            console.log("eventPrev");
            let calendarApi = this.$refs.fullCalendar.getApi();
            calendarApi.prev();
          }
        },
        next: { // updating the next button
          text: "NEXT",
          click: () => {
             console.log("eventNext");
             let calendarApi = this.$refs.fullCalendar.getApi();
             calendarApi.next();
          }
        }
      }
    }

</script>

Answer 3

Answer №2

Design your own button and add a @click="next" event to it. Visit this link for more information

Answer 4

Design your own button and add a @click="next" event to it. Visit this link for more information

Answer 5

Answer №3

Triggered Events: changeMonth
example:

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

import FullCalendar from 'vue-fullcalendar'

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

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

Answer 6

Triggered Events: changeMonth
example:

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

import FullCalendar from 'vue-fullcalendar'

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

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

Activation of navigation buttons in the Vue Full Calendar control the movement to the next and previous

Answer №1

Answer №2

Answer №3

Similar questions

The Angular Sortable Containment feature ensures that items cannot be dropped outside of

Organizing the directory layout for the /profile/username/followers route in NextJs

The JavaScript fetch API failed to receive a response after sending data via a 'POST' request to a Django server

Avoid matching the regular expression

"Unlock the power of Passport.js: A guide to leveraging async rendering for email templates

JavaScript - Retrieve a nested property within an object using an array of strings

What causes the discrepancy in the output values of the sha1 algorithm when using the packages object-hash and crypto/hashlib

Updating choices within a div in real-time by changing the select box dynamically

utilizing axios to send multiple data using flask api and vuejs

Guide on Redirecting Response to a File using Co-Request module with NodeJs

Calling functions in AngularJS/HTML can help you execute specific

Managing user input in Node.js

What is the best way to display a div beneath the highlighted text within a textarea field?

Receiving error messages about missing images in my React project

In AngularJs, use ng repeat and ng switch to dynamically generate and display tables

Can you explain the process that takes place when require("http").Server() is called with an Express application passed in as a parameter?

Navigating through a diagonal path

Error in Angular: Trying to access property 'setLng' of a null component variable

Implement the use of NextAuth to save the session during registration by utilizing the email and password

Activate the "order evaluation" trigger on the checkout page in Woocommerce