Fullcalendar Resources not showing in version 4

Question

I was using resources well in fullcalendar version 3. I'm moving to version 4 and had some breaking changes. I can get the calendar to show my events properly but once I start to add resources, I get this error in my console:

main.js:145 Uncaught TypeError: Cannot read property 'ResourceDayGrid' of undefined

Code:

document.addEventListener('DOMContentLoaded', function() {

    var calendar_full = document.getElementById('calendar_full');

    var calendar = new FullCalendar.Calendar(calendar_full, {
        selectMirror: true,
        plugins: ['interaction', 'resourceDayGrid', 'resourceTimeGrid'],
        header: {
            right: 'prevYear,prev,next,today,nextYear',
            center: 'title',
            left: 'resourceTimeGridDay,resourceTimeGridTwoDay,timeGridWeek,dayGridMonth'
        },
        views: {
            resourceTimeGridTwoDay: {
                type: 'resourceTimeGrid',
                duration: {
                    days: 2
                },
                buttonText: '2 days',
            }
        },
        defaultView: 'resourceTimeGridDay',
        datesAboveResources: true,
        editable: true,
        slotDuration: "<?php echo $location->data()->calendar_slot_duration; ?>",
        snapDuration: "<?php echo $location->data()->calendar_snap_duration; ?>",
        nowIndicator: true,
        minTime: "<?php echo $location->data()->calendar_start; ?>",
        maxTime: "<?php echo $location->data()->calendar_end; ?>",
        hiddenDays: $.parseJSON('[' + "<?php echo $location->data()->calendar_hide_days_of_week; ?>" + ']'),
        //            groupByResource: true,
        eventLimit: true,
        schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
        events: {
            url: 'ajax_get_json.php?what=location_appointments'
        },
        resources: [{
                id: '1',
                title: 'Room A'
            },
            {
                id: '2',
                title: 'Room B'
            }
        ]
    });

    calendar.render();

})

Here's an event JSON response example:

allDay: false
color: "#FFD700"
company_id: "1"
date_created: "2018-12-05 09:35:32"
start: "2019-04-30 14:00:00"
end: "2019-04-30 14:00:00"
id: "22218"
resourceId: "1"

If I change the default view to something that doesn't rely on resources, the calendar DOES show with all events. So this will render the calendar:

defaultView: 'dayGridMonth'

When I use defaultViews that use resources, I get the error.

Not sure how to troubleshoot this.

UPDATED TO ADD FOLLOWING SCRIPT INCLUDES:

<link href="added-assets/plugins/fullcalendar-4.0.2/packages/core/main.css" rel="stylesheet" />
<link href="added-assets/plugins/fullcalendar-4.0.2/packages/daygrid/main.css" rel="stylesheet" />
<link href="added-assets/plugins/fullcalendar-4.0.2/packages/timegrid/main.css" rel="stylesheet" />

<script src="added-assets/plugins/fullcalendar-4.0.2/packages/core/main.js" type="text/javascript"></script>
<script src="added-assets/plugins/fullcalendar-4.0.2/packages/daygrid/main.js" type="text/javascript"></script>
<script src="added-assets/plugins/fullcalendar-4.0.2/packages/interaction/main.js" type="text/javascript"></script>
<script src="added-assets/plugins/fullcalendar-4.0.2/packages/timegrid/main.js" type="text/javascript"></script>

<script src="added-assets/plugins/fullcalendar-4.0.2/packages/resource-common/main.js" type="text/javascript"></script>
<script src="added-assets/plugins/fullcalendar-4.0.2/packages/resource-timegrid/main.js" type="text/javascript"></script>
<script src="added-assets/plugins/fullcalendar-4.0.2/packages/resource-daygrid/main.js" type="text/javascript"></script>

ALSO, if it helps: I traced the error to the following line from the console error (the ResourceDayGrid function has the error):

_this.resourceTimeGrid = new ResourceTimeGrid(context, _this.timeGrid);
    if (_this.dayGrid) {
        _this.resourceDayGrid = new resourceDaygrid.ResourceDayGrid(context, _this.dayGrid);
    }

Can you show your includes or script tags? It sounds like you probably forgot to include a plugin or two — ADyson, Apr 30 '19 at 17:45
Yes! I just updated the question with those tags and the line that threw the error. I've been playing around with those includes thinking the same thing. Hopefully that helps. — chris.cavage, Apr 30 '19 at 18:12
It's weird, I can't find anything wrong with your code: https://codepen.io/anon/pen/oORaqR?&editable=true&editors=001 . Are you sure that all those files in the script tags loaded correctly? No 404 errors in your network tab or anything? Also it might be worth upgrading to 4.1, in case that's fixed anything — ADyson, Apr 30 '19 at 21:16
I see what you mean. This is weird to me. If I change the defaultviews to resourceDayGridDay then it works. In fact, any view that uses resourceDayGrid looks fine! However, any view that uses resourceTimeGrid throws that error. I updated to version 4.1 too. It has something to do with trying to display a view that has a time selections on it! The js is loading fine from resource-timegrid/main.js — chris.cavage, May 01 '19 at 02:17
Like I said, is it definitely loading all the JS files correctly? No typos or missing files in the directory? — ADyson, May 01 '19 at 06:16
It's definitely loading with no errors: v 4.1. I wonder if it has anything to do with other code. Is there a chance that certain features that are used for timegrid are causing an error? I added some of the code to eventclick, eventrender, snapduration, slotduration and so on. Could something there potentially cause this issue? I can share ALL of the code if there's a chance of that. — chris.cavage, May 01 '19 at 22:32
Well at this point I'm not going to discount that. Maybe add one bit at a time until the error occurs, then you'll have a better idea where it might be coming from — ADyson, May 01 '19 at 23:42

score 1 · Answer 1 · answered May 02 '19 at 17:37

I figured it out! I'm moving from fullcalendar 3 to v4. I was using a lot of jQuery and $(document).ready stuff. I was including the fullcalendar script AFTER the resources were included.

Since fullcalendar 4 isn't reliant on jQuery any longer, the order in which the script files are included is very important. Before the calendar was rendering after the document was ready and all files were included.

Once I included the resources BEFORE the calendar was rendered, it works!

It may seem like a trivial mistake, but it was one I overlooked given my inexperience with pure javascript and html.

Thank you for your help again, ADyson.

Fullcalendar Resources not showing in version 4

1 Answers1