[Vue warn]: Error in mounted hook: "TypeError: cal.fullCalendar is not a function"

[MattCCC]

[Vue warn]: Error in mounted hook: "TypeError: cal.fullCalendar is not a function"

Error appears with fullcalendar properly installed.

[BrockReece]

Can you share some code? I can't replicate with the latest version of vue-full-callendar

[MattCCC]

Ok, so I realized that it's because of missing jQuery, but I have it specified globally in Webpack as well as in the other bundle in the browser, so... I started to dig around and it seems that problem appears when jQuery is included in another file and specifying not helps: window.jQuery = window.$ = jQuery.noConflict();. So I checked the component and I did following changes:

1. I Required jQuery and fullcalendar straight before "export" (I think it should be required in the component if it is needed) var jQuery = require('jquery'); require('fullcalendar');

My mounted function looks as follow:

            Vue.nextTick(function() {
              this.$on('remove-event', (event) => {
                  if(event && event.hasOwnProperty('id')){
                      $(this.$el).fullCalendar('removeEvents', event.id);
                  }else{
                      $(this.$el).fullCalendar('removeEvents', event);
                  }
              })

              this.$on('rerender-events', () => {
                  $(this.$el).fullCalendar('rerenderEvents')
              })

              this.$on('refetch-events', () => {
                  $(this.$el).fullCalendar('refetchEvents')
              })

              this.$on('render-event', (event) => {
                  $(this.$el).fullCalendar('renderEvent', event)
              })

              this.$on('reload-events', () => {
                  $(this.$el).fullCalendar('removeEvents')
                  $(this.$el).fullCalendar('addEventSource', this.events)
              })

              this.$on('rebuild-sources', () => {
                  $(this.$el).fullCalendar('removeEvents')
                  this.eventSources.map(event => {
                      $(this.$el).fullCalendar('addEventSource', event)
                  })
              })

              jQuery(this.$el).fullCalendar(defaultsDeep(this.config, this.defaultConfig))
            }.bind(this))

I hope it's going to help you with debug or anyone who has similar problem.

[BrockReece]

Ah ok, I was wondering if you had seen PR #54? I think this addresses the issues you are having.

[pspuarduino]

I have the same issue, get it then trying to render full-calendar components after getting data from server...

<div v-for="EquipmentCard in EquipmentCards">
   <full-calendar></full-calendar>
</div>

[BrockReece]

@MattCz this has now been merged in, let me know if you are still having an issue. @pspuarduino does this solve your issue too?

[pspuarduino]

yes, thanks you solved my problem

[BrockReece]

Perfect thanks.