Add calendar route and integrate calendar component in Navbar

frontend/src/lib/components/Navbar.svelte

@@ -5,14 +5,10 @@
 	import type { SubmitFunction } from '@sveltejs/kit';
 
 	import DotsHorizontal from '~icons/mdi/dots-horizontal';
-	import WeatherSunny from '~icons/mdi/weather-sunny';
+	import Calendar from '~icons/mdi/calendar';
-	import WeatherNight from '~icons/mdi/weather-night';
-	import Forest from '~icons/mdi/forest';
-	import Water from '~icons/mdi/water';
 	import AboutModal from './AboutModal.svelte';
 	import AccountMultiple from '~icons/mdi/account-multiple';
 	import Avatar from './Avatar.svelte';
-	import PaletteOutline from '~icons/mdi/palette-outline';
 	import { page } from '$app/stores';
 	import { t, locale, locales } from 'svelte-i18n';
 	import { themes } from '$lib';
@@ -91,6 +87,9 @@
 					<li>
 						<button on:click={() => goto('/map')}>{$t('navbar.map')}</button>
 					</li>
+					<li>
+						<button on:click={() => goto('/calendar')}>{$t('navbar.calendar')}</button>
+					</li>
 					<li>
 						<button on:click={() => goto('/users')}>{$t('navbar.users')}</button>
 					</li>
@@ -157,6 +156,9 @@
 				<li>
 					<button class="btn btn-neutral" on:click={() => goto('/map')}>{$t('navbar.map')}</button>
 				</li>
+				<li>
+					<button class="btn btn-neutral" on:click={() => goto('/calendar')}><Calendar /></button>
+				</li>
 				<li>
 					<button class="btn btn-neutral" on:click={() => goto('/users')}
 						><AccountMultiple /></button

frontend/src/locales/en.json

@@ -19,6 +19,7 @@
 		"discord": "Discord",
 		"language_selection": "Language",
 		"support": "Support",
+		"calendar": "Calendar",
 		"theme_selection": "Theme Selection",
 		"themes": {
 			"light": "Light",

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>