Unable to use Interactions Plugin or TimeGrid

[TBenTiCon]

Hi =)
im currently encountering a Bug, when trying to use the TimeGrid or the interactions Plugin.

The Interactionsplugin throws the following error, whenever i try to drag or click something:

Uncaught TypeError: Cannot read properties of null (reading 'Symbol(ec)')
    at getPayload (@event-calendar_interaction.js?t=1710331491295&v=75a4b8cf:145:12)
    at common (@event-calendar_interaction.js?t=1710331491295&v=75a4b8cf:514:35)
    at Action.drag (@event-calendar_interaction.js?t=1710331491295&v=75a4b8cf:467:9)
    at HTMLElement.<anonymous> (@event-calendar_day-grid.js?v=75a4b8cf:1055:67)
    at HTMLElement.<anonymous> (@event-calendar_day-grid.js?v=75a4b8cf:831:20)
    
    Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at findDayEl (@event-calendar_interaction.js?t=1710331491295&v=75a4b8cf:693:53)
    at move (@event-calendar_interaction.js?t=1710331491295&v=75a4b8cf:542:19)
    at handlePointerMove (@event-calendar_interaction.js?t=1710331491295&v=75a4b8cf:600:7)

The TimeGrid doesnt even load and throws the following error:

TypeError: Cannot read properties of undefined (reading 'update')
    at debounce (chunk-222LKEOT.js?v=75a4b8cf:184:14)
    at reposition (chunk-222LKEOT.js?v=75a4b8cf:4998:5)
    at $$self.$$.update (chunk-222LKEOT.js?v=75a4b8cf:5100:9)
    at init (chunk-E2DDHNJ5.js?v=75a4b8cf:2200:6)
    at new Week (chunk-222LKEOT.js?v=75a4b8cf:5140:5)
    at Array.create_default_slot_1 (chunk-222LKEOT.js?v=75a4b8cf:5477:10)
    at create_slot (chunk-E2DDHNJ5.js?v=75a4b8cf:101:25)
    at create_fragment (chunk-222LKEOT.js?v=75a4b8cf:679:24)
    at init (chunk-E2DDHNJ5.js?v=75a4b8cf:2203:35)
    at new Section (chunk-222LKEOT.js?v=75a4b8cf:976:5)

My Implementation looks like this:

<script>
	import Calendar from '@event-calendar/core';
	import DayGrid from '@event-calendar/day-grid';
	import TimeGrid from '@event-calendar/time-grid';
	import Interactions from '@event-calendar/interaction';
	import '@event-calendar/core/index.css';

	let options = {
		view: 'timeGridWeek',
		events: createEvents(),
		editable: true,
		dayMaxEvents: true,
		nowIndicator: true,
		selectable: true,

		eventDragStart: function (info) {
			console.log('dragStart');
		},
		eventDragStop: function (info) {
			console.log('dragStop');
		},
		eventDrop: function (info) {
			console.log('drop');
		},
		dateClick: function (info) {
			console.log('dateClick');
		}
	};

	function createEvents() {
		let days = [];
		for (let i = 0; i < 7; ++i) {
			let day = new Date();
			let diff = i - day.getDay();
			day.setDate(day.getDate() + diff);
			days[i] = day.getFullYear() + '-' + _pad(day.getMonth() + 1) + '-' + _pad(day.getDate());
		}

		return [
			{ start: days[0] + ' 00:00', end: days[0] + ' 09:00', resourceId: 1, display: 'background' },
			{ start: days[1] + ' 12:00', end: days[1] + ' 14:00', resourceId: 2, display: 'background' },
			{ start: days[2] + ' 17:00', end: days[2] + ' 24:00', resourceId: 1, display: 'background' },
			{
				start: days[0] + ' 10:00',
				end: days[0] + ' 14:00',
				resourceId: 1,
				title: 'The calendar can display background and regular events',
				color: '#FE6B64'
			},
			{
				start: days[1] + ' 16:00',
				end: days[2] + ' 08:00',
				resourceId: 2,
				title: 'An event may span to another day',
				color: '#B29DD9'
			},
			{
				start: days[2] + ' 09:00',
				end: days[2] + ' 13:00',
				resourceId: 2,
				title:
					'Events can be assigned to resources and the calendar has the resources view built-in',
				color: '#779ECB'
			},
			{
				start: days[3] + ' 14:00',
				end: days[3] + ' 20:00',
				resourceId: 1,
				title: '',
				color: '#FE6B64'
			},
			{
				start: days[3] + ' 15:00',
				end: days[3] + ' 18:00',
				resourceId: 1,
				title: 'Overlapping events are positioned properly',
				color: '#779ECB'
			},
			{
				start: days[5] + ' 10:00',
				end: days[5] + ' 16:00',
				resourceId: 2,
				title: { html: 'You have complete control over the <i><b>display</b></i> of events…' },
				color: '#779ECB'
			},
			{
				start: days[5] + ' 14:00',
				end: days[5] + ' 19:00',
				resourceId: 2,
				title: '…and you can drag and drop the events!',
				color: '#FE6B64'
			},
			{
				start: days[5] + ' 18:00',
				end: days[5] + ' 21:00',
				resourceId: 2,
				title: '',
				color: '#B29DD9'
			},
			{
				start: days[1],
				end: days[3],
				resourceId: 1,
				title: 'All-day events can be displayed at the top',
				color: '#B29DD9',
				allDay: true
			}
		];
	}

	function _pad(num) {
		let norm = Math.floor(Math.abs(num));
		return (norm < 10 ? '0' : '') + norm;
	}
</script>

<Calendar {options} plugins={[DayGrid, TimeGrid, Interactions]} />

Could someone point me in the right direction?

Thank yu for your help =)

[vkurko]

Hello, I prepared a demo using your code and I don't see any errors. Can you reproduce the errors in the demo?

[TBenTiCon]

Hi,
sorry for the late reply! I've been sick for quite some time.

I cant reproduce the error in that demo. Any next steps we could try?

[vkurko]

You need to somehow provide a working demo where I can reproduce the problem. The demo I prepared uses 100% of your code, so the problem is definitely not in there.

[TBenTiCon]

it seems it does not work with sveltekit 1. I just migrated the project to sveltekit 2 and that seems to solve the issue =)

[vkurko]

Great!