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>