From 5181b642c730166389cd48f16625cea303673502 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Sat, 25 Mar 2023 20:34:10 +0100
Subject: [PATCH 01/13] basic impementation of a calendar

---
 webclient/components/CalendarModal.vue | 116 +++++++++++++++++++++++++
 webclient/package.json                 |   3 +-
 2 files changed, 118 insertions(+), 1 deletion(-)
 create mode 100644 webclient/components/CalendarModal.vue

diff --git a/webclient/components/CalendarModal.vue b/webclient/components/CalendarModal.vue
new file mode 100644
index 000000000..5cad523e1
--- /dev/null
+++ b/webclient/components/CalendarModal.vue
@@ -0,0 +1,116 @@
+<script setup lang="ts">
+import { CalendarView, CalendarViewHeader } from "vue-simple-calendar";
+import { ref, computed, watch } from "vue";
+import type { ICalendarItem } from "vue-simple-calendar/dist/src/ICalendarItem";
+
+import { useGlobalStore } from "@/stores/global";
+import { useRoute } from "vue-router";
+import type { components } from "@/api_types";
+type CalendarResponse = components["schemas"]["CalendarResponse"];
+import "/node_modules/vue-simple-calendar/dist/style.css";
+import "/node_modules/vue-simple-calendar/dist/css/default.css";
+import { useFetch } from "@/composables/fetch";
+
+const global = useGlobalStore();
+const showDate = ref(new Date());
+
+const tumonlineCalendarUrl = ref("https://campus.tum.de/tumonline");
+const last_sync = ref("xx.xx.xxxx xx:xx");
+const events = ref<ICalendarItem[]>([]);
+
+const route = useRoute();
+
+const start = computed(() => {
+  const start = new Date(showDate.value);
+  start.setDate(start.getDate() - 60);
+  return start.toISOString().replace("Z", "");
+});
+
+const end = computed(() => {
+  const start = new Date(showDate.value);
+  start.setDate(start.getDate() + 60);
+  return start.toISOString().replace("Z", "");
+});
+// called when the view is loaded
+update();
+// called when the view navigates to another view, but not when its initially loaded
+watch(() => showDate.value, update);
+watch(() => route.params.id, update);
+
+function update() {
+  useFetch<CalendarResponse>(
+    `https://nav.tum.de/api/calendar/${route.params.id}?start=${start.value}&end=${end.value}`,
+    (d) => {
+      tumonlineCalendarUrl.value = d.calendar_url;
+      last_sync.value = new Date(d.last_sync).toLocaleString("de-DE", { timeStyle: "short", dateStyle: "short" });
+      events.value = d.events.map((e) => ({
+        id: e.id.toString(),
+        title: e.title,
+        startDate: new Date(e.start),
+        endDate: new Date(e.end),
+        classes: [e.entry_type],
+      }));
+    }
+  );
+}
+function setShowDate(d: Date) {
+  showDate.value = d;
+}
+</script>
+<template>
+  <div class="modal modal-lg active" id="calendar-modal">
+    <a @click="global.calendar.open = false" class="modal-overlay" aria-label="Close"></a>
+    <div class="modal-container">
+      <div class="modal-header">
+        <a
+          @click="global.calendar.open = false"
+          class="btn btn-clear float-right"
+          v-bind:aria-label="$t('calendar.modal.close')"
+        ></a>
+        <div class="modal-title h5">{{ $t("calendar.modal.title") }}</div>
+      </div>
+      <div class="modal-body">
+        <div class="modal-body">
+          <CalendarView
+            id="calendar-view"
+            :items="events"
+            :show-date="showDate"
+            :showTimes="true"
+            :timeFormatOptions="{ hour: '2-digit', minute: '2-digit' }"
+            :startingDayOfWeek="1"
+            class="theme-default"
+          >
+            <template #header="{ headerProps }">
+              <CalendarViewHeader :header-props="headerProps" @input="setShowDate" />
+            </template>
+          </CalendarView>
+        </div>
+      </div>
+      <div class="modal-footer">
+        {{ $t("calendar.modal.footer.disclaimer") }} <br />
+        {{ $t("calendar.modal.footer.please_check") }}
+        <a v-bind:href="tumonlineCalendarUrl">{{ $t("calendar.modal.footer.official_calendar") }}</a
+        >. {{ $t("calendar.modal.footer.last_sync") }}: {{ last_sync }}
+      </div>
+    </div>
+  </div>
+</template>
+<style lang="scss">
+#calendar-modal {
+  .modal-container {
+    position: relative;
+    height: auto;
+    max-width: 97.5vw;
+    max-height: 90vh;
+    .modal-body {
+      padding: 0;
+      height: 40rem;
+      #calendar-view {
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+      }
+    }
+  }
+}
+</style>
diff --git a/webclient/package.json b/webclient/package.json
index adf469cf9..fff4ab899 100644
--- a/webclient/package.json
+++ b/webclient/package.json
@@ -28,7 +28,8 @@
     "swaggerdark": "github:octycs/SwaggerDark#f02d394c8ff698cdd93e09c2188b058d2d686ca3",
     "vue": "3.4.31",
     "vue-router": "4.4.0",
