использование ресурсов в fullcalendar - тестирование - PullRequest
Новая
       15

использование ресурсов в fullcalendar - тестирование

0 голосов
/ 02 апреля 2020

Этот топи c следует за этим при использовании fullcalendar:

как установить продолжительность для внешних событий в 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>

Итак, я добавил эти 2 вызова: 

            <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 мисс, может быть?

1 Ответ

1 голос
/ 02 апреля 2020

Ошибка произошла из-за неверного идентификатора в div, который должен содержать календарь ...

На самом деле все работает нормально, и я смог объединить перетаскивание событий + использование ресурсов. Полный код: 

<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, что нашли время помочь мне!

...