I am trying to create a custom element which displays the FullCalendar node module.
The NPM package was successfully installed through the Corvid package manager.
I then created a custom element in Corvid, with the code below in the JavaScript file for that custom element, which has a tag of wix-calendar. However when I load the page in the browser, nothing appears, and I get no errors in the console.
Any ideas as to what I am doing wrong? Many thanks for any assistance you might be able to provide.
import { Calendar } from "fullcalendar";
import dayGridPlugin from "@fullcalendar/daygrid";
const DEBUG_TEXT = 'Loading the code for Custom Element \'wix-default-custom-element\'. ';
const createCalendarContainer = () => {
const calendarContainer = document.createElement('div');
calendarContainer.id = 'calendar';
return calendarContainer;
};
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
var calendar = new Calendar(calendarEl, {
plugins: [ dayGridPlugin ]
});
calendar.render();
});
class WixFullCalendar extends HTMLElement {
constructor() {
super();
console.log(DEBUG_TEXT);
}
connectedCallback() {
this.appendChild(createCalendarContainer());
}
}
customElements.define('wix-calendar', WixFullCalendar);