I just figured it out. I had to move the dhtmlxscheduler.js into SvelteKit’s ./static and import it like:
await import('/dhtmlxscheduler.js?url');
scheduler = window.scheduler;
Heyo,
we’ve been using the individual version 7.0.2 of the scheduler with Svelte 4, but when migrating to Svelte 5 we suddenly get the following error:
skins.js:145 Uncaught (in promise) TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
at scheduler2._build_skin_info (skins.js:145:5)
at scheduler2._skin_init (jquery.js:1:25)
at scheduler2.init (scheduler.js:212:11)
at HTMLButtonElement.setUpScheduler (+page.svelte:139:1)
This error happens when calling:
scheduler.init('scheduler_here', new Date(), 'week');
after the component and DOM etc are fully initialized.
After a bit of debugging I found that $container inside dhtmlxscheduler.js is undefined, but I don’t know why (in my svelte component it does exist when I call init).
Replacing
const styles = getComputedStyle(this.$container);
with
const styles = getComputedStyle(component);`
gets me the next error message
at scheduler2.attachEvent.once (dhtmlxscheduler.js?t…31672620249:6123:39)
at Object.handler (dhtmlxscheduler.js?t…731672620249:442:13)
at Proxy.eventStorage (dhtmlxscheduler.js?t…731672620249:425:43)
at obj2.callEvent (dhtmlxscheduler.js?t…731672620249:488:39)
at scheduler2.init_templates (dhtmlxscheduler.js?t…31672620249:3392:12)
at scheduler2.init (dhtmlxscheduler.js?t…731672620249:630:12)
at HTMLButtonElement.setUpScheduler [as __click] (+page.svelte:142:1)
So something in the way the HTML Element of the scheduler gets passed into the library seems to be broken in Svelte5?
Passing the component directly (by binding the element), instead of the ID, doesn’t change anythign either.
Delving in a bit deeper on line 624 in the dhtmlxscsheduler.js in the scheduler.init function, the $container exists
console.log('Before', this.$container)
if (this._skin_init)
scheduler2._skin_init();
Inside of the _skin_init it’s undefined
scheduler2._skin_init = function () {
console.log(this.$container)
this._build_skin_info();