Adapted calendar to support event links

ui/src/components/calendar/ViewCalendarEvent.vue

@@ -1,22 +1,45 @@
 <script setup lang="ts">
 import type { CalendarEvent, CalendarSignup } from '@shared/types/calendar'
 import { Clock, MapPin, User, X } from 'lucide-vue-next';
-import { computed, ref } from 'vue';
+import { computed, onMounted, ref, watch } from 'vue';
 import ButtonGroup from '../ui/button-group/ButtonGroup.vue';
 import Button from '../ui/button/Button.vue';
-import { CalendarAttendance, setCalendarEventAttendance } from '@/api/calendar';
+import { CalendarAttendance, getCalendarEvent, setCalendarEventAttendance } from '@/api/calendar';
 import { useUserStore } from '@/stores/user';
+import { useRoute } from 'vue-router';
 
-const props = defineProps<{
-    event: CalendarEvent | null
-    onClose?: () => void
-}>()
+const route = useRoute();
+// const eventID = computed(() => {
+//     const id = route.params.id;
+//     if (typeof id === 'string') return id;
+//     return undefined;
+// });
+
+const loaded = ref<boolean>(false);
+const activeEvent = ref<CalendarEvent | null>(null);
+
+// onMounted(async () => {
+//     let eventID = route.params.id;
+//     console.log(eventID);
+//     activeEvent.value = await getCalendarEvent(Number(eventID));
+//     loaded.value = true;
+// });
+
+watch(
+  () => route.params.id,
+  async (id) => {
+    if (!id) return;
+    activeEvent.value = await getCalendarEvent(Number(id));
+    loaded.value = true;
+  },
+  { immediate: true }
+);
 
 const emit = defineEmits<{
     (e: 'close'): void
 }>()
 
-const activeEvent = computed(() => props.event)
+// const activeEvent = computed(() => props.event)
 
 const startFmt = new Intl.DateTimeFormat(undefined, {
     weekday: 'short', year: 'numeric', month: 'short', day: 'numeric',
@@ -53,7 +76,7 @@ async function setAttendance(state: CalendarAttendance) {
 </script>
 
 <template>
-    <div>
+    <div v-if="loaded">
         <!-- Header -->
         <div class="flex items-center justify-between gap-3 border-b px-4 py-3">
             <h2 class="text-lg font-semibold break-all">