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

frontend/package-lock.json

@@ -4477,6 +4477,7 @@
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
       "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "license": "MIT",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/kossnocorp"
@@ -4486,6 +4487,7 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-3.1.3.tgz",
       "integrity": "sha512-ZfbMu+nbzW0mEzC8VZrLiSWvUIaI3aRHeq33mTe7Y38UctKukgqPR4nTDwcwS4d64Gf8GghnVsroBuMY3eiTeA==",
+      "license": "MIT",
       "peerDependencies": {
         "date-fns": "^3.0.0"
       }

frontend/public/primevue-sass-theme/themes/lara/lara-light/green/theme.scss

@@ -63,6 +63,10 @@ $highlightFocusBg: rgba($primaryColor, .24) !default;
     margin: 1%;
   }
 
+  .fc-v-event .fc-event-main {
+    color: map-get($colors, "htwk-schwarz"); /*#1c2127*/
+  }
+
   .fc.fc-unthemed .fc-view-container .fc-divider {
     background: $primaryTextColor; /*#071426*/
     border: 1px solid map-get($colors, "htwk-grau-140"); /*#0b213f*/

frontend/public/themes/lara-light-blue/theme.css

@@ -10138,6 +10138,9 @@
   border-radius: 6px;
   margin: 1%;
 }
+:root .fc-v-event .fc-event-main {
+  color: #000000; /*#1c2127*/
+}
 :root .fc.fc-unthemed .fc-view-container .fc-divider {
   background: #ffffff; /*#071426*/
   border: 1px solid #1b2022; /*#0b213f*/

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>

frontend/src/helpers/ical.ts

@@ -1,24 +1,89 @@
-import ICAL from 'ical.js';
-import { CalendarComponent } from 'ical';
+import ICAL from "ical.js";
+import { CalendarComponent } from "ical";
 
-export function parseICalData(icalData: string | undefined) {
+/**
+ * Interface for the color distinction event
+ * @param title Event name
+ * @param color Color code for the event
+ */
+export interface ColorDistinctionEvent {
+  title: string;
+  color: string;
+}
+
+/**
+ * Parses iCal data and returns an array of calendar components
+ * @param icalData iCal data to parse
+ * @returns Array of calendar components
+ */
+export function parseICalData(icalData: string | undefined): CalendarComponent[] {
   if (icalData === undefined || !icalData) {
     return [];
+  } else {
+    const jCalData = ICAL.parse(icalData);
+    const comp = new ICAL.Component(jCalData);
+    const vEvents = comp.getAllSubcomponents('vevent');
+    const colorDistinctionEvents = extracted(vEvents);
+
+    return vEvents.map((vevent: CalendarComponent) => {
+      const event = new ICAL.Event(vevent);
+
+      return {
+        title: event.summary,
+        start: event.startDate.toJSDate(),
+        end: event.endDate.toJSDate(),
+        notes: event.description,
+        allDay: event.startDate.isDate,
+        color: colorDistinctionEvents.find((e: ColorDistinctionEvent) => e.title === event.summary)?.color,
+        id: event.uid,
+        location: event.location,
+      };
+    });
   }
+}
 
-  const jCalData = ICAL.parse(icalData);
-  const comp = new ICAL.Component(jCalData);
-  const vEvents = comp.getAllSubcomponents('vevent');
-
-  return vEvents.map((vevent: CalendarComponent) => {
+/**
+ * Extracts the event names and assigns a color to each event
+ * @param vEvents Array of calendar components
+ * @returns Array of objects with event name and color
+ */
+function extracted(vEvents: CalendarComponent[]): ColorDistinctionEvent[] {
+  // filter vevents to get all unique event names
+  const distinctEvents = vEvents.filter((vevent: CalendarComponent, index: number, self: CalendarComponent[]) => {
     const event = new ICAL.Event(vevent);
+    return self.findIndex((v) => {
+      const e = new ICAL.Event(v);
+      return e.summary === event.summary;
+    }) === index;
+  });
 
+  //create dynamic color distinctionEvents map that will be used to color code events
+  return distinctEvents.map((vevent: CalendarComponent) => {
+    const event = new ICAL.Event(vevent);
+    // map event name to a color for color coding css
+    // like var(--htwk-rot-700)
+    const colors: string[] = [
+      "var(--htwk-rot-200)",
+      "var(--htwk-gruen-300)",
+      "var(--htwk-magenta-400)",
+      "var(--htwk-cyan-400)",
+      "var(--htwk-silbergrau-600)",
+      "var(--htwk-yellow-300)",
+      "var(--htwk-blau-300)",
+      "var(--htwk-dunkelblau-200)",
+      "var(--htwk-rot-400)",
+      "var(--htwk-gruen-400)",
+      "var(--htwk-blau-200)"
+    ];
+
+    // give each event a color based on its name ascending
+    const randomColor = colors[distinctEvents.findIndex((e: CalendarComponent) => {
+      const ev = new ICAL.Event(e);
+      return ev.summary === event.summary;
+    }) % colors.length];
     return {
       title: event.summary,
-      start: event.startDate.toJSDate(),
-      end: event.endDate.toJSDate(),
-      allDay: event.startDate.isDate,
-      // Include other properties as needed
+      color: randomColor
     };
   });
-}
+}

frontend/src/main.ts

@@ -31,6 +31,7 @@ import Card from "primevue/card";
 import DataView from "primevue/dataview";
 import Dialog from "primevue/dialog";
 import Slider from "primevue/slider";
+import OverlayPanel from 'primevue/overlaypanel';
 import ToggleButton from "primevue/togglebutton";
 import "primeicons/primeicons.css";
 import "primeflex/primeflex.css";
@@ -109,5 +110,6 @@ app.component("ProgressSpinner", ProgressSpinner);
 app.component("Checkbox", Checkbox);
 app.component("Skeleton", Skeleton);
 app.component("Calendar", Calendar);
+app.component("OverlayPanel", OverlayPanel);
 
 app.mount("#app");