无法读取未定义的属性“长度” - Fullcalendar答案

【问题标题】：Cannot read property 'length' of undefined - Fullcalendar无法读取未定义的属性“长度” - Fullcalendar
【发布时间】：2020-12-23 14:46:32
【问题描述】：

Uncaught TypeError: Cannot read property 'length' of undefined

突出显示这部分 fullcalendar/main.js 代码中的错误

function addDefs(defs) {
    for (var _i = 0, defs_1 = defs; _i < defs_1.length; _i++)

这是我的代码：

yarn add @fullcalendar/core
yarn add @fullcalendar/daygrid

应用程序.js

import moment from 'moment'
window.moment = moment
import { Calendar } from '@fullcalendar/core/';
import dayGridPlugin from '@fullcalendar/daygrid';
global.FullCalendar = require("@fullcalendar/core/");

应用程序.scss

@import '@fullcalendar/common/main.css';
@import '@fullcalendar/daygrid/main.css';

查看

<div id="calendar"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
  var calendarEl = document.getElementById('calendar');

  var calendar = new FullCalendar.Calendar(calendarEl, {

        ....
    }
});

  // render the calendar
  calendar.render();
});
</script>

【问题讨论】：

你在哪里设置 defs 的值？？
您的设置代码看起来有误。 global.FullCalendar... 行不应该是必需的。有关示例，请参见 fullcalendar.io/docs/initialize-es6。

标签： jquery ruby-on-rails ruby fullcalendar fullcalendar-5

【解决方案1】：

我遇到了同样的错误，这是我的导入

import * as Calendar from '@fullcalendar/core';
import * as dayGridPlugin from '@fullcalendar/daygrid';
import * as listPlugin from '@fullcalendar/list';
import * as interactionPlugin from '@fullcalendar/interaction';

window.FullCalendar = Calendar;
window.dayGridPlugin = dayGridPlugin;
window.listPlugin = listPlugin;
window.interactionPlugin = interactionPlugin;

我是这样使用它的：

document.addEventListener('DOMContentLoaded', function() {
                                let calendarEl = document.getElementById('calendar');

                                let calendar = new FullCalendar.Calendar(calendarEl, {
                                    plugins: [ dayGridPlugin ],
                                    initialView: 'dayGridMonth',
                                    initialDate: '2020-10-07',
                                    headerToolbar: {
                                        left: 'prev,next today',
                                        center: 'title',
                                        right: 'dayGridMonth,timeGridWeek,timeGridDay'
                                    },
                                    events: [
                                        {
                                            title: 'All Day Event',
                                            start: '2020-10-01'
                                        },
                                        {
                                            title: 'Long Event',
                                            start: '2020-10-07',
                                            end: '2020-10-10'
                                        },
                                        {
                                            groupId: '999',
                                            title: 'Repeating Event',
                                            start: '2020-10-09T16:00:00'
                                        },
                                        {
                                            groupId: '999',
                                            title: 'Repeating Event',
                                            start: '2020-10-16T16:00:00'
                                        },
                                        {
                                            title: 'Conference',
                                            start: '2020-10-11',
                                            end: '2020-10-13'
                                        },
                                        {
                                            title: 'Meeting',
                                            start: '2020-10-12T10:30:00',
                                            end: '2020-10-12T12:30:00'
                                        },
                                        {
                                            title: 'Lunch',
                                            start: '2020-10-12T12:00:00'
                                        },
                                        {
                                            title: 'Meeting',
                                            start: '2020-10-12T14:30:00'
                                        },
                                        {
                                            title: 'Birthday Party',
                                            start: '2020-10-13T07:00:00'
                                        },
                                        {
                                            title: 'Click for Google',
                                            url: 'http://google.com/',
                                            start: '2020-10-28'
                                        }
                                    ]
                                });

                                calendar.render();
                            });

【讨论】：

【解决方案2】：

我正在使用 webpack lazy-loading 到 import fullcalendar.io。

const dayGridPlugin = await import('@fullcalendar/daygrid');

首先，我遇到了同样的错误。但是后来webpack文档给了我一个提示：

请注意，在 ES6 模块上使用 import() 时，您必须引用 .default 属性，因为它是承诺时将返回的实际模块对象已解决。

所以我使用.default 属性解决了这个问题

const dayGridPlugin = (await import('@fullcalendar/daygrid')).default;

【讨论】：

【解决方案3】：

出现错误是因为calendarEl 为空。在该函数之前声明calendar。在定义calendarEl 的那一行之后，将所有内容都包含在条件检查中

var calendar;
  document.addEventListener('DOMContentLoaded', function () {
  var calendarEl = document.getElementById('calendar');
  if (calendarEl != null) {
     calendar = new FullCalendar.Calendar(calendarEl, {

        ....
     }
   }
});

【讨论】：

【解决方案4】：

在将 Webpack 引入已在使用旧版本 Fullcalendar 的应用程序中时，我遇到了同样的错误。来自 npm 的库选项的某些名称已更改，因此我不得不更新它们（例如“defaultView”到“initialView”）。导致上述错误的原因是行：

plugins: ["interaction", "dayGrid", "timeGrid", "list"],

我不得不改成：

plugins: [interaction, dayGrid, timeGrid, list],

【讨论】：