date(range) select event

package-lock.json

@@ -12,6 +12,7 @@
         "@fullcalendar/core": "^6.1.15",
         "@fullcalendar/daygrid": "^6.1.15",
         "@fullcalendar/interaction": "^6.1.15",
+        "@fullcalendar/timegrid": "^6.1.15",
         "@fullcalendar/vue3": "^6.1.15",
         "@headlessui/vue": "^1.7.13",
         "@heroicons/vue": "^2.1.5",
@@ -2440,6 +2441,18 @@
         "@fullcalendar/core": "~6.1.15"
       }
     },
+    "node_modules/@fullcalendar/timegrid": {
+      "version": "6.1.15",
+      "resolved": "https://registry.npmjs.org/@fullcalendar/timegrid/-/timegrid-6.1.15.tgz",
+      "integrity": "sha512-61ORr3A148RtxQ2FNG7JKvacyA/TEVZ7z6I+3E9Oeu3dqTf6M928bFcpehRTIK6zIA6Yifs7BeWHgOE9dFnpbw==",
+      "license": "MIT",
+      "dependencies": {
+        "@fullcalendar/daygrid": "~6.1.15"
+      },
+      "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",

package.json

@@ -27,6 +27,7 @@
     "@fullcalendar/core": "^6.1.15",
     "@fullcalendar/daygrid": "^6.1.15",
     "@fullcalendar/interaction": "^6.1.15",
+    "@fullcalendar/timegrid": "^6.1.15",
     "@fullcalendar/vue3": "^6.1.15",
     "@headlessui/vue": "^1.7.13",
     "@heroicons/vue": "^2.1.5",

src/main.css

@@ -98,3 +98,6 @@ textarea[disabled] {
 .fc-button-active {
   @apply !bg-red-500 !border-red-500;
 }
+.fc-toolbar {
+  @apply flex-wrap;
+}

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

@@ -20,6 +20,7 @@ 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";
 </script>
 
@@ -29,25 +30,36 @@ export default defineComponent({
     return {
       calendarOptions: {
         locale: deLocale,
-        plugins: [dayGridPlugin, interactionPlugin],
+        plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
         initialView: "dayGridMonth",
         headerToolbar: {
-          left: "today",
+          left: "dayGridMonth,timeGridWeek",
           center: "title",
-          right: "prev,next",
+          right: "prev,today,next",
         },
         eventDisplay: "block",
         weekends: true,
         editable: true,
         selectable: true,
-        selectMirror: true,
+        selectMirror: false,
         dayMaxEvents: true,
         weekNumbers: true,
-        displayEventTime: false,
+        displayEventTime: true,
+        nowIndicator: true,
         weekText: "KW",
+        select: this.select,
+        eventClick: this.eventClick,
       },
     };
   },
+  methods: {
+    select(e: any) {
+      console.log("s", e);
+    },
+    eventClick(e: any) {
+      console.log("ec", e);
+    },
+  },
 });
 
 /**