Fullcalendar ресурсы не отображаются в версии 4 - PullRequest
Новая
       8

Fullcalendar ресурсы не отображаются в версии 4

1 голос
/ 30 апреля 2019

Я хорошо использовал ресурсы в полной версии календаря 3. Я перехожу на версию 4, и у меня произошли серьезные изменения. Я могу заставить календарь правильно показывать мои события, но как только я начинаю добавлять ресурсы, я получаю эту ошибку в своей консоли: 

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

Код: 

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

})

Вот пример ответа JSON на событие: 

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"

Если я изменю представление по умолчанию на то, что не зависит от ресурсов, календарь СЛЕДУЕТ показывать со всеми событиями. Так что это сделает календарь: 

defaultView: 'dayGridMonth'

Когда я использую defaultViews, которые используют ресурсы, я получаю сообщение об ошибке.

Не уверен, как решить эту проблему.

ОБНОВЛЕНО, ЧТОБЫ ДОБАВИТЬ СЛЕДУЮЩИЙ СЦЕНАРИЙ, ВКЛЮЧАЯ: 

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

ТАКЖЕ, если это поможет: я отследил ошибку до следующей строки из ошибки консоли (функция ResourceDayGrid содержит ошибку): 

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

1 Ответ

0 голосов
/ 02 мая 2019

Я понял это! Я перехожу с fullcalendar 3 на v4. Я использовал много jQuery и $ (document) .ready материал. Я включил сценарий fullcalendar ПОСЛЕ включения ресурсов.

Поскольку fullcalendar 4 больше не зависит от jQuery, порядок включения файлов сценариев очень важен. Перед рендерингом календаря после того, как документ был готов и все файлы были включены.

Как только я включил ресурсы ДО того, как календарь был отрендерен, он работает!

Это может показаться тривиальной ошибкой, но я ее упустил из виду, учитывая мою неопытность с использованием чистого javascript и html.

Еще раз спасибо за вашу помощь, ADyson.

...