using resources in fullcalendar - testing

Question

This topic follows this one about using fullcalendar :

how to set duration for external events in fullcalendar

Now I'm trying to use the resources. For now it's just testing so I used the following code:

document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');

var calendar = new FullCalendar.Calendar(calendarEl, {
    schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
    plugins: [ 'resourceTimeGrid' ],
    timeZone: 'UTC',
    defaultView: 'resourceTimeGridFourDay',
    datesAboveResources: true,
    header: {
        left: 'prev,next',
        center: 'title',
        right: 'resourceTimeGridDay,resourceTimeGridFourDay'
    },
    views: {
        resourceTimeGridFourDay: {
            type: 'resourceTimeGrid',
            duration: { days: 4 },
            buttonText: '4 days'
        }
    },
    resources: [
        { id: 'a', title: 'Room A' },
        { id: 'b', title: 'Room B' }
    ],
    events: 'https://fullcalendar.io/demo-events.json?with-resources=2'
});

calendar.render();
});

I'm inside a Symfony project. In terms of Javascript calls I had this :

                <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.1.0/main.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@4.1.0/main.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.1.0/main.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.1.0/main.min.js"></script>

So I added these 2 calls:

            <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/resource-common@4.1.0/main.min.js"></script>
            <script src="https://cdn.jsdelivr.net/npm/@fullcalendar/resource-timegrid@4.1.0/main.min.js"></script>

All of this was copy / pasted from the demo pages. Now when I load my page I have this error message and i don't understand why :

Uncaught TypeError: Cannot read property 'addEventListener' of null

It seems the error is triggered here :

    // Event Delegation
// ----------------------------------------------------------------------------------------------------------------
function listenBySelector(container, eventType, selector, handler) {
    function realHandler(ev) {
        var matchedChild = elementClosest(ev.target, selector);
        if (matchedChild) {
            handler.call(matchedChild, ev, matchedChild);
        }
    }
    container.addEventListener(eventType, realHandler);
    return function () {
        container.removeEventListener(eventType, realHandler);
    };
}

on this part :

container.addEventListener(eventType, realHandler);

What do you think may cause this issue ? A javascript missinh maybe ?

Answer 1

The error was due to a bad id in the div supposed to contain the calendar...

Everything is actually working fine and I was able to combine dragging events + using resources. The full code is :

<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/core@4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/interaction@4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/timegrid@4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/resource-common@4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/resource-daygrid@4.4.0/main.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fullcalendar/resource-timegrid@4.4.0/main.min.js"></script>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        var Calendar = FullCalendar.Calendar;
        var Draggable = FullCalendarInteraction.Draggable;

        var calendarEl = document.getElementById('calendar-holder');
        var containerEl = document.getElementById('external-events');


        // initialize the external events
        new Draggable(containerEl, {
            itemSelector: '.fc-event',
            eventData: function(eventEl) {
                var json_event = eventEl.getAttribute("data-event");
                var event_array = JSON.parse(json_event);
                var event_duration = event_array['duration'];
                var event_title = event_array['title'];
                var event_color = event_array['color'];

                return {
                    title: event_title, //eventEl.innerText,
                    duration: event_duration,
                    backgroundColor: event_color,
                };
            }
        });

        var calendar = new FullCalendar.Calendar(calendarEl, {
            schedulerLicenseKey: 'GPL-My-Project-Is-Open-Source',
            plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'resourceTimeGrid' ],
            timeZone: 'UTC',
            defaultView: 'resourceTimeGridFourDay',
            datesAboveResources: true,
            header: {
                left: 'prev,next',
                center: 'title',
                right: 'resourceTimeGridDay,resourceTimeGridFourDay'
            },
            views: {
                resourceTimeGridFourDay: {
                    type: 'resourceTimeGrid',
                    duration: { days: 4 },
                    buttonText: '4 days'
                }
            },
            resources: [
                { id: 'a', title: 'Room A' },
                { id: 'b', title: 'Room B' }
            ],
            events: 'https://fullcalendar.io/demo-events.json?with-resources=2'
        });

        calendar.render();
    });
</script>

Thank you ADyson once again, for taking the time to help me !