javascript - events in fullcalendarVUE application not updating - Stack Overflow

admin管理员组

文章数量:1389762

Inside of my cal.vue ponent I have a fullcalendar ponent. Within cal.vue I have a method called submit. Inside of submit I make a (successful) reference to the fullcalendar ponent 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 ponent
            this.$refs.calendar.$emit('refetchEvents'); //nothing appears to happen here
         },
      },
   }
</script>

Inside of my cal.vue ponent I have a fullcalendar ponent. Within cal.vue I have a method called submit. Inside of submit I make a (successful) reference to the fullcalendar ponent 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 ponent
            this.$refs.calendar.$emit('refetchEvents'); //nothing appears to happen here
         },
      },
   }
</script>

• javascript
• vue.js
• fullcalendar

Share Improve this question Follow edited Jul 14, 2017 at 2:46 Bert 82.5k1717 gold badges203203 silver badges166166 bronze badges asked Jul 13, 2017 at 14:06 MattMatt 50144 silver badges1414 bronze badges 6

• What is full-calendar? A Vue ponent wrapping a jQuery plugin? Does it still use jQuery? – Bert Commented Jul 13, 2017 at 16:24
• full-calendar is a VUE ponent wrapping the jQuery plugin fullcalendar. I believe it uses jQuery – Matt Commented Jul 13, 2017 at 17:26
• Do you have a link? There are at least two Vue wrappers. – Bert Commented Jul 13, 2017 at 17:27
• calendar.vue is where the above code is located – Matt Commented Jul 13, 2017 at 17:40
• If the VUE code looks ok it could be a problem with the vue-fullcalendar wrapper I am using. I'll post an issue to them and see what they say – Matt Commented Jul 13, 2017 at 17:57

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 4

According to the documentation,

this.$refs.calendar.$emit('refetchEvents')

should be

this.$refs.calendar.$emit('refetch-events')

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
})

本文标签： javascriptevents in fullcalendarVUE application not updatingStack Overflow