feat:#17 share link in user calendar + overlay refinements

frontend/src/components/CalendarViewer.vue

@@ -46,12 +46,21 @@ const props = defineProps({
   },
 });
 
+type CalendarEvent = {
+  title: string;
+  start: Date | null;
+  end: Date | null;
+  notes: string;
+  allDay: boolean;
+  location: string;
+};
+
 const op = ref();
-const clickedEvent = ref();
+const clickedEvent : Ref<CalendarEvent | null> = ref(null);
 
 const toggle = (info: EventClickArg) => {
-  const start = !info.event.start ? "" : info.event.start;
-  const end = !info.event.end ? "" : info.event.end;
+  const start = !info.event.start ? null : info.event.start;
+  const end = !info.event.end ? null : info.event.end;
 
   if (op.value.visible) {
     clickedEvent.value = null;
@@ -199,12 +208,13 @@ watch(mobilePage, () => {
   </FullCalendar>
 
   <OverlayPanel ref="op">
-    <div>
+    <div v-if="clickedEvent">
       <h3>{{ clickedEvent.title }}</h3>
-      <p>Location: {{ clickedEvent.location }}</p>
-      <p>Start: {{ clickedEvent.start?.toLocaleString() }}</p>
-      <p>End: {{ clickedEvent.end?.toLocaleString() }}</p>
-      <p>Notes: {{ clickedEvent.notes }}</p>
+      <p><b>{{ $t("calendarViewer.location") }}:</b> {{ clickedEvent.location }}</p>
+      <p><b>{{ $t("calendarViewer.start") }}:</b> {{ clickedEvent.start ? $d(clickedEvent.start, "long") : ""}}</p>
+      <p><b>{{ $t("calendarViewer.end") }}:</b> {{ clickedEvent.end ? $d(clickedEvent.end, "long") : "" }}</p>
+      <p><b>{{ $t("calendarViewer.notes") }}:</b></p>
+      <p v-for="note in clickedEvent.notes.split('\n')" class="note-line">{{ note }}</p>
     </div>
   </OverlayPanel>
 </template>
@@ -215,4 +225,9 @@ watch(mobilePage, () => {
   justify-content: space-between;
   gap: 0.5rem;
 }
+
+.note-line {
+  margin: 0;
+  margin-left: 2rem;
+}
 </style>