From 62a401fd10cccf9c90f4e445232ce86a5b355b14 Mon Sep 17 00:00:00 2001
From: quirinecker <quirin.ecker@bajupa.com>
Date: Wed, 14 May 2025 19:58:43 +0200
Subject: [PATCH] selected date is marked in the big calendar

---
 web/components/ui/calendar/Calendar.vue        | 2 +-
 web/components/ui/calendar/CalendarCollumn.vue | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/components/ui/calendar/Calendar.vue b/web/components/ui/calendar/Calendar.vue
index 7117753..4c3019f 100644
--- a/web/components/ui/calendar/Calendar.vue
+++ b/web/components/ui/calendar/Calendar.vue
@@ -113,7 +113,7 @@ function quickCreate(date: DateTime, timespan: Timespan) {
 			<CalendarHeader :seperators="seperators" />
 
 			<CalendarCollumn v-for="day in days" :seperators="seperators" :day="day.date" :events="day.events"
-				v-model:draggedEvent="draggedEvent" @quick-create="quickCreate" />
+				:date="date" v-model:draggedEvent="draggedEvent" @quick-create="quickCreate" />
 		</div>
 
 	</div>
diff --git a/web/components/ui/calendar/CalendarCollumn.vue b/web/components/ui/calendar/CalendarCollumn.vue
index 558c7bf..9c591c2 100644
--- a/web/components/ui/calendar/CalendarCollumn.vue
+++ b/web/components/ui/calendar/CalendarCollumn.vue
@@ -4,11 +4,13 @@ import CalendarSeperator from './CalendarSeperator.vue';
 import CalendarEvent from './CalendarEvent.vue';
 import { Event } from '~/utils/event';
 import type { DateTime } from 'luxon';
+import { UBadge } from '#components';
 
 const props = defineProps<{
 	seperators: Seperator[],
 	day: DateTime
 	events: CollissionWrapper[][]
+	date: DateTime
 }>()
 
 const emit = defineEmits<{
@@ -94,7 +96,8 @@ function dragDrop(_: DragEvent) {
 	<div class="flex flex-col h-full grow">
 		<div class="flex justify-center items-center flex-col h-18 border-b-1 border-muted">
 			<div>{{ props.day.toFormat('ccc').toUpperCase() }}</div>
-			<div>{{ props.day.day }}</div>
+			<UBadge class="rounded-full" v-if="date.startOf('day').equals(day.startOf('day'))">{{ props.day.day }}</UBadge>
+			<div v-else>{{ props.day.day }}</div>
 		</div>
 
 		<div id="col" ref="column" @mousedown="mousedown" @mouseup="mouseup" @mousemove="mouseover" @dragover="dragover"