diff --git a/public/js/components/Calendar/Base/Grid.js b/public/js/components/Calendar/Base/Grid.js
index 572068f8e..c6b7dd2a3 100644
--- a/public/js/components/Calendar/Base/Grid.js
+++ b/public/js/components/Calendar/Base/Grid.js
@@ -308,7 +308,7 @@ export default {
 			<div
 				ref="main"
 				class="grid-main"
-				style="grid-column:1/-1;grid-row:1/-1;display:grid"
+				style="position:relative;grid-column:1/-1;grid-row:1/-1;display:grid"
 				:style="'grid-template-' + axisCol + 's:subgrid;grid-template-' + axisRow + 's:' + styleGridRows"
 			>
 				<div
diff --git a/public/js/components/Calendar/Mode/Day.js b/public/js/components/Calendar/Mode/Day.js
index dc697cfc0..d954f7b51 100644
--- a/public/js/components/Calendar/Mode/Day.js
+++ b/public/js/components/Calendar/Mode/Day.js
@@ -69,7 +69,7 @@ export default {
 		},
 		viewAttrs(days) {
 			const day = this.focusDate.plus({ days });
-			return { day };
+			return { ...this.$attrs, day };
 		}
 	},
 	mounted() {
diff --git a/public/js/components/Calendar/Mode/Day/View.js b/public/js/components/Calendar/Mode/Day/View.js
index cdd212b6d..72b0baa99 100644
--- a/public/js/components/Calendar/Mode/Day/View.js
+++ b/public/js/components/Calendar/Mode/Day/View.js
@@ -19,11 +19,14 @@ export default {
 		day: {
 			type: luxon.DateTime,
 			required: true
-		}
+		},
+		emptyMessage: String,
+		emptyMessageDetails: String
 	},
 	data() {
 		return {
-			chosenEvent: null
+			chosenEvent: null,
+			gridMainRef: null
 		};
 	},
 	computed: {
@@ -67,12 +70,16 @@ export default {
 			}
 		}
 	},
+	mounted() {
+		this.gridMainRef = this.$refs.grid.$refs.main;
+	},
 	template: /* html */`
 	<div
 		class="fhc-calendar-mode-day-view d-flex h-100"
 		@cal-click-default.capture="handleClickDefaults"
 	>
 		<calendar-grid
+			ref="grid"
 			:axis-main="axisMain"
 			:axis-parts="axisParts"
 			:snap-to-grid="!!timeGrid"
@@ -94,8 +101,23 @@ export default {
 				<slot v-bind="slot" mode="day" />
 			</template>
 		</calendar-grid>
-		<div class="w-100">
-			<div v-if="currentEvent === null">loading...</div>
+		<Teleport :disabled="!gridMainRef" :to="gridMainRef">
+			<div
+				v-if="emptyMessage && currentEvent !== null && !currentEvent"
+				class="fhc-calendar-no-events-overlay"
+				style="position:absolute;inset:0"
+			>
+				{{ emptyMessage }}
+			</div>
+		</Teleport>
+		<div class="event-details">
+			<div
+				v-if="currentEvent === null"
+				class="p-4 d-flex w-100 justify-content-center align-items-center"
+			>
+				<i class="fa-solid fa-spinner fa-pulse fa-3x"></i>
+			</div>
+			<h3 v-else-if="!currentEvent">{{ emptyMessageDetails }}</h3>
 			<slot v-else :event="currentEvent" mode="event" />
 		</div>
 	</div>