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/server/main-api/src/calendar/connectum.rs b/server/main-api/src/calendar/connectum.rs
index 4a8b11d6f..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() < Duration::from_secs(60);
+                return (expires_in < start.elapsed())
+                    || (expires_in - start.elapsed() < Duration::from_secs(60));
             }
         }
         true
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/CalendarFull.vue b/webclient/components/CalendarFull.vue
new file mode 100644
index 000000000..d5e7a87e0
--- /dev/null
+++ b/webclient/components/CalendarFull.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
new file mode 100644
index 000000000..6356b0144
--- /dev/null
+++ b/webclient/components/CalendarModal.vue
@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { useFeedback } from "~/composables/feedback";
+import { useCalendar } from "~/composables/calendar";
+import type { components } from "~/api_types";
+
+type CalendarLocation = components["schemas"]["CalendarLocation"];
+
+const feedback = useFeedback();
+const calendar = useCalendar();
+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')" 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
+-
+
+Thanks`,
+                        deletion_requested: false,
+                      };
+                    }
+                  "
+                >
+                  {{ t("error.feedback-form") }}
+                </button>
+              </template>
+            </I18nT>
+          </Toast>
+          <CalendarRoomSelector :data="locations" />
+          <CalendarFull
+            v-model:earliest_last_sync="earliest_last_sync"
+            v-model:locations="locations"
+            :showing="calendar.showing"
+          />
+          <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>
+          </p>
+        </div>
+      </template>
+    </NuxtErrorBoundary>
+  </LazyModal>
+</template>
+
+<i18n lang="yaml">
+de:
+  title: Kalendar
+  close: Schließen
+  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 {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.
+    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
+  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
+  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/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/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/components/ShareButton.vue b/webclient/components/ShareButton.vue
index 0de5f6126..1a594d0b6 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"];
@@ -24,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')">
@@ -66,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:
@@ -74,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>
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/package.json b/webclient/package.json
index adf469cf9..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",
diff --git a/webclient/pages/[view]/[id].vue b/webclient/pages/[view]/[id].vue
index 5f9fda12e..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({
@@ -19,6 +20,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 +175,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 +292,9 @@ onMounted(() => {
     <Spinner class="h-8 w-8" />
     {{ t("Loading data...") }}
   </div>
+  <ClientOnly>
+    <CalendarModal v-if="calendar.open" />
+  </ClientOnly>
 </template>
 
 <i18n lang="yaml">
diff --git a/webclient/pnpm-lock.yaml b/webclient/pnpm-lock.yaml
index 0cbd33843..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))
@@ -796,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'}
@@ -5020,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'}
@@ -7244,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))
@@ -12968,6 +13007,8 @@ snapshots:
 
   potpack@2.0.0: {}
 
+  preact@10.12.1: {}
+
   prebuild-install@7.1.2:
     dependencies:
       detect-libc: 2.0.3
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",