javascript - 在 fullcalendar 中使用资源 - 测试

Question

本主题遵循有关使用 fullcalendar 的主题:

how to set duration for external events in fullcalendar

现在我正在尝试使用这些资源。目前它只是测试，所以我使用了以下代码:

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();
});

我在 Symfony 项目中。就 Javascript 调用而言，我有这样的:

                <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>

所以我添加了这两个调用:

            <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>

所有这些都是从演示页面复制/粘贴的。现在，当我加载页面时，我收到此错误消息，但我不明白为什么:

Uncaught TypeError: Cannot read property 'addEventListener' of null

看来错误是在这里触发的:

    // 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);
    };
}

关于这部分:

container.addEventListener(eventType, realHandler);

您认为什么可能导致此问题？也许是 JavaScript 缺失？

Answer 1

该错误是由于本应包含日历的 div 中的 ID 错误所致...

一切实际上都工作正常，我能够将拖动事件+使用资源结合起来。完整代码为:

<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>

再次感谢 ADyson 花时间帮助我!