src/components/Modal.vue

@@ -6,12 +6,7 @@
     @contextmenu.prevent
   >
     <!-- @click="closeModal" -->
-    <component
+    <component :is="component_ref" :data="data" @click.stop class="p-4 bg-white rounded-lg" />
-      :is="component_ref"
-      :data="data"
-      @click.stop
-      class="p-4 bg-white rounded-lg max-h-[95%] overflow-y-auto"
-    />
   </div>
 </template>
 

src/components/admin/club/calendar/CreateCalendarModal.vue

@@ -76,7 +76,7 @@
         />
         <label for="allDay">ganztägig</label>
       </div>
-      <div v-if="!allDay" class="flex flex-col sm:flex-row gap-2">
+      <div v-if="!allDay" class="flex flex-row gap-2">
         <div class="w-full">
           <label for="starttime">Startzeit</label>
           <input
@@ -105,7 +105,7 @@
           />
         </div>
       </div>
-      <div v-else class="flex flex-col sm:flex-row gap-2">
+      <div v-else class="flex flex-row gap-2">
         <div class="w-full">
           <label for="startdate">Startdatum</label>
           <input

src/components/admin/club/calendar/UpdateCalendarModal.vue

@@ -78,7 +78,7 @@
         <input type="checkbox" id="allDay" v-model="calendar.allDay" />
         <label for="allDay">ganztägig</label>
       </div>
-      <div v-if="!calendar.allDay" class="flex flex-col sm:flex-row gap-2">
+      <div v-if="!calendar.allDay" class="flex flex-row gap-2">
         <div class="w-full">
           <label for="starttime">Startzeit</label>
           <input
@@ -113,7 +113,7 @@
           />
         </div>
       </div>
-      <div v-else class="flex flex-col sm:flex-row gap-2">
+      <div v-else class="flex flex-row gap-2">
         <div class="w-full">
           <label for="startdate">Startdatum</label>
           <input

src/components/public/calendar/ShowCalendarEntryModal.vue

@@ -18,7 +18,7 @@
         <textarea id="content" class="h-18" readonly :value="data.content"></textarea>
       </div>
       <div v-if="data.allDay" class="flex flex-row gap-2 items-center">Der Termin findet ganztägig statt.</div>
-      <div v-if="data.allDay == false" class="flex flex-col sm:flex-row gap-2">
+      <div v-if="data.allDay == false" class="flex flex-row gap-2">
         <div class="w-full">
           <label for="starttime">Startzeit</label>
           <input type="datetime-local" id="starttime" readonly :value="formatForDateTimeLocalInput(data.starttime)" />
@@ -34,7 +34,7 @@
           />
         </div>
       </div>
-      <div v-else class="flex flex-col sm:flex-row gap-2">
+      <div v-else class="flex flex-row gap-2">
         <div class="w-full">
           <label for="startdate">Startdatum</label>
           <input type="date" id="startdate" readonly :value="formatForDateInput(data.starttime)" />

src/main.css

@@ -87,8 +87,7 @@ select {
 input[readonly],
 textarea[readonly],
 select[readonly] {
-  @apply select-none;
+  @apply pointer-events-none;
-  /* pointer-events-none; */
 }
 
 input[disabled],
@@ -125,7 +124,7 @@ summary::-webkit-details-marker {
 }
 
 .fc-button-primary {
-  @apply !bg-primary !border-primary !outline-none !ring-0 hover:!bg-red-700 hover:!border-red-700 h-10 text-center;
+  @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;
@@ -133,19 +132,3 @@ summary::-webkit-details-marker {
 .fc-toolbar {
   @apply flex-wrap;
 }
-
-/* For screens between 850px and 768px */
-@media (max-width: 850px) and (min-width: 768px) {
-  .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk:nth-child(2) {
-    @apply !order-1;
-  }
-  /* Your styles for this range */
-}
-
-/* For screens between 525px and 0px */
-@media (max-width: 525px) and (min-width: 0px) {
-  /* Your styles for this range */
-  .fc-header-toolbar.fc-toolbar.fc-toolbar-ltr > .fc-toolbar-chunk:nth-child(2) {
-    @apply !order-1;
-  }
-}

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

@@ -3,10 +3,7 @@
     <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 class="flex flex-row gap-2">
+        <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
-          <PlusIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="select" />
-          <LinkIcon class="text-gray-500 h-5 w-5 cursor-pointer" @click="openLinkModal" />
-        </div>
       </div>
     </template>
     <template #diffMain>
@@ -29,7 +26,7 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import { useCalendarStore } from "@/stores/admin/club/calendar";
 import { useAbilityStore } from "@/stores/ability";
-import { LinkIcon, PlusIcon } from "@heroicons/vue/24/outline";
+import { LinkIcon } from "@heroicons/vue/24/outline";
 </script>
 
 <script lang="ts">
@@ -79,9 +76,9 @@ export default defineComponent({
       this.openModal(
         markRaw(defineAsyncComponent(() => import("@/components/admin/club/calendar/CreateCalendarModal.vue"))),
         {
-          start: e?.startStr ?? new Date().toISOString(),
+          start: e.startStr,
-          end: e?.endStr ?? new Date().toISOString(),
+          end: e.endStr,
-          allDay: e?.allDay ?? false,
+          allDay: e.allDay,
         }
       );
     },