Adapted calendar to support event links

ui/src/pages/Calendar.vue

@@ -9,6 +9,7 @@ import { getCalendarEvent, getMonthCalendarEvents } from '@/api/calendar'
 import { CalendarEvent, CalendarEventShort } from '@shared/types/calendar'
 import { Calendar } from '@fullcalendar/core'
 import ViewCalendarEvent from '@/components/calendar/ViewCalendarEvent.vue'
+import { useRouter, useRoute } from 'vue-router'
 
 const monthLabels = [
     'January', 'February', 'March', 'April', 'May', 'June',
@@ -23,6 +24,9 @@ function api() {
     return calendarRef.value?.getApi()
 }
 
+const router = useRouter();
+const route = useRoute();
+
 // keep dropdowns in sync whenever the calendar navigates
 function onDatesSet() {
     const d = api()?.getDate() ?? new Date()
@@ -87,15 +91,7 @@ const calendarRef = ref<InstanceType<typeof FullCalendar> | null>(null)
 
 async function onEventClick(arg: any) {
     const targetEvent = arg.event.id;
-    activeEvent.value = await getCalendarEvent(targetEvent);
-    console.log(activeEvent.value);
-    // activeEvent.value = {
-    //     id: arg.event.id,
-    //     title: arg.event.title,
-    //     start: arg.event.startStr,
-    //     end: arg.event.endStr,
-    //     extendedProps: arg.event.extendedProps
-    // }
+    router.push(`/calendar/event/${targetEvent}`)
     panelOpen.value = true
 }
 
@@ -170,6 +166,15 @@ const calendarOptions = ref({
 //@ts-ignore (shhh)
 calendarOptions.value.datesSet = onDatesSet
 
+watch(() => route.params.id, async (newID) => {
+    console.log(newID);
+    if (newID === undefined) {
+        panelOpen.value = false;
+    } else {
+        panelOpen.value = true;
+    }
+})
+
 
 watch(panelOpen, async () => {
     await nextTick()
@@ -245,10 +250,11 @@ onMounted(() => {
                     <FullCalendar ref="calendarRef" :options="calendarOptions" />
                 </div>
             </div>
-            <aside v-if="panelOpen && activeEvent"
+            <aside v-if="panelOpen"
                 class="3xl:w-lg 2xl:w-md border-l bg-card text-foreground flex flex-col overflow-auto scrollbar-themed"
                 :style="{ height: 'calc(100vh - 61px)', position: 'sticky', top: '64px' }">
-                <ViewCalendarEvent @close="() => {panelOpen = false; activeEvent = null;}" :event="activeEvent"></ViewCalendarEvent>
+                <ViewCalendarEvent @close="() => { router.push('/calendar'); }">
+                </ViewCalendarEvent>
             </aside>
         </div>
     </div>