<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>