diff --git a/webclient/components/CalendarModal.vue b/webclient/components/CalendarModal.vue
index dd6786d13..88c5d2612 100644
--- a/webclient/components/CalendarModal.vue
+++ b/webclient/components/CalendarModal.vue
@@ -1,170 +1,195 @@
 <script setup lang="ts">
+// @ts-ignore
 import { CalendarView, CalendarViewHeader } from "vue-simple-calendar";
-import { ref, computed, watch } from "vue";
-import type { ICalendarItem } from "vue-simple-calendar/dist/src/ICalendarItem";
+// @ts-ignore
+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 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 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, pending, error } = useFetch<CalendarResponse>(url, { key: "calendar", dedupe: "defer", deep: false });
+watchEffect(() => {
+  if (!data.value) return;
+  tumonlineCalendarUrl.value = data.value.calendar_url;
+  last_sync.value = new Date(data.value.last_sync).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-if="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 />
+        <i18n-t keypath="footer.please_check">
+          <template #official_calendar>
+            <NuxtLink
+              :to="tumonlineCalendarUrl"
+              class="text-blue-600 bg-transparent visited:text-blue-600 hover:underline"
+            >
+              {{ t("footer.official_calendar") }}
+            </NuxtLink>
+          </template>
+        </i18n-t>
+        <br />
+        {{ t("footer.last_sync", [last_sync]) }}
       </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 {official_calendar}.
+    official_calendar: 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}
+    official_calendar: 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 f232ee0b8..3b8bfd164 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, { key: "details", dedupe: "defer", deep: false });
@@ -167,15 +168,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
+              type="button"
               v-if="data.props?.calendar_url"
-              :href="data.props.calendar_url"
-              target="_blank"
+              @click="
+                calendar.open = true;
+                calendar.showing = [route.params.id.toString()];
+              "
               class="focusable rounded-sm"
               :title="t('header.calendar')"
             >
               <CalendarDaysIcon class="text-blue-600 mt-0.5 h-4 w-4" />
-            </a>
+            </button>
             <ClientOnly>
               <ShareButton :coords="data.coords" :name="data.name" />
             </ClientOnly>
@@ -281,6 +285,9 @@ onMounted(() => {
     <Spinner class="h-8 w-8" />
     {{ t("Loading data...") }}
   </div>
+  <ClientOnly>
+    <LazyCalendarModal v-if="calendar.open"></LazyCalendarModal>
+  </ClientOnly>
 </template>
 
 <i18n lang="yaml">
diff --git a/webclient/pnpm-lock.yaml b/webclient/pnpm-lock.yaml
index 9f68b2ba2..135bd86da 100644
--- a/webclient/pnpm-lock.yaml
+++ b/webclient/pnpm-lock.yaml
@@ -53,6 +53,9 @@ importers:
       vue-router:
         specifier: 4.3.3
         version: 4.3.3(vue@3.4.27(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.27(typescript@5.4.5))
@@ -6173,6 +6176,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==}
 
@@ -14206,6 +14212,12 @@ snapshots:
       '@vue/devtools-api': 6.6.1
       vue: 3.4.27(typescript@5.4.5)
 
+  vue-simple-calendar@7.1.0(typescript@5.4.5):
+    dependencies:
+      vue: 3.4.27(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",