diff --git a/webclient/src/views/view/i18n-view.yaml b/webclient/src/views/view/i18n-view.yaml
index 00326d0b6..70cde572f 100644
--- a/webclient/src/views/view/i18n-view.yaml
+++ b/webclient/src/views/view/i18n-view.yaml
@@ -10,7 +10,9 @@ view_view:
       share: { de: "Teilen", en: "Share" }
       share_link: { de: "Teilen mit ...", en: "Share with ..." }
       copied: { de: "Kopiert", en: "Copied" }
-    calendar: { de: "Kalender öffnen", en: "Open calendar" }
+    calendar:
+      open: { de: "Kalender öffnen", en: "Open calendar" }
+      close: { de: "Kalender schließen", en: "Close calendar" }
     feedback:
       de: "Problem melden oder Änderung vorschlagen"
       en: "Report issue or suggest changes"
diff --git a/webclient/src/views/view/view-view.inc b/webclient/src/views/view/view-view.inc
index 36198ae2a..f86c721db 100644
--- a/webclient/src/views/view/view-view.inc
+++ b/webclient/src/views/view/view-view.inc
@@ -97,8 +97,6 @@
         <a
           class="btn btn-link btn-action btn-sm"
           v-if="view_data.props?.calendar_url"
-          v-bind:href="view_data.props.calendar_url"
-          target="_blank"
           title="${{ _.view_view.header.calendar }}$"
         >
           <svg
@@ -184,6 +182,33 @@
       </div>
     </div>
     <div class="divider"></div>
+    <!-- Modal-Calendar -->
+    <div
+      class="modal modal-lg"
+      id="modal-calendar"
+      v-bind:class="{active: calendar.modalOpen}"
+    >
+      <a
+        class="modal-overlay"
+        aria-label="Close"
+        @click="calendar.modalOpen=false"
+      >
+      </a>
+        <div class="modal-container modal-fullheight" id="calendarModal-container">
+          <div class="modal-header">
+            <button
+              class="btn btn-clear float-right"
+              aria-label="${{_.view_view.header.calendar.close}}$"
+              @click="calendar.modalOpen=false"
+            ></button>
+          </div>
+          <div class="modal-body">
+            <div class="content" id="modalCalendarContent">
+              <iframe src="view_data.props.calendar_url" id="calendarModalIFrame"></iframe>
+            </div>
+          </div>
+        </div>
+    </div>
   </div>
 
   <!-- First info section (map + infocard) -->
diff --git a/webclient/src/views/view/view-view.js b/webclient/src/views/view/view-view.js
index c049624b3..a398db617 100644
--- a/webclient/src/views/view/view-view.js
+++ b/webclient/src/views/view/view-view.js
@@ -117,6 +117,9 @@ navigatum.registerView("view", {
         body_backup: null,
         force_reopen: false,
       },
+      calendar: {
+        modalOpen: false,
+      },
       browser_supports_share: "share" in navigator,
     };
   },
diff --git a/webclient/src/views/view/view-view.scss b/webclient/src/views/view/view-view.scss
index f968c942f..108869eaa 100644
--- a/webclient/src/views/view/view-view.scss
+++ b/webclient/src/views/view/view-view.scss
@@ -104,6 +104,20 @@
         }
     }
 
+    /* --- Modal Calendar --- */
+    #modal-calendar {
+        align-items: baseline;
+
+        & .modal-container {
+            position: relative;
+            top: 5em;
+        }
+    }
+
+    #calendarModalIFrame {
+        width: 100%;
+    }
+
     /* --- Pending coordinates counter --- */
     .coord-counter {
         margin: 8px 0;