From 6d453255433ba532868dbb2739fa24e34decd18b Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Mon, 14 Apr 2025 09:17:32 +0200
Subject: [PATCH] add styling option for wide calendar view

---
 src/components/CustomCalendar.vue      | 17 +++++++++++++----
 src/views/public/calendar/Calendar.vue |  7 ++++++-
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/components/CustomCalendar.vue b/src/components/CustomCalendar.vue
index e31d2d6..edafd21 100644
--- a/src/components/CustomCalendar.vue
+++ b/src/components/CustomCalendar.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="flex flex-col w-full h-full gap-2 justify-between overflow-hidden">
-    <div class="flex flex-row gap-2 max-xl:flex-wrap justify-between max-sm:justify-center">
-      <div class="flex flex-row max-xl:order-2">
+    <div
+      class="flex flex-row gap-2 justify-between max-sm:justify-center"
+      :class="smallStyling ? 'max-lg:flex-wrap' : 'max-xl:flex-wrap'"
+    >
+      <div class="flex flex-row" :class="smallStyling ? 'max-lg:order-2' : 'max-xl:order-2'">
         <button
           :primary="view == 'dayGridMonth'"
           :primary-outline="view != 'dayGridMonth'"
@@ -27,8 +30,10 @@
           Liste
         </button>
       </div>
-      <p class="text-3xl w-full max-xl:order-1 text-center">{{ currentTitle }}</p>
-      <div class="flex flex-row max-xl:order-3">
+      <p class="text-3xl w-full text-center" :class="smallStyling ? 'max-lg:order-1' : 'max-xl:order-1'">
+        {{ currentTitle }}
+      </p>
+      <div class="flex flex-row" :class="smallStyling ? 'max-lg:order-3' : 'max-xl:order-3'">
         <button primary-outline class="rounded-r-none!" @click="navigateView('prev')">
           <ChevronLeftIcon />
         </button>
@@ -83,6 +88,10 @@ export default defineComponent({
       type: Boolean,
       default: true,
     },
+    smallStyling: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: {
     dateSelect: ({ start, end, allDay }: { start: string; end: string; allDay: boolean }) => {
diff --git a/src/views/public/calendar/Calendar.vue b/src/views/public/calendar/Calendar.vue
index f4de6da..8c68586 100644
--- a/src/views/public/calendar/Calendar.vue
+++ b/src/views/public/calendar/Calendar.vue
@@ -12,7 +12,12 @@
     </template>
     <template #diffMain>
       <div class="flex flex-col w-full h-full gap-2 justify-between px-7 overflow-hidden">
-        <CustomCalendar :items="formattedItems" :allow-interaction="false" @event-select="eventClick" />
+        <CustomCalendar
+          :items="formattedItems"
+          :allow-interaction="false"
+          :small-styling="true"
+          @event-select="eventClick"
+        />
       </div>
     </template>
   </MainTemplate>