无法读取未定义的属性"长度" - 完整日历

Question

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

application.js

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

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

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

Answer 2

我正在使用webpack延迟加载到importfullcalendar.io.

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

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

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

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

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

Answer 3

由于calendarEl为null，因此出现错误。在该函数之前声明calendar。在定义calendarEl的行之后，将所有内容包装在条件检查中

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

Answer 4

我在将Webpack引入已经运行的应用程序时遇到了同样的错误，该应用程序可以与一些旧版本的Fullcalendar一起使用。npm库的一些选项名称已经更改，所以我不得不更新它们(如"defaultView"到"initialView"(。导致上述错误的原因是行：

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

我不得不改成：

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