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">
        <FullCalendar :options="calendarOptions" class="max-h-full h-full" />
      </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 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">
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,
      }));
    },
    calendarOptions() {
      return {
        timeZone: "local",
        locale: deLocale,
        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
        initialView: "dayGridMonth",
        headerToolbar: {
          left: "dayGridMonth,timeGridWeek",
          center: "title",
          right: "prev,today,next",
        },
        eventDisplay: "block",
        weekends: true,
        editable: false,
        selectable: false,
        selectMirror: false,
        dayMaxEvents: true,
        weekNumbers: true,
        displayEventTime: true,
        nowIndicator: true,
        weekText: "KW",
        allDaySlot: false,
        events: this.formattedItems,
      };
    },
  },
  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"))));
    },
  },
});
</script>