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

4 回答 4

0

我正在使用webpack 延迟加载到import fullcalendar.io。

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

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

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

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

const dayGridPlugin = (await import('@fullcalendar/daygrid')).default;
于 2021-03-30T11:57:56.047 回答
0

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

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

我不得不改为：

plugins: [interaction, dayGrid, timeGrid, list],
于 2021-12-15T09:50:58.313 回答
0

我得到了同样的错误，这是我的进口

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();
                            });
于 2020-10-20T13:33:45.253 回答
0

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

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

        ....
     }
   }
});
于 2021-08-19T12:07:57.460 回答