calendar create and delete

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

@@ -14,21 +14,27 @@
 </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 { useCalendarStore } from "../../../../stores/admin/calendar";
 </script>
 
 <script lang="ts">
 export default defineComponent({
   data() {
-    return {
-      calendarOptions: {
+    return {};
+  },
+  computed: {
+    ...mapState(useCalendarStore, ["formattedItems"]),
+    calendarOptions() {
+      return {
         locale: deLocale,
         plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
         initialView: "dayGridMonth",
@@ -47,17 +53,36 @@ export default defineComponent({
         displayEventTime: true,
         nowIndicator: true,
         weekText: "KW",
+        allDaySlot: false,
+        events: this.formattedItems,
         select: this.select,
         eventClick: this.eventClick,
-      },
-    };
+      };
+    },
+  },
+  mounted() {
+    this.fetchCalendars();
   },
   methods: {
+    ...mapActions(useModalStore, ["openModal"]),
+    ...mapActions(useCalendarStore, ["fetchCalendars"]),
     select(e: any) {
       console.log("s", e);
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/CreateCalendarModal.vue"))),
+        {
+          start: e.startStr,
+          end: e.endStr,
+          allDay: e.allDay,
+        }
+      );
     },
     eventClick(e: any) {
       console.log("ec", e);
+      this.openModal(
+        markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/DeleteCalendarModal.vue"))),
+        e.event.id
+      );
     },
   },
 });