date(range) select event

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);
+    },
+  },
 });
 
 /**