Question

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

2020-09-04

3372

jquery ruby-on-rails ruby fullcalendar fullcalendar-5

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 lazy-loading 来 import fullcalendar.io 。

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

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

Note that when using import() on ES6 modules you must reference the .default property as it's the actual module object that will be returned when the promise is resolved.

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

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

Answer 3

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

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

        ....
     }
   }
});