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

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

@@ -1,27 +1,9 @@
 <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;
 	const stats = data.props.stats;
@@ -117,7 +99,6 @@
 		</div>
 	</div>
 </div>
-<Calendar {plugins} {options} />
 
 <svelte:head>
 	<title>Dashboard | AdventureLog</title>