calendar base component

src/main.css

@@ -56,7 +56,7 @@ body {
   @apply w-full h-full overflow-hidden flex flex-col;
 }
 
-button:not([headlessui]),
+button:not([headlessui]):not([class*="fc"]),
 a[button]:not([headlessui]) {
   @apply relative box-border h-10 w-full flex justify-center py-2 px-4 text-sm font-medium rounded-md focus:outline-none focus:ring-0;
 }
@@ -91,3 +91,10 @@ input[disabled],
 textarea[disabled] {
   @apply opacity-75 pointer-events-none;
 }
+
+.fc-button-primary {
+  @apply !bg-primary !border-primary !outline-none !ring-0 hover:!bg-red-700 hover:!border-red-700;
+}
+.fc-button-active {
+  @apply !bg-red-500 !border-red-500;
+}

src/router/index.ts

@@ -135,7 +135,7 @@ const router = createRouter({
             {
               path: "calendar",
               name: "admin-club-calendar",
-              component: () => import("@/views/admin/members/Overview.vue"),
+              component: () => import("@/views/admin/club/calendar/Calendar.vue"),
               meta: { type: "read", section: "club", module: "calendar" },
               beforeEnter: [abilityAndNavUpdate],
             },

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>