Week events being pushed below Calendar

[Andyrooooo]

I have a JSON file that I get my event data from that I display with eventSources, but it always displays inside the calendar but below everything else, I've tried going through the documentation to figure it out but I haven't been able to turn anything up. I swapped between onMount, and beforeUpdate and beforeUpdate seems to work better but only works correctly very very rarely. Any ideas?

<script lang="ts">
    import Calendar from '@event-calendar/core'
	import ResourceTimeGrid from '@event-calendar/resource-time-grid'
	import TimeGrid from '@event-calendar/time-grid'
	import fullEventList from '../../data/FullEventList.json'
 	import { onMount, beforeUpdate } from 'svelte'
	import Filter from '../filter/+page.svelte'
	import Import from '../import/+page.svelte'

	let eventList: any[] = []

	beforeUpdate(() => {
		let tempEventList = fullEventList.filter(
			(item: any) => item?.extendedProps?.building_room === 'CS 509'
		)

		tempEventList.forEach((item: any) => {
			let tempEvent = {
				id: item.id,
				title: item.title,
				start: item.start,
				end: item.end
                //We might add eventBackgroundColor: soon
			}
			eventList.push(tempEvent)
		})
		console.log(eventList)
	})

    let ec 
	let plugins = [TimeGrid]
	let options = {
		date: new Date('2024-01-08'),
		view: 'timeGridWeek',
		allDaySlot: false,
		hiddenDays: [0, 7],
		slotDuration: '00:30:00',
		slotMinTime: '05:00:00',
		slotMaxTime: '23:00:00',
		slotHeight: 128,
        height: '100%',
		titleFormat: { year: 'numeric', month: 'long', day: 'numeric' },
        eventBackgroundColor: '#275D38',
        headerToolbar: {start: '', center: '', end: ''},
		eventSources: [
			{
				events: function () {
					return eventList
				}
			}
		]
        
	}
</script>

<Calendar bind:this={ec} {plugins} {options} />

[vkurko]

Could you clarify what it means "it always displays inside the calendar but below everything else"? Maybe you could provide a screenshot.

[Andyrooooo]

Apologies, In the photos, it will show the events added to the calendar will consistently get pushed below the actual calendar

[vkurko]

There's clearly some sort of CSS style conflict here. You can look in the web console to see which of your styles affect events. Unfortunately I can't do it without access to the page.