events in fullcalendar/VUE application not updating

user_8218463 0
Viewed 6839

Inside of my cal.vue component I have a fullcalendar component. Within cal.vue I have a method called submit. Inside of submit I make a (successful) reference to the fullcalendar component with this.$refs.calendar. However when I do this.$refs.calendar.$emit('refetchEvents'); in my submit function the events are not fetched (my events are not updated on my calendar). Why are my events not being updated upon submit and how can I update them?

Here is the relevant code:

<template>
   <div id="calendar"  :navL="navLinks" :event-sources="eventSources" @event-selected="eventSelected" @event-created="eventCreated" :config="config" >
      <button    class="btn btn-secondary" v-on:click="submit()">
         Submit
      </button>
      <full-calendar id="target" ref="calendar" :event-sources="eventSources" @event-selected="eventSelected" @day-click="click"@event-created="eventCreated" :config="config"></full-calendar>
   </div>
</template>

<script>
   const self = this;
   export default {
      name: 'calendar',
      data() {
         return {
            eventSources: [
               {
                  url: 'http://localhost:3000/getAppointments',
                  type: 'GET',
                  data: {
                     id: this.$store.getters.user
                  },
                  error: function() {
                     alert('there was an error while fetching events!');
                  },
               }
            ],  
         };
      },

      methods: {
         submit: function() {
            console.log(this.$refs.calendar); //prints fullcalendar VUE component
            this.$refs.calendar.$emit('refetchEvents'); //nothing appears to happen here
         },
      },
   }
</script>
vue.js fullcalendar javascript
2 Answers

If using the vanilla FullCalendar via npm packages: "@fullcalendar/core", "@fullcalendar/daygrid", "@fullcalendar/timegrid", "@fullcalendar/vue"

html: <full-calendar ref="fullCalendar" :events="events" />
inside a method to update an event:
        let calendar = this.$refs.fullCalendar.getApi()
        const updatedEvent = calendar.getEventById(eventId)
        updatedEvent.setProp('title', 'New Title')
        updatedEvent.setProp('backgroundColor', 'yellow')
        updatedEvent.setProp('borderColor', 'yellow')
        updatedEvent.setProp('textColor', 'black')

The above will rerender the fullCalendar event but will not change your this.events array. There may be something that's a bit more all inclusive for ALL events in one shot otherwise you'd have to do:

this.events.forEach(event => {
  ...similar code the above
})
user_110471190
Related