Не удается прочитать свойство 'length' undefined - Fullcalendar

#jquery #ruby-on-rails #ruby #fullcalendar #fullcalendar-5

#jquery #ruby-on-rails #ruby #полный календарь #полный календарь-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>

1. где вы устанавливаете значение defs ??

2. Ваш установочный код выглядит неправильно. global.FullCalendar... Строка не должна быть необходимой. Смотрите fullcalendar.io/docs/initialize-es6 для примера.

Ответ №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 с отложенной загрузкой для import fullcalendar.io.

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

Во-первых, я получил ту же ошибку. Но затем документация webpack дала мне подсказку:

Обратите внимание, что при использовании import() в модулях ES6 вы должны ссылаться на .default свойство, поскольку это фактический объект модуля, который будет возвращен, когда обещание будет выполнено.

Итак, я решил эту проблему, используя .default свойство

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

Ответ №3:

Ошибка существует, потому что calendarEl равно null. Объявите 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],