-    "vue3-carousel": "0.3.3"
+    "vue3-carousel": "0.3.3",
+    "vue-simple-calendar": "7.1.0"
   },
   "devDependencies": {
     "@nuxt/eslint": "0.3.13",

From cd8f2356bc7fa59b9c99a3a8da0c02dc38bc93f3 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Fri, 21 Apr 2023 22:41:53 +0200
Subject: [PATCH 02/13] refactored the design to make it more like the google
 calendar

---
 webclient/components/CalendarModal.vue | 60 ++++++++++++++++++++++++--
 1 file changed, 57 insertions(+), 3 deletions(-)

diff --git a/webclient/components/CalendarModal.vue b/webclient/components/CalendarModal.vue
index 5cad523e1..dd6786d13 100644
--- a/webclient/components/CalendarModal.vue
+++ b/webclient/components/CalendarModal.vue
@@ -8,7 +8,7 @@ import { useRoute } from "vue-router";
 import type { components } from "@/api_types";
 type CalendarResponse = components["schemas"]["CalendarResponse"];
 import "/node_modules/vue-simple-calendar/dist/style.css";
-import "/node_modules/vue-simple-calendar/dist/css/default.css";
+import "/node_modules/vue-simple-calendar/dist/css/gcal.css";
 import { useFetch } from "@/composables/fetch";
 
 const global = useGlobalStore();
@@ -76,9 +76,10 @@ function setShowDate(d: Date) {
             :items="events"
             :show-date="showDate"
             :showTimes="true"
-            :timeFormatOptions="{ hour: '2-digit', minute: '2-digit' }"
+            :timeFormatOptions="{ hour: '2-digit', minute: '2-digit', hour12: false }"
             :startingDayOfWeek="1"
-            class="theme-default"
+            :itemTop="'2.5em'"
+            class="theme-gcal"
           >
             <template #header="{ headerProps }">
               <CalendarViewHeader :header-props="headerProps" @input="setShowDate" />
@@ -96,6 +97,8 @@ function setShowDate(d: Date) {
   </div>
 </template>
 <style lang="scss">
+@import "../assets/variables";
+
 #calendar-modal {
   .modal-container {
     position: relative;
@@ -112,5 +115,56 @@ function setShowDate(d: Date) {
       }
     }
   }
+  .startTime,
+  .endTime {
+    color: white;
+    font-size: 0.5rem;
+  }
+
+  .cv-day.today .cv-day-number {
+    margin-top: 0.1em !important;
+    background-color: $primary-color !important;
+    color: $light-color !important;
+  }
+
+  .cv-day-number,
+  .periodLabel {
+    color: $body-font-color !important;
+  }
+  .currentPeriod {
+    color: $body-font-color !important;
+    background-color: transparent !important;
+  }
+  .cv-header-day {
+    color: $body-font-color !important;
+  }
+
+  .cv-item {
+    padding-bottom: 1rem !important;
+  }
+  .cv-item {
+    padding-bottom: 0.1em !important;
+    padding-top: 0.1em !important;
+  }
+  .past.cv-item {
+    filter: brightness(1.3) grayscale(0.55);
+  }
+
+  // colors
+  .barred {
+    background-color: $error-color;
+  }
+  .lecture {
+    background-color: $secondary-color;
+  }
+  .exercise {
+    background-color: #d99208;
+  }
+  .exam {
+    background-color: #b55ca5;
+  }
+  .other {
+    background-color: var(--event-color-graphite);
+  }
 }
 </style>

From 9cf030cc6ab7705044b77ebde92b7e8d69a24da2 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Sun, 28 Apr 2024 06:08:19 +0200
Subject: [PATCH 03/13] Adapted the calendar to changing requirements

---
 webclient/components/CalendarModal.vue | 299 +++++++++++++------------
 webclient/composables/calendar.ts      |   9 +
 webclient/pages/[view]/[id].vue        |  15 +-
 webclient/pnpm-lock.yaml               |  12 +
 webclient/tailwind.config.ts           |  17 +-
 5 files changed, 204 insertions(+), 148 deletions(-)
 create mode 100644 webclient/composables/calendar.ts

diff --git a/webclient/components/CalendarModal.vue b/webclient/components/CalendarModal.vue
index dd6786d13..f6da175f1 100644
--- a/webclient/components/CalendarModal.vue
+++ b/webclient/components/CalendarModal.vue
@@ -1,170 +1,183 @@
 <script setup lang="ts">
+// @ts-expect-error
 import { CalendarView, CalendarViewHeader } from "vue-simple-calendar";
-import { ref, computed, watch } from "vue";
-import type { ICalendarItem } from "vue-simple-calendar/dist/src/ICalendarItem";
+// @ts-expect-error
+import type { ICalendarItem } from "vue-simple-calendar/dist/src/ICalendarItem.d.ts";
 
-import { useGlobalStore } from "@/stores/global";
-import { useRoute } from "vue-router";
 import type { components } from "@/api_types";
-type CalendarResponse = components["schemas"]["CalendarResponse"];
 import "/node_modules/vue-simple-calendar/dist/style.css";
 import "/node_modules/vue-simple-calendar/dist/css/gcal.css";
-import { useFetch } from "@/composables/fetch";
 
-const global = useGlobalStore();
-const showDate = ref(new Date());
+type CalendarResponse = components["schemas"]["CalendarResponse"];
 
-const tumonlineCalendarUrl = ref("https://campus.tum.de/tumonline");
-const last_sync = ref("xx.xx.xxxx xx:xx");
-const events = ref<ICalendarItem[]>([]);
+const showDate = ref(new Date());
 
-const route = useRoute();
+const calendar = useCalendar();
+const { t, locale } = useI18n({ useScope: "local" });
 
-const start = computed(() => {
+const start_after = computed(() => {
   const start = new Date(showDate.value);
   start.setDate(start.getDate() - 60);
-  return start.toISOString().replace("Z", "");
+  return start.toISOString();
 });
-
-const end = computed(() => {
+const end_before = computed(() => {
   const start = new Date(showDate.value);
   start.setDate(start.getDate() + 60);
-  return start.toISOString().replace("Z", "");
+  return start.toISOString();
 });
-// called when the view is loaded
-update();
-// called when the view navigates to another view, but not when its initially loaded
-watch(() => showDate.value, update);
-watch(() => route.params.id, update);
-
-function update() {
-  useFetch<CalendarResponse>(
-    `https://nav.tum.de/api/calendar/${route.params.id}?start=${start.value}&end=${end.value}`,
-    (d) => {
-      tumonlineCalendarUrl.value = d.calendar_url;
-      last_sync.value = new Date(d.last_sync).toLocaleString("de-DE", { timeStyle: "short", dateStyle: "short" });
-      events.value = d.events.map((e) => ({
-        id: e.id.toString(),
-        title: e.title,
-        startDate: new Date(e.start),
-        endDate: new Date(e.end),
-        classes: [e.entry_type],
-      }));
-    }
-  );
-}
+
+const runtimeConfig = useRuntimeConfig();
+const url = computed(() => {
+  const params = new URLSearchParams();
+  params.append("start_after", start_after.value);
+  params.append("end_before", end_before.value);
+
+  return `${runtimeConfig.public.apiURL}/api/calendar/${calendar.value.showing[0]}?${params.toString()}`;
+});
+const { data, status, error } = useFetch<CalendarResponse>(url, { key: "calendar", dedupe: "defer", deep: false });
+const earliest_last_sync = computed<string | null>(() => {
+  if (!data.value) return null;
+  return Object.values(data.value)
+    .map((d) => new Date(d.location.last_calendar_scrape_at))
+    .reduce((d1, d2) => (d1 < d2 ? d1 : d2))
+    .toLocaleString(locale.value, { timeStyle: "short", dateStyle: "short" });
+});
+const events = computed<ICalendarItem[]>(() => {
+  if (!data.value) return [];
+  return data.value.events.map((e) => ({
+    id: e.id.toString(),
+    title: e.title,
+    startDate: new Date(e.start),
+    endDate: new Date(e.end),
+    classes: [e.entry_type],
+  }));
+});
+
 function setShowDate(d: Date) {
   showDate.value = d;
 }
 </script>
+
 <template>
-  <div class="modal modal-lg active" id="calendar-modal">
-    <a @click="global.calendar.open = false" class="modal-overlay" aria-label="Close"></a>
-    <div class="modal-container">
-      <div class="modal-header">
-        <a
-          @click="global.calendar.open = false"
-          class="btn btn-clear float-right"
-          v-bind:aria-label="$t('calendar.modal.close')"
-        ></a>
-        <div class="modal-title h5">{{ $t("calendar.modal.title") }}</div>
+  <LazyModal v-model="calendar.open" :title="t('title')">
+    <Toast v-if="error" level="error">
+      <p class="text-md font-bold">{{ t("error.header") }}</p>
+      <p class="text-sm">
+        {{ t("error.reason") }}:<br />
+        <code
+          class="text-red-900 bg-red-200 mb-1 mt-2 inline-flex max-w-full items-center space-x-2 overflow-auto rounded-md px-4 py-3 text-left font-mono text-xs dark:bg-red-50/20"
+        >
+          {{ error }}
+        </code>
+      </p>
+      <p class="text-sm">
+        {{ t("error.call_to_action") }}
+      </p>
+    </Toast>
+    <div v-else>
+      <CalendarView
+        v-if="data"
+        :items="events"
+        :show-date="showDate"
+        :show-times="true"
+        :time-format-options="{ hour: '2-digit', minute: '2-digit', hour12: false }"
+        :starting-day-of-week="1"
+        item-top="2.5em"
+        class="theme-gcal flex grow flex-col"
+      >
+        <template #header="{ headerProps }">
+          <CalendarViewHeader :header-props="headerProps" @input="setShowDate" />
+        </template>
+      </CalendarView>
+      <div v-else-if="status === 'pending'" class="text-zinc-900 flex flex-col items-center gap-5 py-32">
+        <Spinner class="h-8 w-8" />
+        {{ t("Loading data...") }}
       </div>
-      <div class="modal-body">
-        <div class="modal-body">
-          <CalendarView
-            id="calendar-view"
-            :items="events"
-            :show-date="showDate"
-            :showTimes="true"
-            :timeFormatOptions="{ hour: '2-digit', minute: '2-digit', hour12: false }"
-            :startingDayOfWeek="1"
-            :itemTop="'2.5em'"
-            class="theme-gcal"
-          >
-            <template #header="{ headerProps }">
-              <CalendarViewHeader :header-props="headerProps" @input="setShowDate" />
-            </template>
-          </CalendarView>
-        </div>
-      </div>
-      <div class="modal-footer">
-        {{ $t("calendar.modal.footer.disclaimer") }} <br />
-        {{ $t("calendar.modal.footer.please_check") }}
-        <a v-bind:href="tumonlineCalendarUrl">{{ $t("calendar.modal.footer.official_calendar") }}</a
-        >. {{ $t("calendar.modal.footer.last_sync") }}: {{ last_sync }}
+
+      <div class="pt-2 text-xs">
+        {{ t("footer.disclaimer") }} <br />
+        {{ t("footer.please_check") }}
+        <template v-if="earliest_last_sync !== null">
+          <br />
+          {{ t("footer.last_sync", [earliest_last_sync]) }}
+        </template>
       </div>
     </div>
-  </div>
+  </LazyModal>
 </template>
-<style lang="scss">
-@import "../assets/variables";
-
-#calendar-modal {
-  .modal-container {
-    position: relative;
-    height: auto;
-    max-width: 97.5vw;
-    max-height: 90vh;
-    .modal-body {
-      padding: 0;
-      height: 40rem;
-      #calendar-view {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-      }
-    }
-  }
-  .startTime,
-  .endTime {
-    color: white;
-    font-size: 0.5rem;
-  }
-
-  .cv-day.today .cv-day-number {
-    margin-top: 0.1em !important;
-    background-color: $primary-color !important;
-    color: $light-color !important;
-  }
-
-  .cv-day-number,
-  .periodLabel {
-    color: $body-font-color !important;
-  }
-  .currentPeriod {
-    color: $body-font-color !important;
-    background-color: transparent !important;
-  }
-  .cv-header-day {
-    color: $body-font-color !important;
-  }
-
-  .cv-item {
-    padding-bottom: 1rem !important;
-  }
-  .cv-item {
-    padding-bottom: 0.1em !important;
-    padding-top: 0.1em !important;
-  }
-  .past.cv-item {
-    filter: brightness(1.3) grayscale(0.55);
-  }
-
-  // colors
-  .barred {
-    background-color: $error-color;
-  }
-  .lecture {
-    background-color: $secondary-color;
-  }
-  .exercise {
-    background-color: #d99208;
-  }
-  .exam {
-    background-color: #b55ca5;
-  }
-  .other {
-    background-color: var(--event-color-graphite);
-  }
+
+<style lang="postcss" scoped>
+.startTime,
+.endTime {
+  @apply text-white text-[0.5rem];
+}
+
+.cv-day.today .cv-day-number {
+  @apply text-white mt-[0.1em] bg-[#0065bd];
+}
+.dark .cv-day.today .cv-day-number {
+  @apply bg-[#59b2ff] text-[#17181a];
+}
+.cv-day-number,
+.periodLabel,
+.currentPeriod,
+.cv-header-day {
+  @apply text-zinc-900;
+}
+.currentPeriod {
+  @apply bg-transparent;
+}
+.cv-item {
+  @apply pb-4 pt-[0.1em];
+}
+.past.cv-item {
+  @apply brightness-[1.3] grayscale-[0.55];
+}
+
+/* colors */
+.barred {
+  @apply text-red-900 bg-red-100 border-red-300;
+}
+
+.lecture {
+  @apply text-blue-900 bg-blue-100 border-blue-300;
+}
+
+.exercise {
+  @apply text-orange-900 bg-orange-100 border-orange-300;
+}
+.exam {
+  @apply text-fuchsia-pink-900 bg-fuchsia-pink-100 border-fuchsia-pink-300;
+}
+
+.other {
+  @apply text-zinc-900 bg-zinc-100 border-zinc-300;
 }
 </style>
+
+<i18n lang="yaml">
+de:
+  title: Kalendar
+  close: Schließen
+  Loading data...: Lädt daten...
+  error:
+    header: Beim Versuch, den Kalender anzuzeigen, ist ein Fehler aufgetreten
+    reason: Der Grund für diesen Fehler ist
+    call_to_action: Wenn dieses Problem weiterhin besteht, kontaktieren Sie uns bitte über das Feedback-Formular am Ende der Seite.
+  footer:
+    disclaimer: Stündlich aktualisiert und identische Termine zusammengefasst.
+    please_check: Im Zweifelsfall prüfe bitte den offiziellen TUMonline-Kalender.
+    last_sync: Stand {0}
+en:
+  title: Calendar
+  close: Close
+  Loading data...: Loading data...
+  error:
+    header: Got an error trying to display calendar
+    reason: Reason for this error is
+    call_to_action: If this issue persists, please contact us via the feedback form at the bottom of the page
+  footer:
+    disclaimer: Updated hourly and identical events are merged.
+    please_check: If in doubt, please check the official calendar on TUMonline
+    last_sync: Updated {0}
+</i18n>
diff --git a/webclient/composables/calendar.ts b/webclient/composables/calendar.ts
new file mode 100644
index 000000000..252ce28ab
--- /dev/null
+++ b/webclient/composables/calendar.ts
@@ -0,0 +1,9 @@
+type CalendarState = {
+  open: boolean;
+  showing: string[];
+};
+export const useCalendar = () =>
+  useState<CalendarState>("calendar", () => ({
+    open: false,
+    showing: [],
+  }));
diff --git a/webclient/pages/[view]/[id].vue b/webclient/pages/[view]/[id].vue
index 5f9fda12e..9883df2a0 100644
--- a/webclient/pages/[view]/[id].vue
+++ b/webclient/pages/[view]/[id].vue
@@ -19,6 +19,7 @@ const { t, locale } = useI18n({ useScope: "local" });
 const route = useRoute();
 const router = useRouter();
 
+const calendar = useCalendar();
 const runtimeConfig = useRuntimeConfig();
 const url = computed(() => `${runtimeConfig.public.apiURL}/api/get/${route.params.id}?lang=${locale.value}`);
 const { data, error } = useFetch<DetailsResponse, string>(url, {
@@ -173,15 +174,18 @@ onMounted(() => {
         <div class="flex grow place-items-center justify-between">
           <span class="text-zinc-500 mt-0.5 text-sm">{{ data.type_common_name }}</span>
           <div class="flex flex-row place-items-center gap-3">
-            <a
+            <button
               v-if="data.props?.calendar_url"
-              :href="data.props.calendar_url"
-              target="_blank"
+              type="button"
               class="focusable rounded-sm"
               :title="t('header.calendar')"
+              @click="
+                calendar.open = true;
+                calendar.showing = [route.params.id.toString()];
+              "
             >
               <CalendarDaysIcon class="text-blue-600 mt-0.5 h-4 w-4" />
-            </a>
+            </button>
             <ClientOnly>
               <ShareButton :coords="data.coords" :name="data.name" />
             </ClientOnly>
@@ -287,6 +291,9 @@ onMounted(() => {
     <Spinner class="h-8 w-8" />
     {{ t("Loading data...") }}
   </div>
+  <ClientOnly>
+    <LazyCalendarModal v-if="calendar.open" />
+  </ClientOnly>
 </template>
 
 <i18n lang="yaml">
diff --git a/webclient/pnpm-lock.yaml b/webclient/pnpm-lock.yaml
index 0cbd33843..0e1ff9aba 100644
--- a/webclient/pnpm-lock.yaml
+++ b/webclient/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       vue-router:
         specifier: 4.4.0
         version: 4.4.0(vue@3.4.31(typescript@5.4.5))
+      vue-simple-calendar:
+        specifier: 7.1.0
+        version: 7.1.0(typescript@5.4.5)
       vue3-carousel:
         specifier: 0.3.3
         version: 0.3.3(vue@3.4.31(typescript@5.4.5))
@@ -6362,6 +6365,9 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
+  vue-simple-calendar@7.1.0:
+    resolution: {integrity: sha512-WNbvRVGQQJlStaLPvvpe2ZsB/E1n8eFgUh4hD931ljp2czPA8xT81i4jGD5+jKZT1OHDFpON5mNn0KwO2QC9rA==}
+
   vue-template-compiler@2.7.16:
     resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
 
@@ -14582,6 +14588,12 @@ snapshots:
       '@vue/devtools-api': 6.6.1
       vue: 3.4.31(typescript@5.4.5)
 
+  vue-simple-calendar@7.1.0(typescript@5.4.5):
+    dependencies:
+      vue: 3.4.31(typescript@5.4.5)
+    transitivePeerDependencies:
+      - typescript
+
   vue-template-compiler@2.7.16:
     dependencies:
       de-indent: 1.0.2
diff --git a/webclient/tailwind.config.ts b/webclient/tailwind.config.ts
index 4ab84893f..dbcd1b94d 100644
--- a/webclient/tailwind.config.ts
+++ b/webclient/tailwind.config.ts
@@ -1,5 +1,5 @@
 import type { Config } from "tailwindcss";
-import { current, inherit, orange, red, transparent, white, zinc } from "tailwindcss/colors";
+import { current, green, inherit, orange, red, transparent, white, zinc } from "tailwindcss/colors";
 
 export default <Partial<Config>>{
   darkMode: "class",
@@ -12,6 +12,21 @@ export default <Partial<Config>>{
       white,
       zinc,
       orange,
+      green,
+      "fuchsia-pink": {
+        "50": "#faf5fa",
+        "100": "#f7ecf6",
+        "200": "#f1d9f0",
+        "300": "#e6bbe2",
+        "400": "#d591cf",
+        "500": "#c56fb9",
+        DEFAULT: "#b55ca5",
+        "600": "#b55ca5",
+        "700": "#973f85",
+        "800": "#7d376d",
+        "900": "#6a315d",
+        "950": "#3f1837",
+      },
       red,
       blue: {
         50: "#f3f6fc",

From 30cc736a2713abb6184fabeab9ee397a5f815bf2 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Mon, 24 Jun 2024 02:17:10 +0200
Subject: [PATCH 04/13] tmp

---
 webclient/components/CalendarModal.vue | 117 +++++++++++++++++++------
 webclient/pages/[view]/[id].vue        |   2 +-
 2 files changed, 89 insertions(+), 30 deletions(-)

diff --git a/webclient/components/CalendarModal.vue b/webclient/components/CalendarModal.vue
index f6da175f1..17511258c 100644
--- a/webclient/components/CalendarModal.vue
+++ b/webclient/components/CalendarModal.vue
@@ -1,17 +1,22 @@
 <script setup lang="ts">
-// @ts-expect-error
+// @ts-expect-error vue-simple-calendar does not provide types
 import { CalendarView, CalendarViewHeader } from "vue-simple-calendar";
-// @ts-expect-error
+import { PlusCircleIcon } from "@heroicons/vue/24/outline";
+import { useFeedback } from "~/composables/feedback";
+import { useCalendar } from "~/composables/calendar";
+// @ts-expect-error vue-simple-calendar does not provide types
 import type { ICalendarItem } from "vue-simple-calendar/dist/src/ICalendarItem.d.ts";
 
-import type { components } from "@/api_types";
+import type { components, operations } from "@/api_types";
 import "/node_modules/vue-simple-calendar/dist/style.css";
 import "/node_modules/vue-simple-calendar/dist/css/gcal.css";
+import SearchResultItem from "~/components/SearchResultItem.vue";
 
 type CalendarResponse = components["schemas"]["CalendarResponse"];
+type CalendarBody = operations["calendar"]["requestBody"]["content"]["application/json"];
 
+const feedback = useFeedback();
 const showDate = ref(new Date());
-
 const calendar = useCalendar();
 const { t, locale } = useI18n({ useScope: "local" });
 
@@ -27,14 +32,21 @@ const end_before = computed(() => {
 });
 
 const runtimeConfig = useRuntimeConfig();
-const url = computed(() => {
-  const params = new URLSearchParams();
-  params.append("start_after", start_after.value);
-  params.append("end_before", end_before.value);
-
-  return `${runtimeConfig.public.apiURL}/api/calendar/${calendar.value.showing[0]}?${params.toString()}`;
+const url = computed(() => `${runtimeConfig.public.apiURL}/api/calendar`);
+const body = computed<CalendarBody>(() => ({
+  start_after: start_after.value,
+  end_before: end_before.value,
+  ids: calendar.value.showing,
+}));
+const { data, error } = useFetch<CalendarResponse>(url, {
+  method: "POST",
+  key: "calendar",
+  dedupe: "defer",
+  deep: false,
+  body: body,
+  retry: 120,
+  retryDelay: 5000,
 });
-const { data, status, error } = useFetch<CalendarResponse>(url, { key: "calendar", dedupe: "defer", deep: false });
 const earliest_last_sync = computed<string | null>(() => {
   if (!data.value) return null;
   return Object.values(data.value)
@@ -44,13 +56,20 @@ const earliest_last_sync = computed<string | null>(() => {
 });
 const events = computed<ICalendarItem[]>(() => {
   if (!data.value) return [];
-  return data.value.events.map((e) => ({
-    id: e.id.toString(),
-    title: e.title,
-    startDate: new Date(e.start),
-    endDate: new Date(e.end),
-    classes: [e.entry_type],
-  }));
+  const items = [];
+  const show_room_names = !!Object.keys(data.value).length;
+  for (const [k, v] of Object.entries(data.value)) {
+    items.push(
+      ...v.events.map((e) => ({
+        id: e.id.toString(),
+        title: show_room_names ? k + " " + e.title : e.title,
+        startDate: new Date(e.start),
+        endDate: new Date(e.end),
+        classes: [e.entry_type],
+      })),
+    );
+  }
+  return items;
 });
 
 function setShowDate(d: Date) {
@@ -70,13 +89,47 @@ function setShowDate(d: Date) {
           {{ error }}
         </code>
       </p>
-      <p class="text-sm">
-        {{ t("error.call_to_action") }}
-      </p>
+      <I18nT class="text-sm" tag="p" keypath="error.call_to_action">
+        <template #feedbackForm>
+          <button
+            type="button"
+            class="text-blue-600 bg-transparent visited:text-blue-600 hover:underline"
+            :aria-label="t('error.feedback-open')"
+            @click="
+              () => {
+                feedback.open = true;
+                feedback.data = { category: 'general', subject: '', body: '', deletion_requested: false };
+              }
+            "
+          >
+            {{ t("error.feedback-form") }}
+          </button>
+        </template>
+      </I18nT>
     </Toast>
-    <div v-else>
+    <div v-else-if="data">
+      <ul v-if="calendar.showing.length" class="border-gray-900/5 mb-6 flex gap-2 overflow-x-scroll">
+        <li v-for="(key, i) in calendar.showing" :key="key">
+          <SearchResultItem
+            :highlighted="i != 0"
+            :item="{
+              id: key,
+              name: data[key].location.name,
+              subtext: data[key].location.type_common_name,
+              subtext_bold: t('number_of_events', data[key].events.length),
+              type: data[key].location.type,
+            }"
+          />
+        </li>
+        <li
+          class="bg-zinc-50 border-zinc-200 min-w-14 rounded-sm border hover:bg-blue-100 flex align-middle justify-items-center object-center justify-self-center place-items-center items-center content-center justify-center origin-center"
+        >
+          <button type="button" class="focusable">
+            <PlusCircleIcon class="mx-auto my-auto h-5 w-5" />
+          </button>
+        </li>
+      </ul>
       <CalendarView
-        v-if="data"
         :items="events"
         :show-date="showDate"
         :show-times="true"
@@ -89,10 +142,6 @@ function setShowDate(d: Date) {
           <CalendarViewHeader :header-props="headerProps" @input="setShowDate" />
         </template>
       </CalendarView>
-      <div v-else-if="status === 'pending'" class="text-zinc-900 flex flex-col items-center gap-5 py-32">
-        <Spinner class="h-8 w-8" />
-        {{ t("Loading data...") }}
-      </div>
 
       <div class="pt-2 text-xs">
         {{ t("footer.disclaimer") }} <br />
@@ -103,6 +152,10 @@ function setShowDate(d: Date) {
         </template>
       </div>
     </div>
+    <div v-else class="text-zinc-900 flex flex-col items-center gap-5 py-32">
+      <Spinner class="h-8 w-8" />
+      {{ t("Loading data...") }}
+    </div>
   </LazyModal>
 </template>
 
@@ -160,10 +213,13 @@ de:
   title: Kalendar
   close: Schließen
   Loading data...: Lädt daten...
+  number_of_events: ein Event pro Quartal | {count} Events pro Quartal
   error:
     header: Beim Versuch, den Kalender anzuzeigen, ist ein Fehler aufgetreten
     reason: Der Grund für diesen Fehler ist
-    call_to_action: Wenn dieses Problem weiterhin besteht, kontaktieren Sie uns bitte über das Feedback-Formular am Ende der Seite.
+    call_to_action: Wenn dieses Problem weiterhin besteht, kontaktieren Sie uns bitte über das {feedbackForm}.
+    feedback-form: Feedback-Formular
+    feedback-open: Feedback-Formular öffnen
   footer:
     disclaimer: Stündlich aktualisiert und identische Termine zusammengefasst.
     please_check: Im Zweifelsfall prüfe bitte den offiziellen TUMonline-Kalender.
@@ -175,7 +231,10 @@ en:
   error:
     header: Got an error trying to display calendar
     reason: Reason for this error is
-    call_to_action: If this issue persists, please contact us via the feedback form at the bottom of the page
+    call_to_action: If this issue persists, please contact us via the {feedbackForm}.
+    feedback-form: feedback form
+    feedback-open: open the feedback form
+  number_of_events: ein event per quarter | {count} events per quarter
   footer:
     disclaimer: Updated hourly and identical events are merged.
     please_check: If in doubt, please check the official calendar on TUMonline
diff --git a/webclient/pages/[view]/[id].vue b/webclient/pages/[view]/[id].vue
index 9883df2a0..77f5ad493 100644
--- a/webclient/pages/[view]/[id].vue
+++ b/webclient/pages/[view]/[id].vue
@@ -292,7 +292,7 @@ onMounted(() => {
     {{ t("Loading data...") }}
   </div>
   <ClientOnly>
-    <LazyCalendarModal v-if="calendar.open" />
+    <CalendarModal v-if="calendar.open" />
   </ClientOnly>
 </template>
 

From 0439b82668c8995a7d698fb24f659d256df5c240 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Sun, 30 Jun 2024 02:07:25 +0200
Subject: [PATCH 05/13] made sure that `should_refresh_token()` is subtraction
 less

---
 server/main-api/src/calendar/connectum.rs | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/server/main-api/src/calendar/connectum.rs b/server/main-api/src/calendar/connectum.rs
index 4a8b11d6f..a8009b032 100644
--- a/server/main-api/src/calendar/connectum.rs
+++ b/server/main-api/src/calendar/connectum.rs
@@ -1,12 +1,12 @@
-use std::time::{Duration, Instant};
 use std::{env, io};
+use std::time::{Duration, Instant};
 
 use chrono::{DateTime, Utc};
 use log::{debug, error, warn};
+use oauth2::{AuthUrl, ClientId, ClientSecret, Scope, TokenResponse, TokenUrl};
 use oauth2::basic::{BasicClient, BasicTokenResponse};
 use oauth2::reqwest::async_http_client;
 use oauth2::url::Url;
-use oauth2::{AuthUrl, ClientId, ClientSecret, Scope, TokenResponse, TokenUrl};
 use sqlx::PgPool;
 
 use crate::calendar::models::Event;
@@ -69,7 +69,7 @@ impl APIRequestor {
     fn should_refresh_token(&self) -> bool {
         if let Some((start, token)) = &self.oauth_token {
             if let Some(expires_in) = token.expires_in() {
-                return expires_in - start.elapsed() < Duration::from_secs(60);
+                return start.elapsed() < expires_in + Duration::from_secs(60);
             }
         }
         true

From 70ebf9f51545b125efedc704bdae134b9b70a0fc Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Sun, 30 Jun 2024 14:42:01 +0200
Subject: [PATCH 06/13] made sure that overfolws don't have ugly scrollbars

---
 webclient/components/CalendarModal.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webclient/components/CalendarModal.vue b/webclient/components/CalendarModal.vue
index 17511258c..31c41355b 100644
--- a/webclient/components/CalendarModal.vue
+++ b/webclient/components/CalendarModal.vue
@@ -108,7 +108,7 @@ function setShowDate(d: Date) {
       </I18nT>
     </Toast>
     <div v-else-if="data">
-      <ul v-if="calendar.showing.length" class="border-gray-900/5 mb-6 flex gap-2 overflow-x-scroll">
+      <ul v-if="calendar.showing.length" class="border-gray-900/5 mb-6 flex gap-2 overflow-x-auto">
         <li v-for="(key, i) in calendar.showing" :key="key">
           <SearchResultItem
             :highlighted="i != 0"

From 588bcf22d99a8f2ec43b85f12a0b74690fc7348a Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Sun, 30 Jun 2024 17:22:54 +0200
Subject: [PATCH 07/13] implemented a fully working calendar

---
 openapi.yaml                                  |  20 +-
 webclient/api_types/index.ts                  |  10 +-
 webclient/components/Calendar.vue             | 100 ++++++
 webclient/components/CalendarModal.vue        | 298 ++++++------------
 webclient/components/CalendarRoomSelector.vue | 137 ++++++++
 .../components/DetailsImageSlideshowModal.vue |   2 +-
 webclient/components/DetailsRoomfinderMap.vue |   2 +-
 webclient/components/Modal.vue                |  19 +-
 webclient/components/PreviewIcon.vue          |  33 ++
 webclient/components/SearchResultItem.vue     |  21 +-
 webclient/package.json                        |   6 +-
 webclient/pnpm-lock.yaml                      |  53 +++-
 12 files changed, 439 insertions(+), 262 deletions(-)
 create mode 100644 webclient/components/Calendar.vue
 create mode 100644 webclient/components/CalendarRoomSelector.vue
 create mode 100644 webclient/components/PreviewIcon.vue

diff --git a/openapi.yaml b/openapi.yaml
index d12cedece..1546a5ee7 100644
--- a/openapi.yaml
+++ b/openapi.yaml
@@ -2099,18 +2099,23 @@ components:
           format: int32
           examples:
             - 42
-        title:
-          description: The title of the Entry
+        stp_title_de:
+          description: The german title of the Entry
           type: string
           examples:
             - Quantenteleportation
-        start:
+        stp_title_en:
+          description: The english title of the Entry
+          type: string
+          examples:
+            - Quantenteleportation
+        start_at:
           description: The start of the entry
           type: string
           format: date-time
           examples:
             - '2018-01-01T00:00:00'
-        end:
+        end_at:
           description: The end of the entry
           type: string
           format: date-time
@@ -2132,9 +2137,10 @@ components:
             - Vorlesung mit Zentralübung
       required:
         - id
-        - title
-        - start
-        - end
+        - stp_title_de
+        - stp_title_en
+        - start_at
+        - end_at
         - entry_type
         - detailed_entry_type
     DataSources:
diff --git a/webclient/api_types/index.ts b/webclient/api_types/index.ts
index 74a7ac4fa..4e891ab4a 100644
--- a/webclient/api_types/index.ts
+++ b/webclient/api_types/index.ts
@@ -531,18 +531,20 @@ export type components = {
        * @description The id of the calendar entry used in TUMonline internally
        */
       readonly id: number;
-      /** @description The title of the Entry */
-      readonly title: string;
+      /** @description The german title of the Entry */
+      readonly stp_title_de: string;
+      /** @description The english title of the Entry */
+      readonly stp_title_en: string;
       /**
        * Format: date-time
        * @description The start of the entry
        */
-      readonly start: string;
+      readonly start_at: string;
       /**
        * Format: date-time
        * @description The end of the entry
        */
-      readonly end: string;
+      readonly end_at: string;
       /**
        * @description What this calendar entry means. Each of these should be displayed in a different color
        * @enum {string}
diff --git a/webclient/components/Calendar.vue b/webclient/components/Calendar.vue
new file mode 100644
index 000000000..d5e7a87e0
--- /dev/null
+++ b/webclient/components/Calendar.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import FullCalendar from "@fullcalendar/vue3";
+import type { CalendarOptions, EventInput, EventSourceFuncArg } from "@fullcalendar/core";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import type { components, operations } from "~/api_types";
+import deLocale from "@fullcalendar/core/locales/de";
+import enLocale from "@fullcalendar/core/locales/en-gb";
+
+type CalendarResponse = components["schemas"]["CalendarResponse"];
+type CalendarBody = operations["calendar"]["requestBody"]["content"]["application/json"];
+type CalendarLocation = components["schemas"]["CalendarLocation"];
+
+const props = defineProps<{ showing: readonly string[] }>();
+const runtimeConfig = useRuntimeConfig();
+const { locale } = useI18n({ useScope: "local" });
+
+const earliest_last_sync = defineModel<string | null>("earliest_last_sync");
+const locations = defineModel<Map<string, CalendarLocation>>("locations");
+async function fetchEvents(arg: EventSourceFuncArg): Promise<EventInput[]> {
+  const body: CalendarBody = {
+    start_after: arg.startStr,
+    end_before: arg.endStr,
+    ids: props.showing,
+  };
+  const url = `${runtimeConfig.public.apiURL}/api/calendar`;
+  const data = await $fetch<CalendarResponse>(url, {
+    method: "POST",
+    body: JSON.stringify(body),
+    retry: 120,
+    retryDelay: 5000,
+  });
+  extractInfos(data);
+
+  const items = [];
+  const show_room_names = Object.keys(data).length > 1;
+  for (const [k, v] of Object.entries(data)) {
+    items.push(
+      ...v.events.map((e) => {
+        const title = locale.value == "de" ? e.stp_title_de : e.stp_title_en;
+        return {
+          id: e.id.toString(),
+          title: show_room_names ? `${k} ${title}` : title,
+          start: new Date(e.start_at),
+          end: new Date(e.end_at),
+          classes: [e.entry_type],
+        };
+      }),
+    );
+  }
+  return items;
+}
+function extractInfos(data: CalendarResponse): void {
+  earliest_last_sync.value = Object.values(data)
+    .map((d) => new Date(d.location.last_calendar_scrape_at))
+    .reduce((d1, d2) => (d1 < d2 ? d1 : d2))
+    .toLocaleString(locale.value, { timeStyle: "short", dateStyle: "short" });
+  const tempLocationMap = new Map<string, CalendarLocation>();
+  for (const [key, v] of Object.entries(data)) {
+    tempLocationMap.set(key, v.location);
+  }
+  locations.value = tempLocationMap;
+}
+
+const calendarOptions: CalendarOptions = {
+  plugins: [dayGridPlugin],
+  initialView: "dayGridWeek",
+  weekends: false,
+  events: fetchEvents,
+  headerToolbar: {
+    left: "prev,next",
+    center: "title",
+    right: "dayGridMonth,dayGridWeek,dayGridDay",
+  },
+  locale: locale.value == "de" ? deLocale : enLocale,
+  height: 700,
+  eventTimeFormat: {
+    // like '14:30'
+    hour: "2-digit",
+    minute: "2-digit",
+    meridiem: false,
+  },
+};
+</script>
+
+<template>
+  <div class="flex max-h-[700px] min-h-[700px] grow flex-col">
+    <FullCalendar :options="calendarOptions">
+      <template #eventContent="arg">
+        <b>{{ arg.timeText }}</b>
+        <i class="ps-1">{{ arg.event.title }}</i>
+      </template>
+    </FullCalendar>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+.fc-daygrid-event-harness {
+  @apply overflow-x-auto;
+}
+</style>
diff --git a/webclient/components/CalendarModal.vue b/webclient/components/CalendarModal.vue
index 31c41355b..5d9293e6b 100644
--- a/webclient/components/CalendarModal.vue
+++ b/webclient/components/CalendarModal.vue
@@ -1,219 +1,117 @@
 <script setup lang="ts">
-// @ts-expect-error vue-simple-calendar does not provide types
-import { CalendarView, CalendarViewHeader } from "vue-simple-calendar";
-import { PlusCircleIcon } from "@heroicons/vue/24/outline";
 import { useFeedback } from "~/composables/feedback";
 import { useCalendar } from "~/composables/calendar";
-// @ts-expect-error vue-simple-calendar does not provide types
-import type { ICalendarItem } from "vue-simple-calendar/dist/src/ICalendarItem.d.ts";
+import type { components } from "~/api_types";
 
-import type { components, operations } from "@/api_types";
-import "/node_modules/vue-simple-calendar/dist/style.css";
-import "/node_modules/vue-simple-calendar/dist/css/gcal.css";
-import SearchResultItem from "~/components/SearchResultItem.vue";
-
-type CalendarResponse = components["schemas"]["CalendarResponse"];
-type CalendarBody = operations["calendar"]["requestBody"]["content"]["application/json"];
+type CalendarLocation = components["schemas"]["CalendarLocation"];
 
 const feedback = useFeedback();
-const showDate = ref(new Date());
 const calendar = useCalendar();
-const { t, locale } = useI18n({ useScope: "local" });
-
-const start_after = computed(() => {
-  const start = new Date(showDate.value);
-  start.setDate(start.getDate() - 60);
-  return start.toISOString();
-});
-const end_before = computed(() => {
-  const start = new Date(showDate.value);
-  start.setDate(start.getDate() + 60);
-  return start.toISOString();
-});
-
-const runtimeConfig = useRuntimeConfig();
-const url = computed(() => `${runtimeConfig.public.apiURL}/api/calendar`);
-const body = computed<CalendarBody>(() => ({
-  start_after: start_after.value,
-  end_before: end_before.value,
-  ids: calendar.value.showing,
-}));
-const { data, error } = useFetch<CalendarResponse>(url, {
-  method: "POST",
-  key: "calendar",
-  dedupe: "defer",
-  deep: false,
-  body: body,
-  retry: 120,
-  retryDelay: 5000,
-});
-const earliest_last_sync = computed<string | null>(() => {
-  if (!data.value) return null;
-  return Object.values(data.value)
-    .map((d) => new Date(d.location.last_calendar_scrape_at))
-    .reduce((d1, d2) => (d1 < d2 ? d1 : d2))
-    .toLocaleString(locale.value, { timeStyle: "short", dateStyle: "short" });
-});
-const events = computed<ICalendarItem[]>(() => {
-  if (!data.value) return [];
-  const items = [];
-  const show_room_names = !!Object.keys(data.value).length;
-  for (const [k, v] of Object.entries(data.value)) {
-    items.push(
-      ...v.events.map((e) => ({
-        id: e.id.toString(),
-        title: show_room_names ? k + " " + e.title : e.title,
-        startDate: new Date(e.start),
-        endDate: new Date(e.end),
-        classes: [e.entry_type],
-      })),
-    );
-  }
-  return items;
-});
-
-function setShowDate(d: Date) {
-  showDate.value = d;
-}
+const { t } = useI18n({ useScope: "local" });
+// all the below are updated by the calendar
+const earliest_last_sync = ref<string | null>(null);
+const locations = ref<Map<string, CalendarLocation>>(new Map());
 </script>
 
 <template>
-  <LazyModal v-model="calendar.open" :title="t('title')">
-    <Toast v-if="error" level="error">
-      <p class="text-md font-bold">{{ t("error.header") }}</p>
-      <p class="text-sm">
-        {{ t("error.reason") }}:<br />
-        <code
-          class="text-red-900 bg-red-200 mb-1 mt-2 inline-flex max-w-full items-center space-x-2 overflow-auto rounded-md px-4 py-3 text-left font-mono text-xs dark:bg-red-50/20"
-        >
-          {{ error }}
-        </code>
-      </p>
-      <I18nT class="text-sm" tag="p" keypath="error.call_to_action">
-        <template #feedbackForm>
-          <button
-            type="button"
-            class="text-blue-600 bg-transparent visited:text-blue-600 hover:underline"
-            :aria-label="t('error.feedback-open')"
-            @click="
-              () => {
-                feedback.open = true;
-                feedback.data = { category: 'general', subject: '', body: '', deletion_requested: false };
-              }
-            "
-          >
-            {{ t("error.feedback-form") }}
-          </button>
-        </template>
-      </I18nT>
-    </Toast>
-    <div v-else-if="data">
-      <ul v-if="calendar.showing.length" class="border-gray-900/5 mb-6 flex gap-2 overflow-x-auto">
-        <li v-for="(key, i) in calendar.showing" :key="key">
-          <SearchResultItem
-            :highlighted="i != 0"
-            :item="{
-              id: key,
-              name: data[key].location.name,
-              subtext: data[key].location.type_common_name,
-              subtext_bold: t('number_of_events', data[key].events.length),
-              type: data[key].location.type,
-            }"
-          />
-        </li>
-        <li
-          class="bg-zinc-50 border-zinc-200 min-w-14 rounded-sm border hover:bg-blue-100 flex align-middle justify-items-center object-center justify-self-center place-items-center items-center content-center justify-center origin-center"
-        >
-          <button type="button" class="focusable">
-            <PlusCircleIcon class="mx-auto my-auto h-5 w-5" />
-          </button>
-        </li>
-      </ul>
-      <CalendarView
-        :items="events"
-        :show-date="showDate"
-        :show-times="true"
-        :time-format-options="{ hour: '2-digit', minute: '2-digit', hour12: false }"
-        :starting-day-of-week="1"
-        item-top="2.5em"
-        class="theme-gcal flex grow flex-col"
-      >
-        <template #header="{ headerProps }">
-          <CalendarViewHeader :header-props="headerProps" @input="setShowDate" />
-        </template>
-      </CalendarView>
+  <LazyModal v-model="calendar.open" :title="t('title')" class="!min-w-[90vw]">
+    <NuxtErrorBoundary>
+      <template #error="{ error }">
+        <Toast level="error">
+          <p class="text-md font-bold">{{ t("error.header") }}</p>
+          <p class="text-sm">
+            {{ t("error.reason") }}:<br />
+            <code
+              class="text-red-900 bg-red-200 mb-1 mt-2 inline-flex max-w-full items-center space-x-2 overflow-auto rounded-md px-4 py-3 text-left font-mono text-xs dark:bg-red-50/20"
+            >
+              {{ error }}
+            </code>
+          </p>
+          <I18nT class="text-sm" tag="p" keypath="error.call_to_action">
+            <template #feedbackForm>
+              <button
+                type="button"
+                class="text-blue-600 bg-transparent visited:text-blue-600 hover:underline"
+                :aria-label="t('error.feedback-open')"
+                @click="
+                  () => {
+                    feedback.open = true;
+                    feedback.data = {
+                      category: 'bug',
+                      subject: 'calendar error',
+                      body: `While viewing the calendar for ${JSON.stringify(calendar.showing)}
+I got this error:
+\`\`\`
+${error}
+\`\`\`
+
+In case you have trouble replicating this bug, my environment is PLEASE_INSERT_YOUR_BROWSER_HERE.
+I also did PLEASE_INSERT_IF_YOU_DID_SOMETHING_SPECIAL_BEFOREHAND`,
+                      deletion_requested: false,
+                    };
+                  }
+                "
+              >
+                {{ t("error.feedback-form") }}
+              </button>
+            </template>
+          </I18nT>
+        </Toast>
+      </template>
+      <template #default>
+        <div>
+          <Toast level="info" class="mb-3">
+            <I18nT class="text-sm" tag="p" keypath="call_for_feedback">
+              <template #feedbackForm>
+                <button
+                  type="button"
+                  class="text-blue-600 bg-transparent visited:text-blue-600 hover:underline"
+                  :aria-label="t('error.feedback-open')"
+                  @click="
+                    () => {
+                      feedback.open = true;
+                      feedback.data = {
+                        category: 'general',
+                        subject: 'calendar feedback',
+                        body: `Dear OpenSource@TUM,
+The calendar for ${JSON.stringify(calendar.showing)} can be improved by
+-
 
-      <div class="pt-2 text-xs">
-        {{ t("footer.disclaimer") }} <br />
-        {{ t("footer.please_check") }}
-        <template v-if="earliest_last_sync !== null">
-          <br />
-          {{ t("footer.last_sync", [earliest_last_sync]) }}
-        </template>
-      </div>
-    </div>
-    <div v-else class="text-zinc-900 flex flex-col items-center gap-5 py-32">
-      <Spinner class="h-8 w-8" />
-      {{ t("Loading data...") }}
-    </div>
+Thanks`,
+                        deletion_requested: false,
+                      };
+                    }
+                  "
+                >
+                  {{ t("error.feedback-form") }}
+                </button>
+              </template>
+            </I18nT>
+          </Toast>
+          <CalendarRoomSelector :data="locations" />
+          <Calendar
+            v-model:earliest_last_sync="earliest_last_sync"
+            v-model:locations="locations"
+            :showing="calendar.showing"
+          />
+          <div class="pt-2 text-xs">
+            {{ t("footer.disclaimer") }} <br />
+            {{ t("footer.please_check") }}
+            <template v-if="earliest_last_sync !== null">
+              <br />
+              {{ t("footer.last_sync", [earliest_last_sync]) }}
+            </template>
+          </div>
+        </div>
+      </template>
+    </NuxtErrorBoundary>
   </LazyModal>
 </template>
 
-<style lang="postcss" scoped>
-.startTime,
-.endTime {
-  @apply text-white text-[0.5rem];
-}
-
-.cv-day.today .cv-day-number {
-  @apply text-white mt-[0.1em] bg-[#0065bd];
-}
-.dark .cv-day.today .cv-day-number {
-  @apply bg-[#59b2ff] text-[#17181a];
-}
-.cv-day-number,
-.periodLabel,
-.currentPeriod,
-.cv-header-day {
-  @apply text-zinc-900;
-}
-.currentPeriod {
-  @apply bg-transparent;
-}
-.cv-item {
-  @apply pb-4 pt-[0.1em];
-}
-.past.cv-item {
-  @apply brightness-[1.3] grayscale-[0.55];
-}
-
-/* colors */
-.barred {
-  @apply text-red-900 bg-red-100 border-red-300;
-}
-
-.lecture {
-  @apply text-blue-900 bg-blue-100 border-blue-300;
-}
-
-.exercise {
-  @apply text-orange-900 bg-orange-100 border-orange-300;
-}
-.exam {
-  @apply text-fuchsia-pink-900 bg-fuchsia-pink-100 border-fuchsia-pink-300;
-}
-
-.other {
-  @apply text-zinc-900 bg-zinc-100 border-zinc-300;
-}
-</style>
-
 <i18n lang="yaml">
 de:
   title: Kalendar
   close: Schließen
-  Loading data...: Lädt daten...
-  number_of_events: ein Event pro Quartal | {count} Events pro Quartal
   error:
     header: Beim Versuch, den Kalender anzuzeigen, ist ein Fehler aufgetreten
     reason: Der Grund für diesen Fehler ist
@@ -224,19 +122,19 @@ de:
     disclaimer: Stündlich aktualisiert und identische Termine zusammengefasst.
     please_check: Im Zweifelsfall prüfe bitte den offiziellen TUMonline-Kalender.
     last_sync: Stand {0}
+  call_for_feedback: Diese Funktion ist neu. Wenn du Feedback dazu hast, nutze doch bitte das {feedbackForm}.
 en:
   title: Calendar
   close: Close
-  Loading data...: Loading data...
   error:
     header: Got an error trying to display calendar
     reason: Reason for this error is
     call_to_action: If this issue persists, please contact us via the {feedbackForm}.
     feedback-form: feedback form
     feedback-open: open the feedback form
-  number_of_events: ein event per quarter | {count} events per quarter
   footer:
     disclaimer: Updated hourly and identical events are merged.
     please_check: If in doubt, please check the official calendar on TUMonline
     last_sync: Updated {0}
+  call_for_feedback: This feature is new. If you have some feedback about it, feel free to use the {feedbackForm}.
 </i18n>
diff --git a/webclient/components/CalendarRoomSelector.vue b/webclient/components/CalendarRoomSelector.vue
new file mode 100644
index 000000000..829817fb0
--- /dev/null
+++ b/webclient/components/CalendarRoomSelector.vue
@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import { PlusCircleIcon } from "@heroicons/vue/24/outline";
+import { CalendarIcon } from "@heroicons/vue/16/solid";
+import type { components } from "~/api_types";
+import PreviewIcon from "~/components/PreviewIcon.vue";
+
+type CalendarLocation = components["schemas"]["CalendarLocation"];
+defineProps<{
+  readonly data: Map<string, CalendarLocation>;
+}>();
+const calendar = useCalendar();
+const { t } = useI18n({ useScope: "local" });
+const runtimeConfig = useRuntimeConfig();
+
+type DetailsResponse = components["schemas"]["DetailsResponse"];
+async function addLocation() {
+  let location: string = "";
+  while (!location) {
+    location = window.prompt(t("prompt.initial")) || "";
+    try {
+      const result = await fetch(`${runtimeConfig.public.apiURL}/api/get/${location}`);
+      if (!result.ok) {
+        const userWantsToRetry = window.confirm(t("prompt.error_not_ok", [location]));
+        if (!userWantsToRetry) return;
+        location = "";
+        continue;
+      }
+      const res = (await result.json()) as DetailsResponse;
+      if (!res.props.calendar_url) {
+        const userWantsToRetry = window.confirm(t("prompt.error_not_calendar", [location]));
+        if (!userWantsToRetry) return;
+        location = "";
+        continue;
+      }
+    } catch (e) {
+      window.alert("Failed because " + e);
+      location = "";
+      continue;
+    }
+    if (calendar.value.showing.find((k) => k == location)) {
+      const userWantsToRetry = window.confirm(t("prompt.error_already_exists", [location]));
+      if (!userWantsToRetry) return;
+      location = "";
+    }
+  }
+  calendar.value.showing.push(location);
+}
+</script>
+
+<template>
+  <ul v-if="calendar.showing.length" class="mb-6 flex gap-2 overflow-x-auto">
+    <li v-if="data.size === 0" class="text-zinc-900 flex flex-col items-center gap-5 py-32">
+      <Spinner class="h-8 w-8" />
+      {{ t("Loading data...") }}
+    </li>
+    <li
+      v-for="[key, location] in data.entries()"
+      :key="key"
+      class="flex min-w-64 gap-1 rounded-md px-2 md:gap-3 md:px-4"
+    >
+      <PreviewIcon
+        :item="{
+          type: location.type,
+          parsed_id: 'parsed_id' in location ? (location.parsed_id as string) : undefined,
+        }"
+      />
+      <div class="text-zinc-600 flex flex-col gap-1">
+        <NuxtLink class="line-clamp-1 hover:underline" :to="'/view/' + key">{{ location.name }}</NuxtLink>
+        <small>
+          {{ location.type_common_name }}
+        </small>
+        <small>
+          <Btn :to="location.calendar_url" variant="link" size="text-xs font-semibold rounded-md">
+            <CalendarIcon class="mb-0.5 h-4 w-4" /> {{ t("view_in_tumonline") }}
+          </Btn>
+        </small>
+      </div>
+    </li>
+    <li class="flex">
+      <button
+        type="button"
+        class="focusable group bg-zinc-50 border-zinc-200 flex min-w-14 origin-center place-items-center content-center items-center justify-center justify-items-center justify-self-center rounded-md border object-center align-middle hover:bg-blue-100"
+        :title="t('add_location')"
+        :aria-label="t('add_location')"
+        @click="addLocation"
+      >
+        <PlusCircleIcon class="group-hover:text-black h-5 w-5" />
+      </button>
+    </li>
+  </ul>
+</template>
+
+<i18n lang="yaml">
+de:
+  add_location: Zusätzliche Location zum Kalendar hinzufügen
+  view_in_tumonline: in TUMonline ansehen
+  prompt:
+    initial: |-
+      Welcher Kalender soll hinzugefügt werden?
+      Bitte wähle nur den letzten Teil der Url eines Raumes mit einem Kalender.
+
+      Beispiel:
+      https://nav.tum.de/room/5502.01.250 hat die ID 5502.01.250
+    error_not_ok: |-
+      Der Ort '{0}' existiert nicht.
+      Wenn er existieren würde, gäbe es https://nav.tum.de/view/{0}.
+
+      Möchtest du es mit einer anderen ID erneut versuchen?
+    error_not_calendar: |-
+      Der Ort hat keinen Kalender.
+      Möchtest du es mit einer anderen ID erneut versuchen?
+    error_already_exists: |-
+      Der Ort ist bereits im Kalender eingetragen.
+      Möchtest du es mit einer anderen ID erneut versuchen?
+  Loading data...: Lädt daten...
+en:
+  add_location: add additional location to the calendar
+  view_in_tumonline: View in TUMonline
+  prompt:
+    initial: |-
+      Which calendar should be added?
+      Please select just the last part of the url of a room with a calendar.
+
+      Example:
+      https://nav.tum.de/room/5502.01.250 has the id 5502.01.250
+    error_not_ok: |-
+      Location '{0}' does not exist.
+      If it were to exist https://nav.tum.de/view/{0} would exist.
+      Want to retry with a different id?
+    error_not_calendar: |-
+      Location does not have a calendar.
+      Want to retry with a different id?
+    error_already_exists: |-
+      Location is already in the calendar.
+      Want to retry with a different id?
+  Loading data...: Loading data...
+</i18n>
diff --git a/webclient/components/DetailsImageSlideshowModal.vue b/webclient/components/DetailsImageSlideshowModal.vue
index 081a49244..c3ac2538f 100644
--- a/webclient/components/DetailsImageSlideshowModal.vue
+++ b/webclient/components/DetailsImageSlideshowModal.vue
@@ -40,7 +40,7 @@ const subtitles = computed<SubTitle[]>(() => {
 </script>
 
 <template>
-  <LazyModal v-model="slideshowOpen" :title="t('header')" :classes="{ modal: '!min-w-[60vw]' }">
+  <LazyModal v-model="slideshowOpen" :title="t('header')" class="!min-w-[60vw]">
     <div class="-mx-6 -mt-3">
       <Carousel
         :items-to-show="1.1"
diff --git a/webclient/components/DetailsRoomfinderMap.vue b/webclient/components/DetailsRoomfinderMap.vue
index 092edab94..a0d3e3cb8 100644
--- a/webclient/components/DetailsRoomfinderMap.vue
+++ b/webclient/components/DetailsRoomfinderMap.vue
@@ -73,7 +73,7 @@ const selectedMap = computed<RoomfinderMapEntry>(() => {
       </button>
     </div>
 
-    <LazyModal v-model="modalOpen" :title="t('modal.header')" :classes="{ modal: 'items-baseline' }">
+    <LazyModal v-model="modalOpen" :title="t('modal.header')" class="items-baseline">
       <RoomfinderImageLocation id="rf_modal_image" :map="selectedMap" />
     </LazyModal>
   </template>
diff --git a/webclient/components/Modal.vue b/webclient/components/Modal.vue
index 1a9a55649..d5b3b00ed 100644
--- a/webclient/components/Modal.vue
+++ b/webclient/components/Modal.vue
@@ -4,19 +4,11 @@ import { XMarkIcon } from "@heroicons/vue/24/outline";
 export interface Props {
   title: string;
   disableClose?: boolean;
-  classes?: {
-    background?: string;
-    close?: string;
-    modal?: string;
-  };
+  class?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
-  classes: () => ({
-    background: "",
-    close: "",
-    modal: "",
-  }),
+  class: "",
 });
 const emit = defineEmits(["close"]);
 const isOpen = defineModel<boolean>({ required: true });
@@ -60,13 +52,9 @@ function close() {
       <div
         v-if="isOpen"
         class="fixed inset-0 z-50 flex h-screen w-full items-center justify-center backdrop-blur-sm backdrop-brightness-95"
-        :class="props.classes.background"
         @click.self="close"
       >
-        <div
-          class="relative flex max-h-screen w-full max-w-2xl flex-col rounded-md shadow-2xl"
-          :class="props.classes.modal"
-        >
+        <div class="relative flex max-h-screen w-full max-w-2xl flex-col rounded-md shadow-2xl" :class="props.class">
           <div class="bg-zinc-200 flex w-full flex-row justify-between rounded-t-md p-5">
             <h2 v-if="props.title" class="text-zinc-800 text-lg font-semibold">{{ props.title }}</h2>
             <button
@@ -74,7 +62,6 @@ function close() {
               type="button"
               :aria-label="t('close')"
               class="focusable text-zinc-800 mx-4 my-2 text-xl"
-              :class="props.classes.close"
               @click.prevent="close"
             >
               <XMarkIcon class="h-4 w-4" />
diff --git a/webclient/components/PreviewIcon.vue b/webclient/components/PreviewIcon.vue
new file mode 100644
index 000000000..0ca4bb2bc
--- /dev/null
+++ b/webclient/components/PreviewIcon.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import {
+  BuildingOffice2Icon,
+  BuildingOfficeIcon,
+  MagnifyingGlassIcon,
+  MapPinIcon,
+} from "@heroicons/vue/24/outline/index.js";
+import type { components } from "~/api_types/index.js";
+
+type SitesBuildingsEntry = components["schemas"]["SitesBuildingsEntry"];
+type SitesBuildingsEntryItem = {
+  type: SitesBuildingsEntry["type"];
+};
+type RoomEntry = components["schemas"]["RoomEntry"];
+type RoomEntryItem = {
+  type: RoomEntry["type"];
+  parsed_id: RoomEntry["parsed_id"];
+};
+defineProps<{ item: SitesBuildingsEntryItem | RoomEntryItem }>();
+</script>
+
+<template>
+  <div class="my-auto min-w-9 md:min-w-11">
+    <div v-if="item.type === 'room' || item.type === 'virtual_room' || item.type === 'poi'" class="text-zinc-900 p-2">
+      <MagnifyingGlassIcon v-if="item.parsed_id" class="h-5 w-5 md:h-6 md:w-6" />
+      <MapPinIcon v-else class="h-5 w-5 md:h-6 md:w-6" />
+    </div>
+    <div v-else class="text-white bg-blue-500 rounded-full p-2">
+      <BuildingOfficeIcon v-if="item.type === 'building'" class="mx-auto h-5 w-5 md:h-6 md:w-6" />
+      <BuildingOffice2Icon v-else class="mx-auto h-5 w-5 md:h-6 md:w-6" />
+    </div>
+  </div>
+</template>
diff --git a/webclient/components/SearchResultItem.vue b/webclient/components/SearchResultItem.vue
index c802abcd6..8fd4be112 100644
--- a/webclient/components/SearchResultItem.vue
+++ b/webclient/components/SearchResultItem.vue
@@ -1,12 +1,7 @@
 <script setup lang="ts">
-import {
-  BuildingOffice2Icon,
-  BuildingOfficeIcon,
-  MagnifyingGlassIcon,
-  MapPinIcon,
-} from "@heroicons/vue/24/outline/index.js";
 import { ChevronRightIcon } from "@heroicons/vue/16/solid/index.js";
 import type { components } from "~/api_types/index.js";
+import PreviewIcon from "~/components/PreviewIcon.vue";
 
 defineProps<{
   item: SitesBuildingsEntry | RoomEntry;
@@ -27,19 +22,7 @@ type RoomEntry = components["schemas"]["RoomEntry"];
       @mousedown="() => emit('mousedown')"
       @mouseover="() => emit('mouseover')"
     >
-      <div class="my-auto min-w-9 md:min-w-11">
-        <div
-          v-if="item.type === 'room' || item.type === 'virtual_room' || item.type === 'poi'"
-          class="text-zinc-900 p-2"
-        >
-          <MagnifyingGlassIcon v-if="item.parsed_id" class="h-5 w-5 md:h-6 md:w-6" />
-          <MapPinIcon v-else class="h-5 w-5 md:h-6 md:w-6" />
-        </div>
-        <div v-else class="text-white bg-blue-500 rounded-full p-2">
-          <BuildingOfficeIcon v-if="item.type === 'building'" class="mx-auto h-5 w-5 md:h-6 md:w-6" />
-          <BuildingOffice2Icon v-else class="mx-auto h-5 w-5 md:h-6 md:w-6" />
-        </div>
-      </div>
+      <PreviewIcon :item="{ type: item.type, parsed_id: undefined }" />
       <div class="text-zinc-600 flex flex-col gap-0.5">
         <div class="flex flex-col">
           <div
diff --git a/webclient/package.json b/webclient/package.json
index fff4ab899..a58c20b21 100644
--- a/webclient/package.json
+++ b/webclient/package.json
@@ -13,6 +13,9 @@
     "format": "prettier --plugin=prettier-plugin-tailwindcss --end-of-line lf --write ."
   },
   "dependencies": {
+    "@fullcalendar/core": "^6.1.14",
+    "@fullcalendar/daygrid": "^6.1.14",
+    "@fullcalendar/vue3": "^6.1.14",
     "@headlessui/vue": "1.7.22",
     "@heroicons/vue": "2.1.4",
     "@nuxt/content": "2.13.0",
@@ -28,8 +31,7 @@
     "swaggerdark": "github:octycs/SwaggerDark#f02d394c8ff698cdd93e09c2188b058d2d686ca3",
     "vue": "3.4.31",
     "vue-router": "4.4.0",
-    "vue3-carousel": "0.3.3",
-    "vue-simple-calendar": "7.1.0"
+    "vue3-carousel": "0.3.3"
   },
   "devDependencies": {
     "@nuxt/eslint": "0.3.13",
diff --git a/webclient/pnpm-lock.yaml b/webclient/pnpm-lock.yaml
index 0e1ff9aba..1f08ee230 100644
--- a/webclient/pnpm-lock.yaml
+++ b/webclient/pnpm-lock.yaml
@@ -8,6 +8,15 @@ importers:
 
   .:
     dependencies:
+      '@fullcalendar/core':
+        specifier: ^6.1.14
+        version: 6.1.14
+      '@fullcalendar/daygrid':
+        specifier: ^6.1.14
+        version: 6.1.14(@fullcalendar/core@6.1.14)
+      '@fullcalendar/vue3':
+        specifier: ^6.1.14
+        version: 6.1.14(@fullcalendar/core@6.1.14)(vue@3.4.31(typescript@5.4.5))
       '@headlessui/vue':
         specifier: 1.7.22
         version: 1.7.22(vue@3.4.31(typescript@5.4.5))
@@ -53,9 +62,6 @@ importers:
       vue-router:
         specifier: 4.4.0
         version: 4.4.0(vue@3.4.31(typescript@5.4.5))
-      vue-simple-calendar:
-        specifier: 7.1.0
-        version: 7.1.0(typescript@5.4.5)
       vue3-carousel:
         specifier: 0.3.3
         version: 0.3.3(vue@3.4.31(typescript@5.4.5))
@@ -799,6 +805,20 @@ packages:
   '@floating-ui/utils@0.2.1':
     resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
 
+  '@fullcalendar/core@6.1.14':
+    resolution: {integrity: sha512-hIPRBevm0aMc2aHy1hRIJgXmI1QTvQM1neQa9oxtuqUmF1+ApYC3oAdwcQMTuI7lHHw3pKJDyJFkKLPPnL6HXA==}
+
+  '@fullcalendar/daygrid@6.1.14':
+    resolution: {integrity: sha512-DSyjiA1dEM8k3bOCrZpZOmAOZu71KGtH02ze+4QKuhxkmn/zQghmmLRdfzpOrcyJg6xGKkoB4pBcO+2lXar8XQ==}
+    peerDependencies:
+      '@fullcalendar/core': ~6.1.14
+
+  '@fullcalendar/vue3@6.1.14':
+    resolution: {integrity: sha512-cD4tGlXOoIfRn5sz/+uT+50rAuCtPEgXfG3O5LJXI4xRWztAXqkmZetcuTEDb3OOy/D03IdtpjvoayCHib7rZg==}
+    peerDependencies:
+      '@fullcalendar/core': ~6.1.14
+      vue: ^3.0.11
+
   '@headlessui/vue@1.7.22':
     resolution: {integrity: sha512-Hoffjoolq1rY+LOfJ+B/OvkhuBXXBFgd8oBlN+l1TApma2dB0En0ucFZrwQtb33SmcCqd32EQd0y07oziXWNYg==}
     engines: {node: '>=10'}
@@ -5023,6 +5043,9 @@ packages:
   potpack@2.0.0:
     resolution: {integrity: sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw==}
 
+  preact@10.12.1:
+    resolution: {integrity: sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==}
+
   prebuild-install@7.1.2:
     resolution: {integrity: sha512-UnNke3IQb6sgarcZIDU3gbMeTp/9SSU1DAIkil7PrqG1vZlBtY5msYccSKSHDqa3hNg436IXK+SNImReuA1wEQ==}
     engines: {node: '>=10'}
@@ -6365,9 +6388,6 @@ packages:
     peerDependencies:
       vue: ^3.2.0
 
-  vue-simple-calendar@7.1.0:
-    resolution: {integrity: sha512-WNbvRVGQQJlStaLPvvpe2ZsB/E1n8eFgUh4hD931ljp2czPA8xT81i4jGD5+jKZT1OHDFpON5mNn0KwO2QC9rA==}
-
   vue-template-compiler@2.7.16:
     resolution: {integrity: sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==}
 
@@ -7250,6 +7270,19 @@ snapshots:
 
   '@floating-ui/utils@0.2.1': {}
 
+  '@fullcalendar/core@6.1.14':
+    dependencies:
+      preact: 10.12.1
+
+  '@fullcalendar/daygrid@6.1.14(@fullcalendar/core@6.1.14)':
+    dependencies:
+      '@fullcalendar/core': 6.1.14
+
+  '@fullcalendar/vue3@6.1.14(@fullcalendar/core@6.1.14)(vue@3.4.31(typescript@5.4.5))':
+    dependencies:
+      '@fullcalendar/core': 6.1.14
+      vue: 3.4.31(typescript@5.4.5)
+
   '@headlessui/vue@1.7.22(vue@3.4.31(typescript@5.4.5))':
     dependencies:
       '@tanstack/vue-virtual': 3.2.0(vue@3.4.31(typescript@5.4.5))
@@ -12974,6 +13007,8 @@ snapshots:
 
   potpack@2.0.0: {}
 
+  preact@10.12.1: {}
+
   prebuild-install@7.1.2:
     dependencies:
       detect-libc: 2.0.3
@@ -14588,12 +14623,6 @@ snapshots:
       '@vue/devtools-api': 6.6.1
       vue: 3.4.31(typescript@5.4.5)
 
-  vue-simple-calendar@7.1.0(typescript@5.4.5):
-    dependencies:
-      vue: 3.4.31(typescript@5.4.5)
-    transitivePeerDependencies:
-      - typescript
-
   vue-template-compiler@2.7.16:
     dependencies:
       de-indent: 1.0.2

From df84491fc11cc8a78bce57fba41ddb2ba97dbcfb Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Mon, 1 Jul 2024 01:45:12 +0200
Subject: [PATCH 08/13] made sure that some icons are more appropriately sized

---
 webclient/components/DetailsFeedbackButton.vue | 2 +-
 webclient/components/ShareButton.vue           | 3 ++-
 webclient/pages/[view]/[id].vue                | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/webclient/components/DetailsFeedbackButton.vue b/webclient/components/DetailsFeedbackButton.vue
index f4b803e93..13f8971df 100644
--- a/webclient/components/DetailsFeedbackButton.vue
+++ b/webclient/components/DetailsFeedbackButton.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { FlagIcon } from "@heroicons/vue/24/outline";
+import { FlagIcon } from "@heroicons/vue/16/solid";
 import { useFeedback } from "~/composables/feedback";
 
 const route = useRoute();
diff --git a/webclient/components/ShareButton.vue b/webclient/components/ShareButton.vue
index 0de5f6126..9ce65bc34 100644
--- a/webclient/components/ShareButton.vue
+++ b/webclient/components/ShareButton.vue
@@ -2,7 +2,8 @@
 import type { UseShareOptions } from "@vueuse/core";
 import { useClipboard, useShare } from "@vueuse/core";
 import type { components } from "~/api_types";
-import { ClipboardDocumentCheckIcon, ClipboardIcon, ShareIcon } from "@heroicons/vue/24/outline";
+import { ShareIcon } from "@heroicons/vue/16/solid";
+import { ClipboardDocumentCheckIcon, ClipboardIcon } from "@heroicons/vue/20/solid";
 
 const props = defineProps<{
   readonly coords: components["schemas"]["Coordinate"];
diff --git a/webclient/pages/[view]/[id].vue b/webclient/pages/[view]/[id].vue
index 77f5ad493..97c04bdae 100644
--- a/webclient/pages/[view]/[id].vue
+++ b/webclient/pages/[view]/[id].vue
@@ -2,7 +2,8 @@
 import { useClipboard } from "@vueuse/core";
 import type { components } from "~/api_types";
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/vue";
-import { CalendarDaysIcon, ClipboardDocumentCheckIcon, LinkIcon } from "@heroicons/vue/24/outline";
+import { CalendarDaysIcon } from "@heroicons/vue/16/solid";
+import { ClipboardDocumentCheckIcon, LinkIcon } from "@heroicons/vue/20/solid";
 import type { DetailsFeedbackButton, DetailsInteractiveMap, DetailsRoomfinderMap } from "#components";
 
 definePageMeta({

From eefe2c3699c00e6cb650a6fbb82f0c98d1a533c6 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Mon, 1 Jul 2024 01:49:20 +0200
Subject: [PATCH 09/13] renamed

---
 webclient/components/{Calendar.vue => CalendarFull.vue} | 0
 webclient/components/CalendarModal.vue                  | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 rename webclient/components/{Calendar.vue => CalendarFull.vue} (100%)

diff --git a/webclient/components/Calendar.vue b/webclient/components/CalendarFull.vue
similarity index 100%
rename from webclient/components/Calendar.vue
rename to webclient/components/CalendarFull.vue
diff --git a/webclient/components/CalendarModal.vue b/webclient/components/CalendarModal.vue
index 5d9293e6b..8c7fab53a 100644
--- a/webclient/components/CalendarModal.vue
+++ b/webclient/components/CalendarModal.vue
@@ -89,7 +89,7 @@ Thanks`,
             </I18nT>
           </Toast>
           <CalendarRoomSelector :data="locations" />
-          <Calendar
+          <CalendarFull
             v-model:earliest_last_sync="earliest_last_sync"
             v-model:locations="locations"
             :showing="calendar.showing"

From 4198e0f38ece90ff83b0c55a437f85e2cf280c9a Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Mon, 1 Jul 2024 01:55:11 +0200
Subject: [PATCH 10/13] fixed one div to be a paragraph

---
 webclient/components/CalendarModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/webclient/components/CalendarModal.vue b/webclient/components/CalendarModal.vue
index 8c7fab53a..6356b0144 100644
--- a/webclient/components/CalendarModal.vue
+++ b/webclient/components/CalendarModal.vue
@@ -94,14 +94,14 @@ Thanks`,
             v-model:locations="locations"
             :showing="calendar.showing"
           />
-          <div class="pt-2 text-xs">
+          <p class="pt-2 text-xs">
             {{ t("footer.disclaimer") }} <br />
             {{ t("footer.please_check") }}
             <template v-if="earliest_last_sync !== null">
               <br />
               {{ t("footer.last_sync", [earliest_last_sync]) }}
             </template>
-          </div>
+          </p>
         </div>
       </template>
     </NuxtErrorBoundary>

From 03fade65540b07448a6f247b3032b229b943af81 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Mon, 1 Jul 2024 02:00:27 +0200
Subject: [PATCH 11/13] formatting fixes

---
 server/main-api/src/calendar/connectum.rs |  4 ++--
 webclient/components/ShareButton.vue      | 10 +++++++++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/server/main-api/src/calendar/connectum.rs b/server/main-api/src/calendar/connectum.rs
index a8009b032..0a9917873 100644
--- a/server/main-api/src/calendar/connectum.rs
+++ b/server/main-api/src/calendar/connectum.rs
@@ -1,12 +1,12 @@
-use std::{env, io};
 use std::time::{Duration, Instant};
+use std::{env, io};
 
 use chrono::{DateTime, Utc};
 use log::{debug, error, warn};
-use oauth2::{AuthUrl, ClientId, ClientSecret, Scope, TokenResponse, TokenUrl};
 use oauth2::basic::{BasicClient, BasicTokenResponse};
 use oauth2::reqwest::async_http_client;
 use oauth2::url::Url;
+use oauth2::{AuthUrl, ClientId, ClientSecret, Scope, TokenResponse, TokenUrl};
 use sqlx::PgPool;
 
 use crate::calendar::models::Event;
diff --git a/webclient/components/ShareButton.vue b/webclient/components/ShareButton.vue
index 9ce65bc34..1a594d0b6 100644
--- a/webclient/components/ShareButton.vue
+++ b/webclient/components/ShareButton.vue
@@ -25,7 +25,13 @@ const shareOptions = computed<UseShareOptions>(() => ({
 </script>
 
 <template>
-  <button type="button" :title="t('external_link')" class="focusable rounded-sm" @click="modalOpen = true">
+  <button
+    type="button"
+    :title="t('external_link')"
+    :aria-label="t('sharing_options')"
+    class="focusable rounded-sm"
+    @click="modalOpen = true"
+  >
     <ShareIcon class="text-blue-600 h-4 w-4 hover:text-blue-900" />
   </button>
   <LazyModal v-model="modalOpen" :title="t('share')">
@@ -67,6 +73,7 @@ de:
   open_in: Öffnen in
   other_app: Andere App ...
   external_link: Externe Links
+  sharing_options: Externe Links und optionen diese seite zu teilen
   share: Teilen
   share_link: Teilen mit ...
 en:
@@ -75,6 +82,7 @@ en:
   open_in: Open in
   other_app: Other app ...
   external_link: External links
+  sharing_options: External links and options to share this page
   share: Share
   share_link: Share with ...
 </i18n>

From 29e449506464febc1f0eeffb821ce11c7097937c Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Mon, 1 Jul 2024 02:11:11 +0200
Subject: [PATCH 12/13] Update server/main-api/src/calendar/connectum.rs

---
 server/main-api/src/calendar/connectum.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/server/main-api/src/calendar/connectum.rs b/server/main-api/src/calendar/connectum.rs
index 0a9917873..2fb9bb469 100644
--- a/server/main-api/src/calendar/connectum.rs
+++ b/server/main-api/src/calendar/connectum.rs
@@ -69,7 +69,7 @@ impl APIRequestor {
     fn should_refresh_token(&self) -> bool {
         if let Some((start, token)) = &self.oauth_token {
             if let Some(expires_in) = token.expires_in() {
-                return start.elapsed() < expires_in + Duration::from_secs(60);
+                return (expires_in < start.elapsed()) || (expires_in - start.elapsed() < Duration::from_secs(60));
             }
         }
         true

From 4b276a89bdbea8ea53f77cd51302b93d54f953c2 Mon Sep 17 00:00:00 2001
From: Frank Elsinga <frank@elsinga.de>
Date: Mon, 1 Jul 2024 08:45:54 +0200
Subject: [PATCH 13/13] fiyed linting

---
 server/main-api/src/calendar/connectum.rs | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/server/main-api/src/calendar/connectum.rs b/server/main-api/src/calendar/connectum.rs
index 2fb9bb469..f828d676d 100644
--- a/server/main-api/src/calendar/connectum.rs
+++ b/server/main-api/src/calendar/connectum.rs
@@ -69,7 +69,8 @@ impl APIRequestor {
     fn should_refresh_token(&self) -> bool {
         if let Some((start, token)) = &self.oauth_token {
             if let Some(expires_in) = token.expires_in() {
-                return (expires_in < start.elapsed()) || (expires_in - start.elapsed() < Duration::from_secs(60));
+                return (expires_in < start.elapsed())
+                    || (expires_in - start.elapsed() < Duration::from_secs(60));
             }
         }
         true