Rerender calendar after it is destroyed

[Yorgovan]

I am using scheduler add-on and I am trying to dynamically change resources. Problem is that after changing it is not updated in fullcalendar so I am assuming I should destroy and rerender it after resources are changed.

But I can't achieve that with code like this:

changeResource () {
  this.$refs.calendar.fireMethod('destroy')
  this.config.resources = [{ id: 1, title: 'Test resource' }]
  this.$refs.calendar.fireMethod('render')
}

With this calendar is destroyed but it is not rerendered again. Can it be done without reloading whole page?

[BrockReece]

Is the resource an option? If so, you could try setting the resource option dynamically?

[Yorgovan]

Is the resource an option? If so, you could try setting the resource option dynamically?

I tried but it doesn't work. It requires Scheduler and there are methods for it. For example refetchResources, but when I fire it nothing happens.

[BenSampo]

I just spent a whole bunch of time tackling this same issue. It turns out that the refetchResources method doesn't do anything unless the resources config prop is set up as a function or feed.

See docs: https://fullcalendar.io/docs/resources-json-feed https://fullcalendar.io/docs/resources-function

The way I implemented this is by setting up the config object as a computed property, where the resources property is set up as a function which returns a data attribute in the callback. Then when resources are updated, you need to fire the refetchResources event to get fullcalendar to rerender the resources.

Code example:

<template>
    <full-calendar :config="config" :events="events" ref="calendar" />
</template>

<script>
import moment from "moment";

export default {
    data() {
        return {
            events: [],
            resources: [],
        };
    },

    computed: {
        config() {
            return {
                schedulerLicenseKey: "GPL-My-Project-Is-Open-Source",
                defaultView: "timelineDay",
                header: {
                    left: "prev,next",
                    center: "title",
                    right: "timelineDay,timelineWeek,timelineMonth"
                },
                resourceLabelText: "Example",
                resources: (callback) => {
                    callback(this.resources);
                },
            };
        }
    },

    mounted() {
        this.getEvents();
        this.getResources();
    },

    methods: {
        getEvents() {       
            this.events = [
                {
                    title: "test",
                    resourceId: "a",
                    start: moment(),
                    end: moment().add(1, "d")
                },
            ];
        },

        getResources() {    
            this.resources = [
                {
                    id: "a",
                    title: "Category",
                    children: [
                        {
                            id: "a-a",
                            title: "Sub Category",
                        }
                    ]
                },
            ];

            this.$refs.calendar.fireMethod('refetchResources');
        }
    },
};
</script>