calendar link and typed link

src/views/admin/club/calendar/Calendar.vue

@@ -3,6 +3,7 @@
     <template #topBar>
       <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
         <h1 class="font-bold text-xl h-8">Kalender</h1>
+        <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
       </div>
     </template>
     <template #diffMain>
@@ -25,6 +26,7 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import { useCalendarStore } from "@/stores/admin/calendar";
 import { useAbilityStore } from "@/stores/ability";
+import { LinkIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -87,6 +89,11 @@ export default defineComponent({
         e.event.id
       );
     },
+    openLinkModal(e: any) {
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/CalendarLinkModal.vue")))
+      );
+    },
   },
 });
 

src/views/public/calendar/Calendar.vue

@@ -1,8 +1,13 @@
 <template>
   <MainTemplate :showBack="false">
     <template #topBar>
-      <div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
+      <div class="flex flex-row items-center gap-4 pt-5 pb-3 px-7">
         <h1 class="font-bold text-xl h-8">Kalender</h1>
+        <div class="grow"></div>
+        <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
+        <RouterLink :to="{ name: 'public-calendar-explain' }">
+          <InformationCircleIcon class="text-gray-500 h-5 w-5 cursor-pointer" />
+        </RouterLink>
       </div>
     </template>
     <template #diffMain>
@@ -14,14 +19,18 @@
 </template>
 
 <script setup lang="ts">
-import { defineComponent } from "vue";
+import { defineComponent, markRaw, defineAsyncComponent } from "vue";
+import { mapActions, mapState } from "pinia";
+import { useModalStore } from "@/stores/modal";
 import MainTemplate from "@/templates/Main.vue";
 import FullCalendar from "@fullcalendar/vue3";
 import deLocale from "@fullcalendar/core/locales/de";
 import dayGridPlugin from "@fullcalendar/daygrid";
 import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
+import { InformationCircleIcon, LinkIcon } from "@heroicons/vue/24/outline";
 import type { CalendarViewModel } from "@/viewmodels/admin/calendar.models";
+import { RouterLink } from "vue-router";
 </script>
 
 <script lang="ts">
@@ -71,6 +80,7 @@ export default defineComponent({
     this.fetchCalendars();
   },
   methods: {
+    ...mapActions(useModalStore, ["openModal"]),
     fetchCalendars() {
       this.$http
         .get("/public/calendar?output=json")
@@ -79,6 +89,9 @@ export default defineComponent({
         })
         .catch((err) => {});
     },
+    openLinkModal(e: any) {
+      this.openModal(markRaw(defineAsyncComponent(() => import("@/components/public/calendar/CalendarLinkModal.vue"))));
+    },
   },
 });
 </script>

src/views/public/calendar/CalendarExplain.vue

@@ -0,0 +1,24 @@
+<template>
+  <MainTemplate :showBack="false">
+    <template #headerInsert>
+      <RouterLink
+        :to="{
+          name: 'public-calendar',
+        }"
+        class="mid:hidden text-primary"
+      >
+        zum Kalender
+      </RouterLink>
+    </template>
+    <template #topBar>
+      <div class="flex flex-row items-center gap-2 pt-5 pb-3 px-7">
+        <h1 class="font-bold text-xl h-8">Kalender-Erklärung</h1>
+      </div>
+    </template>
+    <template #main> Kalender-Erklärung zur Nutzung </template>
+  </MainTemplate>
+</template>
+
+<script setup lang="ts">
+import MainTemplate from "@/templates/Main.vue";
+</script>