[JS] fullcalendar import error

[IM_YOUR_MAMA]

Ik probeer google calendar plugin in fullcalendar (https://fullcalendar.io/docs/google-calendar) te importeren.
Ik heb daarbij alleen een error die ik nog niet heb kunnen fixen

Uncaught Error: Please import the top-level fullcalendar lib before attempting to import a plugin.

Wat ik uit de error haal is dat de plugin niet kan werken tot de "core" van fullcalendar is geimporteed.
Maar dat vind ik dus raar omdat ik de plugin daarna importeer. Het gaat ook alleen stuk bij de google calendar.
De daygrid en interaction heeft al een lange tijd gewerkt en werkt nog steeds.

Dit is een deel van de code wat ik nu heb

code:

import {Calendar} from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import interactionPlugin from '@fullcalendar/interaction';
import googleCalendarPlugin from '@fullcalendar/google-calendar';

code:

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

Ik heb online gezocht naar andere mensen die het zelfde probleem hadden. En bij hun was het altijd dat de import order verkeerd was. Maar bij mij weet ik zeker dat de order goed is

mijn sf: https://stackoverflow.com...r-lib-before-attempting-t

[Woy]

Heb je al gewoon geprobeerd wat er in de docs staat?

https://fullcalendar.io/docs/angular

En dan doel ik vooral op het importeren van de module ( in app.module.ts )

Het is even een aanname dat het over angular gaat, maar jij importeert alleen het calendar object uit core. Zo te zien zul je ook de library, module of bootstrapper nog moeten laden.

Verder ben ik niet bekend met de library, maar er zal vast een duidelijk voorbeeld in de docs staan.

Ah, zo te zien doe je puur typescript. Heb je al geprobeerd wat er in de docs staat om het in de juiste event handler te doen, zodat je zeker weet dat alles geladen is?

TypeScript:

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

document.addEventListener('DOMContentLoaded', function() {
  let calendarEl: HTMLElement = document.getElementById('calendar')!;

  let calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin ]
    // options here
  });

  calendar.render();
});

[ Voor 85% gewijzigd door Woy op 11-08-2020 23:25 ]

[IM_YOUR_MAMA]

Woy schreef op dinsdag 11 augustus 2020 @ 23:14:
Heb je al gewoon geprobeerd wat er in de docs staat?

https://fullcalendar.io/docs/angular

En dan doel ik vooral op het importeren van de module ( in app.module.ts )

Het is even een aanname dat het over angular gaat, maar jij importeert alleen het calendar object uit core. Zo te zien zul je ook de library, module of bootstrapper nog moeten laden.

Verder ben ik niet bekend met de library, maar er zal vast een duidelijk voorbeeld in de docs staan.

Ah, zo te zien doe je puur typescript. Heb je al geprobeerd wat er in de docs staat om het in de juiste event handler te doen, zodat je zeker weet dat alles geladen is?

TypeScript:

import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';

document.addEventListener('DOMContentLoaded', function() {
  let calendarEl: HTMLElement = document.getElementById('calendar')!;

  let calendar = new Calendar(calendarEl, {
    plugins: [ dayGridPlugin ]
    // options here
  });

  calendar.render();
});

Ja. Dat heb ik gedaan. Via een eigen event listener. Die werkt 100% dus daar kan het niet aan liggen.

code:

 document.addEventListener('buildPlugins', function (e) {


    const calendarEl = document.getElementById('calendar');//your dive id of calendar
    if (calendarEl) {
        const calendar = new Calendar(calendarEl, {
            plugins: [interactionPlugin, dayGridPlugin],

En het heeft alles geladen want anders zouden de andere plugins niet werken of de hele calendar werkt niet. Maar die werkt goed tot de plugin van google er in gaat

[ Voor 7% gewijzigd door IM_YOUR_MAMA op 12-08-2020 10:07 ]

[alienfruit]

Kan je het probleem reproduceren in bijvoorbeeld Codesandbox?

Inde broncode van fullcalendar is er dit:

code:

if (typeof FullCalendarVDom === 'undefined') {
  throw new Error(
    'Please import the top-level fullcalendar lib before attempting to import a plugin.'
  )
}

Kan het zijn dat je wat tree shaking doet? Waardoor FullCalendarVDom of Preact weg gestript wordt?

[ Voor 73% gewijzigd door alienfruit op 12-08-2020 17:56 ]

[IM_YOUR_MAMA]

alienfruit schreef op woensdag 12 augustus 2020 @ 17:49:
Kan je het probleem reproduceren in bijvoorbeeld Codesandbox?

Inde broncode van fullcalendar is er dit:

code:

if (typeof FullCalendarVDom === 'undefined') {
  throw new Error(
    'Please import the top-level fullcalendar lib before attempting to import a plugin.'
  )
}

Kan het zijn dat je wat tree shaking doet? Waardoor FullCalendarVDom of Preact weg gestript wordt?

https://codesandbox.io/s/...denavigation=1&theme=dark

"Kan het zijn dat je wat tree shaking doet?"
Nee. Niet dat ik weet

[Snake]

IM_YOUR_MAMA schreef op woensdag 12 augustus 2020 @ 17:59:
[...]


https://codesandbox.io/s/...denavigation=1&theme=dark

"Kan het zijn dat je wat tree shaking doet?"
Nee. Niet dat ik weet

Jouw package.json vraagt fullCalendar/google-calendar@5.2.0.

Hierdoor denk ik dat de major version niet overeenkomt met fullCalendar zelf.

Als ik alle versienummers naar 5+ gooi werkt het:
https://codesandbox.io/s/...-ginty?file=/package.json

[ Voor 31% gewijzigd door Snake op 13-08-2020 16:18 ]

[IM_YOUR_MAMA]

Snake schreef op woensdag 12 augustus 2020 @ 18:07:
[...]

Jouw package.json vraagt

fullCalendar/google-calendar@5.2.0

.

Hierdoor denk ik dat de major version niet overeenkomt met

fullCalendar

zelf.

Als ik alle versienummers naar 5+ gooi werkt het:
https://codesandbox.io/s/...-ginty?file=/package.json

Edit: hoe doe ik inline pre?

Wow. Dat ik dat niet een heb gezien
Wel raar vind ik dat heet geen "betere" error laat zien dat de versies niet kunnen samen werken.

Voor inline pre zie je een knop die er zo uit zien:

</>