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

What is the best way to locate the source of a custom Vue component?

Unable to invoke a custom hook within another custom hook in a React application

The Kendo Date Picker is failing to update properly when the k-ng-model is modified

What is the best way to iterate through data within a view while showcasing information retrieved using AngularJS?

Detecting mistakes using ES6 assurances and BookshelfJS

How can I ensure that my text input and button are in sync in ReactJS?

I'm receiving a Reference Error stating that 'next()' is not defined, despite the fact that I have defined it in my JavaScript code. What could be causing this issue?

Ways to deactivate just the Clicked button in a mapped over component

Typescript conversion: Changing a relational array into a tree object

Ways to send response data back to the parent template in Vue.js following an API request

Obtain an identifier to be used as dynamic data in an ajax request with jQuery

Not all comparisons between two tables are guaranteed to be successful

Updating the ContextKey of the DynamicPopulateExtender based on the selected value from a DropDownList dynamically

Error: Sorry, there was an issue with the code (React)

Having trouble bypassing custom points on the reactive gauge speedometer

`How can I stop typescript from converting dynamic imports to require()?`

"Encountering a problem with the client-session middleware: the value of req.session_state is becoming undefined

Shift div position when clicked and employ jQuery animations

Switching to a jQuery IF statement instead of a FOR loop allows for more streamlined

React input value doesn't get updated on onChange event causing the input