vue-fullcalendar as a child component, event handlers and watched data mixups...

[steven87vt]

@BrockReece,

I have been using your vue wrapper for about two months now and have created a pretty awesome scheduling assistant for my customer with it. Thanks for the great product and your support as well.

Sorry for the essay but I wanted to present all the facts that I have, maybe its me maybe its a event issue I have no idea at this point.

I implemented a bootstrap modal to handle configurations of events and editing data which is shown on click of events, select etc. This modal is a wrapper for other dynamic components, all in all it handles multiple components depending on the configuration data you provide it before you show it.

modal html:
<component :is="componentName" v-bind:component-data="data"></component>

I also implemented a custom header because I didn't feel like fullcalendar.io bootstrap options were sufficient for my look and feel requirements. The header buttons are all event handlers and they trigger the various controls. So kudos to you, I re-implemented the entire fullcalendar.io header controls and more with your wrapper.

With that said I noticed in the 'hide.bs.modal' jquery handler, as well as in the header event handlers, I had to go out of my way to make the calendar remove anything. For example, a temporary event I create as a placeholder e.g. this.events.push(placeHolder); so when the calendar loses focus to the modal the selection doesn't disappear. The same issue was happening when I was handling events that change the view, I filter out events not within the current date range for performance reason (heavy use of RGB calcuations and color shifting etc). When the event handler would change the this.events array, the event handler would exit and nothing. I do believe I remember debugging and seeing the watcher issue the updates though, which is why im kinda scratching my head.

The workaround for the change view handler was nextTick, however it would not work for the modal dismiss via keyboard action: this.$nextTick(() => ... re-initialize dataset for new view ...);

Even after re-initializing the entire dataset, so that an all new array would be created without the placeholder, manually triggering 'reload-events', even using nextTick, would not get fullcalendar.io to update. No clue why, would you have any thoughts or insight into why dismissing the modal on click with data-targets would allow fullcalendar.io to update and using escape key would not? Am I missing something about vue event handlers and watchers?

What I ended up doing was this:

dynamic child component of the modal:
$('#confirmModal.modal.fade.bd-example-modal-lg').on('hide.bs.modal', function (event) {
    if ($(this).hasClass('add-event-form')) {
        self.$nextTick(() => {
            self.emitEvent('add-event-form-cancel', self.scheduleData);
            ...
        });
    }
});

schedule component that issues the modal and its configuration:
mounted() {
...
  this.$on('add-event-form--cancel', (data) => {
      let remove = this.getCalendarEventObject('placeHolderId');
      if (remove) {
        this.$refs.calendar.$emit('remove-event', remove); //this works for both situations
      }
     ...
  }
}

methods: ...
getCalendarEventObject(eventId) {
    if (eventId) {
        let eventArray = this.$refs.calendar.fireMethod('clientEvents', eventId); 
        //were not implementing grouping of events so will always be 1 here.
       if(eventArray) {        
         return eventArray[0];
       }
    }
    return
}

[BrockReece]

@steven87vt

Thanks for your kind words, I am glad that this project is helping you. Is there any work you can share, I would be super interested to see it. Also, thanks for your contributions on the issues, I have been a little too busy recently.

Any chance you could create a code sandbox to replicate the issue, from what I have read your approach seems sensible, but it has a lot of moving parts and it would be good to fiddle with the issue the see what I can figure out.

[steven87vt]

@BrockReece I haven't forgotten about this, just haven't had time to create a sample. I will try to get to this next week.