calendar base component

package-lock.json

@@ -9,9 +9,12 @@
       "version": "0.0.2",
       "license": "GPL-3.0-only",
       "dependencies": {
+        "@fullcalendar/core": "^6.1.15",
+        "@fullcalendar/daygrid": "^6.1.15",
+        "@fullcalendar/interaction": "^6.1.15",
+        "@fullcalendar/vue3": "^6.1.15",
         "@headlessui/vue": "^1.7.13",
         "@heroicons/vue": "^2.1.5",
-        "@types/lodash.isequal": "^4.5.8",
         "axios": "^0.26.1",
         "jwt-decode": "^4.0.0",
         "lodash.clonedeep": "^4.5.0",
@@ -31,6 +34,7 @@
         "@tsconfig/node20": "^20.1.4",
         "@types/eslint": "~9.6.0",
         "@types/lodash.clonedeep": "^4.5.9",
+        "@types/lodash.isequal": "^4.5.8",
         "@types/node": "^20.14.5",
         "@types/nprogress": "^0.2.0",
         "@types/qrcode": "^1.5.5",
@@ -2409,6 +2413,43 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@fullcalendar/core": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/core/-/core-6.1.15.tgz",
+      "integrity": "sha512-BuX7o6ALpLb84cMw1FCB9/cSgF4JbVO894cjJZ6kP74jzbUZNjtwffwRdA+Id8rrLjT30d/7TrkW90k4zbXB5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "preact": "~10.12.1"
+      }
+    },
+    "node_modules/@fullcalendar/daygrid": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/daygrid/-/daygrid-6.1.15.tgz",
+      "integrity": "sha512-j8tL0HhfiVsdtOCLfzK2J0RtSkiad3BYYemwQKq512cx6btz6ZZ2RNc/hVnIxluuWFyvx5sXZwoeTJsFSFTEFA==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/interaction": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/interaction/-/interaction-6.1.15.tgz",
+      "integrity": "sha512-DOTSkofizM7QItjgu7W68TvKKvN9PSEEvDJceyMbQDvlXHa7pm/WAVtAc6xSDZ9xmB1QramYoWGLHkCYbTW1rQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15"
+      }
+    },
+    "node_modules/@fullcalendar/vue3": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/vue3/-/vue3-6.1.15.tgz",
+      "integrity": "sha512-ctfTICGrNEIj7gmLHQcUYe0WzDTSW5Vd9hyOnVChxPU75AZU9WqdDMkHwJYnfNxNhT6QQuiMHq/qsRRd5zQwOw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@fullcalendar/core": "~6.1.15",
+        "vue": "^3.0.11"
+      }
+    },
     "node_modules/@headlessui/vue": {
       "version": "1.7.22",
       "resolved": "https://registry.npmjs.org/@headlessui/vue/-/vue-1.7.22.tgz",
@@ -3070,6 +3111,7 @@
       "version": "4.17.7",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
       "integrity": "sha512-8wTvZawATi/lsmNu10/j2hk1KEP0IvjubqPE3cu1Xz7xfXXt5oCq3SNUz4fMIP4XGF9Ky+Ue2tBA3hcS7LSBlA==",
+      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/lodash.clonedeep": {
@@ -3086,6 +3128,7 @@
       "version": "4.5.8",
       "resolved": "https://registry.npmjs.org/@types/lodash.isequal/-/lodash.isequal-4.5.8.tgz",
       "integrity": "sha512-uput6pg4E/tj2LGxCZo9+y27JNyB2OZuuI/T5F+ylVDYuqICLG2/ktjxx0v6GvVntAf8TvEzeQLcV0ffRirXuA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/lodash": "*"
@@ -7492,6 +7535,16 @@
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
       "dev": true
     },
+    "node_modules/preact": {
+      "version": "10.12.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.12.1.tgz",
+      "integrity": "sha512-l8386ixSsBdbreOAkqtrwqHwdvR35ID8c3rKPa8lCWuO86dBi32QWHV4vfsZK1utLLFMvw+Z5Ad4XLkZzchscg==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/prebuild-install": {
       "version": "7.1.2",
       "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.2.tgz",

package.json

@@ -24,6 +24,10 @@
   "author": "JK Effects",
   "license": "GPL-3.0-only",
   "dependencies": {
+    "@fullcalendar/core": "^6.1.15",
+    "@fullcalendar/daygrid": "^6.1.15",
+    "@fullcalendar/interaction": "^6.1.15",
+    "@fullcalendar/vue3": "^6.1.15",
     "@headlessui/vue": "^1.7.13",
     "@heroicons/vue": "^2.1.5",
     "axios": "^0.26.1",

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>