Fullcalendar-scheduler cannot set property 'scheduler Version' of undefined

Question

I'm having quite of an issue here. I use ocLazyLoader to load full calendar and it works well, but when ever I'm trying to include fullCalendar-scheduler as well i'm having this error in JavaScript.

Uncaught TypeError: Cannot set property 'schedulerVersion' of undefined

It looks like it cannot set a variable equals to $.fullCalendar in the source code of the plugins.
Here are how I instanciate my files :

resolve: {
    resources: function($ocLazyLoad) {
        return $ocLazyLoad.load([
            ASSETS.forms.multiSelect
        ])
    },fullCalendarScheduler: function($ocLazyLoad){
        return $ocLazyLoad.load([
            ASSETS.core.moment,
            ASSETS.extra.scheduler,
        ]);
    },
    fullCalendar: function($ocLazyLoad){
        return $ocLazyLoad.load([
            ASSETS.extra.fullCalendar
        ]);
    },
}

I pass the correct value aswell in the controller.

controller('AccueilCtrl', ['$scope', '$filter', 'fullCalendar', 'fullCalendarScheduler', function($scope, $filter, fullCalendar, fullCalendarScheduler) {

Any ideas on how to fix this?

Answer 1

for those having this problem i found a way to fix it. I don't know if it's the right way to do but it does works.
Fullcalendar required a specifics order to import the required files. Using OcLazyLoad, you can determine this order by using the files: [] parameters. Ex:

fullCalendar: function($ocLazyLoad){
                return $ocLazyLoad.load({
                    files: [
                        appHelper.assetPath('js/fullCalendar/3.1.0/fullcalendar.min.css'),
                        appHelper.assetPath('js/scheduler/1.5.0/scheduler.min.css'),
                        appHelper.assetPath('js/moment.min.js'),
                        appHelper.assetPath('js/fullCalendar/3.1.0/fullcalendar.min.js'),
                        appHelper.assetPath('js/scheduler/1.5.0/scheduler.min.js')
                    ]
                });
            }

This way, i was able to import the required files in the required order. You could also seperate the css from the js in the ASSETS and then import it in the correct order.

Answer 2

Had the same issue when loading the calandar files dynamically via jQuery's $.getScript(url); method and I came across this post. Thanks, Nick, for posting your solution!

After changing the load order, everything worked great. The load order for me was:

1st - load all css

2nd - load js in this order:

• moment.min.js
• fullcalendar.min.js
• scheduler.min.js
• bootstrap.min.js
• ...

Hope this helps someone else.