ff-admin/src/views/public/calendar/Calendar.vue

<template>
  <MainTemplate :showBack="false">
    <template #topBar>
      <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>
      <div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">
        <CustomCalendar :items="formattedItems" :allow-interaction="false" @event-select="eventClick" />
      </div>
    </template>
  </MainTemplate>
</template>

<script setup lang="ts">
import { defineComponent, markRaw, defineAsyncComponent } from "vue";
import { mapActions, mapState } from "pinia";
import { useModalStore } from "@/stores/modal";
import MainTemplate from "@/templates/Main.vue";
import { InformationCircleIcon, LinkIcon } from "@heroicons/vue/24/outline";
import type { CalendarViewModel } from "@/viewmodels/admin/club/calendar.models";
import { RouterLink } from "vue-router";
import CustomCalendar from "@/components/CustomCalendar.vue";
</script>

<script lang="ts">
export default defineComponent({
  data() {
    return {
      calendars: [] as Array<CalendarViewModel>,
    };
  },
  computed: {
    formattedItems() {
      return this.calendars.map((c) => ({
        id: c.id,
        title: c.title,
        start: c.starttime,
        end: c.endtime,
        backgroundColor: c.type.color,
      }));
    },
  },
  mounted() {
    this.fetchCalendars();
  },
  methods: {
    ...mapActions(useModalStore, ["openModal"]),
    fetchCalendars() {
      this.$http
        .get("/public/calendar?output=json")
        .then((result) => {
          this.calendars = result.data;
        })
        .catch((err) => {});
    },
    openLinkModal(e: any) {
      this.openModal(markRaw(defineAsyncComponent(() => import("@/components/public/calendar/CalendarLinkModal.vue"))));
    },
    eventClick(id: string) {
      this.openModal(
        markRaw(defineAsyncComponent(() => import("@/components/public/calendar/ShowCalendarEntryModal.vue"))),
        this.calendars.find((c) => c.id == id)
      );
    },
  },
});
</script>