2

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

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

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

1 回答 1

1

我想到了！我正在从 fullcalendar 3 迁移到 v4。我使用了很多 jQuery 和 $(document).ready 的东西。在包含资源之后，我包含了完整的日历脚本。

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

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

这似乎是一个微不足道的错误，但鉴于我对纯 javascript 和 html 的经验不足，我忽略了它。

再次感谢您的帮助，阿迪森。

于 2019-05-02T17:37:59.393 回答