Having problems with fullcalendar modules to find each other with requirejs in Moodle

Question

Link to fullcalendar: https://fullcalendar.io/

So I'm having trouble with AMD modules referring to each other in Moodle. I Moodle docs they show how to include third party AMD modules and actually the example is the one I trying to include. Since the docs where written a new version has come out and it doesn't work the same anymore.

I have got it "working" but I get an error that it is not able to get the length of the plugin list. I suspect it is because the plugins are not loaded correct or else it is an error in the fullcalendar plugin itself.

I have read online, that in the new version, you should load the plugins and then pass the instances to the main plugin.

config.js This is the config file for loading the module (the Moodle way):

define([], function(){
    window.requirejs.config({
        paths: {
            "@fullcalendar/core":  M.cfg.wwwroot + '/blocks/pxeventcalendar/vendors/fullcalendar-4.2.0/packages/core/main.min',
            "@fullcalendar/daygrid":  M.cfg.wwwroot + '/blocks/pxeventcalendar/vendors/fullcalendar-4.2.0/packages/daygrid/main.min',
            "@fullcalendar/timegrid":  M.cfg.wwwroot + '/blocks/pxeventcalendar/vendors/fullcalendar-4.2.0/packages/timegrid/main.min',
            "@fullcalendar/list":  M.cfg.wwwroot + '/blocks/pxeventcalendar/vendors/fullcalendar-4.2.0/packages/list/main.min',
            "@fullcalendar/bootstrap": M.cfg.wwwroot + '/blocks/pxeventcalendar/vendors/fullcalendar-4.2.0/packages/bootstrap/main.min',
            "@fullcalendar/moment": M.cfg.wwwroot + '/blocks/pxeventcalendar/vendors/fullcalendar-4.2.0/packages/moment/main.min',
            "@fullcalendar/rrule": M.cfg.wwwroot + '/blocks/pxeventcalendar/vendors/fullcalendar-4.2.0/packages/rrule/main.min'
        },
        shim: {
            "core": {exports: "@fullcalendar/core"},
            "dayGrid": {exports: "@fullcalendar/daygrid"},
            "timeGrid": {exports: "@fullcalendar/timegrid"},
            "list": {exports: "@fullcalendar/list"},
            "bootstrap": {exports: "@fullcalendar/bootstrap"},
            "moment": {exports: "@fullcalendar/moment"},
            "rrule": {exports: "@fullcalendar/rrule"}
        }
    });
});

daygrid.js Then I added each plugin like this:

define(['block_pxeventcalendar/config', '@fullcalendar/daygrid'], function(unused, dayGrid){
    return dayGrid;
});

pxcalendar.js And finally I created my own module, where I use the calendar:

define([
    'block_pxeventcalendar/fullcalendar',
    'block_pxeventcalendar/daygrid',
    'block_pxeventcalendar/timegrid',
    'block_pxeventcalendar/list'
], function(FullCalendar, dayGrid, timeGrid, list){
    return {
        init: function(){
            new FullCalendar.Calendar(document.querySelector('#calendar'), {
                plugins: [dayGrid, timeGrid, list]
            });
        }
    };
});

And I of course have an HTML page with:

<div id="calendar"></div>

I expect the calendar to show up, but I get the following message in the console:

Cannot read property 'length' of undefined

I know what that means but it refers to core main.js and I think it is because of the plugins not loading correct. But I have debugged all the plugins comming in and I can se all the instances in the consolem just fine.

Having problems with fullcalendar modules to find each other with requirejs in Moodle

0 Answers0