scrollTime is not working

[jinhuang11]

I'm able to run the Event Calendar demo locally and see 'scrollTime: '08:00:00" working fine.

But I'm not able to make the scrollTime work in the following code, not sure why. Could you help?

<script>
	import Calendar from '@event-calendar/core';
	import TimeGrid from '@event-calendar/time-grid';
	import dayGrid from '@event-calendar/day-grid';
	import Interaction from '@event-calendar/interaction';

    let calendarInstance; // This will reference the EventCalendar instance
	let plugins = [TimeGrid, dayGrid, Interaction];
	let options = {
		view: 'timeGridWeek',

		scrollTime: '08:00:00',
		views: {
            timeGridWeek: {pointer: true},
            resourceTimeGridWeek: {pointer: true}
        },
		dayMaxEvents: true,
        nowIndicator: true,
        selectable: true, 
		editable: true,
		select: function (info) {
          calendarInstance.addEvent(info);
        }
	};

</script>

<svelte:head>
	<title>Please share your availability</title>
</svelte:head>
<div class="relative flex flex-row items-center w-full px-10 py-10">
	<div
		class="relative w-full px-10 divide-gray-200 overflow-scroll rounded-3xl bg-[var(--main-nude-shade,#fffcf4)] min-h-[80vh] max-h-[calc(100vh-5rem)] border calendar-scroller"
	>
		<Calendar bind:this={calendarInstance} {plugins} {options} />
	</div>
</div>

[vkurko]

Maybe the calendar itself doesn't have a scrolling area at all? It would be helpful if you could prepare a live demo on StackBlitz.

[jinhuang11]

Thanks @vkurko for quick response and looking into this! Here is the live demo. Thanks!

[vkurko]

The calendar doesn't have the scrolling area. So there is nothing to scroll. Try adding height: '600px', to the options and you'll see the difference:

let options = {
  ...
  height: '600px',
  ...
}

[jinhuang11]

Thanks @vkurko! Adding "height" option solved the problem. Really appreciate!