CroudTech / vue-fullcalendar

FullCalendar Wrapper for vue
MIT License
483 stars 100 forks source link

Error in mounted hook #20

Closed mickspecial closed 7 years ago

mickspecial commented 7 years ago

I'm getting this error when I first transisition to a page

Error in mounted hook: "TypeError: cal.fullCalendar is not a function"

Along with

cal.fullCalendar is not a function

But on page refresh it goes away and the calendar load and works as expected.

Thanks for any advice

BrockReece commented 7 years ago

Hi @mickspecial I have not seen this error before sorry. Have you wrapped the component in a transition block?

mickspecial commented 7 years ago

Yes thats correct the page is being displayed within a transition following a redirection using the router.

<transition
mode="out-in"
enter-active-class="animated fadeInLeft" 
leave-active-class="animated fadeOutLeft">
<router-view></router-view>
</transition>

I ended up just using the standard full calendar as I wanted to use the fullcalendar-scheduler

Hopefully you can resolve this bug and add in the scheduler as would much prefer to use your handy implementation.

Thanks

BrockReece commented 7 years ago

What do your animation classes look like? I have just tested with a basic fade transition, with 'out-in' mode and it seemed to work.

It looks like that the scheduler module should work by just importing the scheduler.js file into the parent component, like....

import 'fullcalendar-scheduler'
mickspecial commented 7 years ago

Hi,

I removed the animation effects so, my router has no transitions, and was still getting the problem.

After a couple of hours of trail and error, and random posts on stackoverflow - I saw this one

FullCalendar TypeError: $(…).fullCalendar is not a function

There was an answer with no votes (now 1) - mentioning importing jQuery twice caused an issue.

So, after removing

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>

from my index.html solved the problem, I had that import this for bootstrap.

Glad the problem is fixed.

M

BrockReece commented 7 years ago

Oh cool, glad that you found a fix for this. Does it work with the transitions again?

mickspecial commented 7 years ago

Yes, works perfect with animations.