Arhn - архитектура программирования

Ошибка Javascript el.addClass не является функцией при попытке отобразить полный календарь как настраиваемый элемент html.

В настоящее время я помогаю другу с его веб-сайтом Wix установить fullCalendar. Пакет NPM был установлен через диспетчер пакетов Corvid.

Затем я создал пользовательский элемент в Corvid с приведенным ниже кодом в файле JavaScript для этого пользовательского элемента, который имеет тег wix-calendar. РЕДАКТИРОВАТЬ. Как и было предложено, я обновил код, который теперь показывает ошибку вместе с журналами консоли.

См. часть 1 (код) и часть 2 (вывод) ниже.

Часть 1: js, связанный с пользовательским html-компонентом wix:

import { React } from "react";
import { Calendar } from "fullcalendar";
import { jquery } from "jquery";
import dayGridPlugin from "@fullcalendar/daygrid";
const DEBUG_TEXT = '1-class definitions callback';
const DEBUG_TEXT2 = '2-render function called';
const calendarContainer = document.createElement('div');
console.log("here we go");

class WixFullCalendar extends HTMLElement {

  constructor() {
    super();
    console.log(DEBUG_TEXT);
  }

  connectedCallback() {
  const calendarEl = document.createElement('div');
  calendarEl.setAttribute('id', 'calendar');
  console.log(calendarEl);

  const calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin ]

  });



  console.log(DEBUG_TEXT2)
  calendar.render();

  }
}
customElements.define('wix-calendar', WixFullCalendar);

Часть 2: консольный вывод

   here we go wix-calendar.js:14 
    1-class definitions callback wix-calendar.js:20 
    <div id=​"calendar">​</div>​ wix-calendar.js:29 
    2-render function called fullcalendar.js:10807
      <div id="calendar"></div>
   > Uncaught TypeError: el.addClass is not a function
    >     at Calendar.initialRender (fullcalendar.js:10807)
    >     at Calendar.render (fullcalendar.js:10796)
    >     at HTMLElement.connectedCallback (wix-calendar.js:30)
    >     at Object.12.@fullcalendar/daygrid (wix-calendar.js:34)
    >     at o (_prelude.js:1)
    >     at r (_prelude.js:1)
    >     at _prelude.js:1
    >     at _prelude.js:1
    >     at _prelude.js:1 Calendar.initialRender @ fullcalendar.js:10800 Calendar.render @ fullcalendar.js:10794 connectedCallback @
    > wix-calendar.js:30
    > 12.@fullcalendar/daygrid @ wix-calendar.js:34 o @ _prelude.js:1 r @ _prelude.js:1 (anonymous) @ _prelude.js:1 (anonymous) @ _prelude.js:1 (anonymous) @ _prelude.js:1

  • Одна базовая проверка: уверены ли вы, что this.appendChild(createCalendarContainer()) выполняется до var calendarEl = document.getElementById('calendar');? Потому что иначе это не сработает, так как элемента календаря еще не будет. Может быть, вам следует подумать о том, чтобы весь код, рисующий календарь, находился внутри обратного вызова createCalendarContainer? Я не знаю точно, как этот материал Wix должен работать, но это идея, если есть проблемы со временем, которые я только что описал. Без каких-либо сообщений об ошибках или другой отладочной информации, это мое лучшее предположение о проблеме. 15.06.2020
  • @ADyson Привет, спасибо за ваш ответ. Я определенно все еще учусь, когда дело доходит до es6, я пришел из интерфейса, но больше в духе традиционных js и jquery. Сложность здесь заключается в том, что Wix не позволяет мне поместить ‹div id=calendar›‹/div› в тело, поэтому я чувствую, что ваш комментарий об исправлении времени может быть точным. Не могли бы вы привести пример того, как я могу изменить свой код, чтобы все выполнялось в правильном порядке? 17.06.2020
  • Что ж, было бы полезно, если бы вы могли сначала подтвердить, верна ли идея выбора времени? Добавление простого ведения журнала консоли в код должно позволить вам увидеть порядок, в котором выполняются различные фрагменты кода. 17.06.2020
  • @ADyson, не могли бы вы просмотреть обновленный код и сообщение консоли и сообщить мне какие-либо предложения? 28.06.2020
  • Здесь происходит что-то странное. addClass — это функция jQuery. fullCalendar v4 больше не использует jQuery, в отличие от v3. Вам как-то удалось включить в сборку несколько файлов fullCalendar v3? 28.06.2020

Ответы:


1

Вы пытались вставить div через Wix Dashboard/Tracking Tools & Analytics?

24.06.2020
  • Привет @giri Я попробовал, как вы предложили, добавив ‹div id=calendar›‹/div› с помощью раздела «Отслеживание и аналитика», добавив его сразу после открывающего тега ‹body›, однако при предварительном просмотре сайта div не появился . 28.06.2020
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..