Refactor AdventureCard usage and integrate event calendar components

frontend/src/routes/dashboard/+page.svelte

@@ -1,9 +1,26 @@
 <script lang="ts">
 	import AdventureCard from '$lib/components/AdventureCard.svelte';
 	import type { PageData } from './$types';
+	// @ts-ignore
+	import Calendar from '@event-calendar/core';
+	// @ts-ignore
+	import TimeGrid from '@event-calendar/time-grid';
+	// @ts-ignore
+	import DayGrid from '@event-calendar/day-grid';
 
 	export let data: PageData;
 
+	let plugins = [DayGrid, TimeGrid];
+	let options = {
+		view: 'dayGridMonth',
+		events: [
+			// 2024 december 1st
+			{ start: '2024-12-01', end: '2024-12-02', title: 'Event 1' },
+			// 2024 december 2nd
+			{ start: '2024-12-02', end: '2024-12-03', title: 'Event 2' }
+		]
+	};
+
 	// Mock data
 	const user = data.user;
 	const recentAdventures = data.props.adventures;
@@ -82,7 +99,7 @@
 	<h2 class="text-3xl font-semibold mb-4">Recent Adventures</h2>
 	<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
 		{#each recentAdventures as adventure}
-			<AdventureCard {adventure} type="someType" user={data.user} />
+			<AdventureCard {adventure} user={data.user} readOnly />
 		{/each}
 	</div>
 
@@ -100,6 +117,7 @@
 		</div>
 	</div>
 </div>
+<Calendar {plugins} {options} />
 
 <svelte:head>
 	<title>Dashboard | AdventureLog</title>