Dynamically load resources

[chrislebaron]

I would like to dynamically update the resources in my config after page load. I found the documentation on how to do this on fullcalendar here: https://fullcalendar.io/docs/addResource, but have been unable to get it to work with Vue.

Here's a basic example of what I tried:

this.$refs.calendar.fireMethod('addResource', {
    id: 'e',
    title: 'Room E'
})

I'm then confronted with this error:

TypeError: Cannot read property 'eventClassName' of undefined

Any thoughts on how I could approach this better?

Thanks!

[smingam]

Have you tried a computed property for your resources? Or something dynamic from the Vue viewpoint. Last month I did a quick'n'dirty try of the scheduler, and I can't remember why, but from what I see in my code, I had to add the resources after mounted and have a merge in a computed (my resources this.fullCalendarResources comes from a vuex store, which compute it from other getters). I suppose it is dynamic (if your config is a computed and change, the calendar is rebuild), but I haven't tried yet.

<full-calendar ref="calendar" :config="fcComputedConfig">

 fcComputedConfig () { 
            return this._.merge({}, this.fcConfig, { resources: this.fullCalendarResources, resourceAreaWidth: '10%' }) 
 }

 mounted () { 
        this.$set(this.$refs.calendar.config, 'resources', this.fullCalendarResources)