calendar base component

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

@@ -0,0 +1,103 @@
+<template>
+  <MainTemplate>
+    <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>
+      </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 } from "vue";
+import { mapActions, mapState } from "pinia";
+import MainTemplate from "@/templates/Main.vue";
+import FullCalendar from "@fullcalendar/vue3";
+import deLocale from "@fullcalendar/core/locales/de";
+import dayGridPlugin from "@fullcalendar/daygrid";
+import interactionPlugin from "@fullcalendar/interaction";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  data() {
+    return {
+      calendarOptions: {
+        locale: deLocale,
+        plugins: [dayGridPlugin, interactionPlugin],
+        initialView: "dayGridMonth",
+        headerToolbar: {
+          left: "today",
+          center: "title",
+          right: "prev,next",
+        },
+        eventDisplay: "block",
+        weekends: true,
+        editable: true,
+        selectable: true,
+        selectMirror: true,
+        dayMaxEvents: true,
+        weekNumbers: true,
+        displayEventTime: false,
+        weekText: "KW",
+      },
+    };
+  },
+});
+
+/**
+locale: deLocale,
+      events: this.absencesList.map((x) => ({
+        id: x.absenceId,
+        start: x.startDate,
+        end: x.endDate,
+        allday: true,
+        backgroundColor: this.getColorForAbsenceType(x.absenceType),
+        borderColor: '#ffffff',
+        title: this.getAbsenceType(x.absenceType) + ' ' + x.fullName,
+      })),
+      plugins: [
+        interactionPlugin,
+        dayGridPlugin,
+        timeGridPlugin,
+        listPlugin,
+        multiMonthPlugin,
+      ],
+      initialView: 'dayGridMonth',
+      eventDisplay: 'block',
+      weekends: false,
+      editable: true,
+      selectable: true,
+      selectMirror: true,
+      dayMaxEvents: true,
+      weekNumbers: true,
+      displayEventTime: false,
+      weekText: 'KW',
+      validRange: { start: '2023-01-01', end: '' },
+      headerToolbar: {
+        left: 'today prev,next',
+        center: 'title',
+        right: 'listMonth,dayGridMonth,multiMonthYear,customview',
+      },
+      views: {
+        customview: {
+          type: 'multiMonth',
+          multiMonthMaxColumns: 1,
+          duration: { month: 12 },
+          buttonText: 'grid',
+        },
+      },
+      dateClick: this.handleDateSelect.bind(this),
+      datesSet: this.handleMonthChange.bind(this),
+      select: this.handleDateSelect.bind(this),
+      eventClick: this.handleEventClick.bind(this),
+      eventsSet: this.handleEvents.bind(this),
+    }; 
+
+ */
+</script>