Add calendar route and integrate calendar component in Navbar

frontend/src/routes/calendar/+page.server.ts

@@ -0,0 +1,20 @@
+import type { Adventure } from '$lib/types';
+import type { PageServerLoad } from './$types';
+const PUBLIC_SERVER_URL = process.env['PUBLIC_SERVER_URL'];
+const endpoint = PUBLIC_SERVER_URL || 'http://localhost:8000';
+
+export const load = (async (event) => {
+	let sessionId = event.cookies.get('sessionid');
+	let visitedFetch = await fetch(`${endpoint}/api/adventures/all/?include_collections=true`, {
+		headers: {
+			Cookie: `sessionid=${sessionId}`
+		}
+	});
+	let adventures = (await visitedFetch.json()) as Adventure[];
+
+	return {
+		props: {
+			adventures
+		}
+	};
+}) satisfies PageServerLoad;

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+	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 adventures = data.props.adventures;
+
+	let dates: Array<{
+		id: string;
+		start: string;
+		end: string;
+		title: string;
+		backgroundColor?: string;
+	}> = [];
+	adventures.forEach((adventure) => {
+		adventure.visits.forEach((visit) => {
+			dates.push({
+				id: adventure.id,
+				start: visit.start_date,
+				end: visit.end_date,
+				title: adventure.name + ' ' + adventure.category?.icon
+			});
+		});
+	});
+
+	let plugins = [TimeGrid, DayGrid];
+	let options = {
+		view: 'dayGridMonth',
+		events: [...dates]
+	};
+</script>
+
+<h1 class="text-center text-2xl font-bold">Adventure Calendar</h1>
+
+<Calendar {plugins} {options} />