Question

我在fullcalendar版本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>

ALSO，如果有帮助：我从控制台错误（ResourceDayGrid函数有错误）将错误跟踪到以下行：

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

Answer 1

我知道了！我正在从全日历3迁移到v4。我使用了大量的jQuery和$（document）.ready东西。包括资源之后，我就加入了全日历脚本。

由于fullcalendar 4不再依赖jQuery，因此包含脚本文件的顺序非常重要。在准备好日历并包括所有文件之后，在渲染日历之前。

一旦我在日历渲染之前添加了资源，它就可以工作！

这似乎是一个微不足道的错误，但是由于我对纯JavaScript和html的经验不足，所以我忽略了这个错误。

ADyson，再次感谢您的帮助。

Fullcalendar资源未在版本4中显示

1 个答案: