From ee996bc303282deb693a696a9dab103c1f91e97c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andreas=20M=C3=BCller?= <mail@devmount.de>
Date: Wed, 29 May 2024 22:13:25 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A8=20Fix=20all=20day=20events=20style?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../elements/calendar/CalendarEventRemote.vue | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/src/elements/calendar/CalendarEventRemote.vue b/frontend/src/elements/calendar/CalendarEventRemote.vue
index 22402faab..5bb47c7a9 100644
--- a/frontend/src/elements/calendar/CalendarEventRemote.vue
+++ b/frontend/src/elements/calendar/CalendarEventRemote.vue
@@ -10,9 +10,8 @@
     }"
     :style="{
       borderColor: !isMonthView ? eventColor(event, false).border : null,
-      backgroundColor: isMonthView || (!isMonthView && event.tentative) ? 'transparent' : event.calendar_color,
-      color: !isMonthView && !event.tentative ? getAccessibleColor(event.calendar_color) : null,
-      color: !isMonthView && event.tentative ? event.calendar_color : null,
+      backgroundColor: eventBackgroundColor,
+      color: eventTextColor,
     }"
   >
     <div
@@ -38,6 +37,7 @@
 
 <script setup>
 import { eventColor, getAccessibleColor } from '@/utils';
+import { computed } from 'vue';
 
 // component properties
 const props = defineProps({
@@ -45,4 +45,26 @@ const props = defineProps({
   event: Object, // the event to show
   label: String, // event title
 });
+
+const eventBackgroundColor = computed(() => {
+  if (props.event.all_day) {
+    return null;
+  }
+  if (props.isMonthView || (!props.isMonthView && props.event.tentative)) {
+    return 'transparent';
+  } else {
+    return props.event.calendar_color;
+  }
+});
+
+const eventTextColor = computed(() => {
+  if (props.isMonthView) {
+    return null;
+  }
+  if (props.event.tentative) {
+    return props.event.calendar_color;
+  } else {
+    return getAccessibleColor(event.calendar_color)
+  }
+});
 </script>