feat:#13 added overlay panel with infos about event and colors

frontend/src/components/CalendarViewer.vue

@@ -25,6 +25,39 @@ const props = defineProps({
   },
 });
 
+const op = ref();
+const clickedEvent = ref();
+
+const toggle = (info: any) => {
+
+
+
+  if (op.value.visible) {
+    clickedEvent.value = null;
+    op.value.hide();
+    return;
+  } else {
+
+    const start = info.event._instance.range.start;
+    const end = info.event._instance.range.end;
+    const timeZoneOffsetStart = start.getTimezoneOffset() * 60000;
+    const timeZoneOffsetEnd = end.getTimezoneOffset() * 60000;
+
+    clickedEvent.value = {
+      title: info.event._def.title,
+      start: new Date(start.getTime() + timeZoneOffsetStart),
+      end: new Date(end.getTime() + timeZoneOffsetEnd),
+      notes: info.event._def.extendedProps.notes,
+      allDay: info.event._def.allDay,
+      location: info.event._def.extendedProps.location,
+    };
+      op.value.show(info.jsEvent);
+      op.value.target = info.el;
+  }
+
+
+}
+
 const selectedToken = computed(() => props.token);
 
 const mobilePage = inject("mobilePage") as Ref<boolean>;
@@ -42,6 +75,10 @@ const { data: calendar } = useQuery({
   staleTime: 5000000, // 500 seconds
 });
 
+const events = computed(() => {
+  return parseICalData(calendar.value);
+});
+
 const fullCalendar = ref<InstanceType<typeof FullCalendar>>();
 
 const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
@@ -58,6 +95,9 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
     minute: "2-digit",
     hour12: false,
   },
+  eventClick(info) {
+    toggle(info);
+  },
   height: "auto",
   views: {
     week: {
@@ -112,7 +152,7 @@ const calendarOptions: ComputedRef<CalendarOptions> = computed(() => ({
       },
     });
   },
-  events: parseICalData(calendar.value),
+  events: events.value,
 }));
 
 watch(mobilePage, () => {
@@ -121,7 +161,20 @@ watch(mobilePage, () => {
 </script>
 
 <template>
-  <FullCalendar ref="fullCalendar" :options="calendarOptions" />
+
+  <FullCalendar id="overlay-mount-point" ref="fullCalendar" :options="calendarOptions" >
+  </FullCalendar>
+
+  <OverlayPanel ref="op" >
+      <div>
+        <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>
+      </div>
+  </OverlayPanel>
+
 </template>
 
 <style scoped>