diff --git a/public/js/components/Calendar/Day/Page.js b/public/js/components/Calendar/Day/Page.js
index 01cbd8ba9..44aadb837 100644
--- a/public/js/components/Calendar/Day/Page.js
+++ b/public/js/components/Calendar/Day/Page.js
@@ -53,6 +53,7 @@ export default {
 		//TODO: workaround is to watch the active state and refetch in case the lvMenu is empty
 		active: {
 			handler(value) {
+				// handles fetching the lvMenu
 				if (value) {
 					if (!this.lvMenu) {
 						this.fetchLvMenu(this.selectedEvent);
@@ -64,7 +65,7 @@ export default {
 		events: {
 			handler(newEvents) {
 				// if no event is selected, select the first event of the day
-				if (this.selectedEvent == null && newEvents[this.day.toDateString()].length > 0) {
+				if (this.selectedEvent == null && newEvents[this.day.toDateString()]?.length > 0) {
 					let events = newEvents[this.day.toDateString()];
 					if (Array.isArray(events) && events.length > 0) {
 						this.setSelectedEvent(events[0]);
@@ -239,6 +240,9 @@ export default {
 		}
 	},
 	methods: {
+		dayScrollBehavior(event){
+			this.$refs.dayScrollContainer?.scrollBy({ top: Math.sign(event.deltaY) * 100, behavior: 'instant' });
+		},
 		dayGridStyle(day) {
 			const styleObj = {
 				'grid-template-columns': '1 1fr',
@@ -355,7 +359,7 @@ export default {
 	template: /*html*/`
 	<div class="fhc-calendar-day-page h-100">
 		<div class="row m-0 h-100">
-			<div class="col-12 col-xl-6 p-0 h-100">
+			<div style="overflow:auto" class="col-12 col-xl-6 p-0 h-100">
 				<div class="d-flex flex-column h-100">
 					<div ref="header" class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="pageHeaderStyle">
 						<div type="button" class="flex-grow-1" :title="dayText.heading" @click.prevent="changeToMonth(day)">
@@ -363,11 +367,11 @@ export default {
 							<a href="#" class="small text-secondary text-decoration-none" >{{dayText.datum}}</a>
 						</div>
 					</div>
-					<div id="scroll g-0" style="height: 100%; overflow-y: scroll;">
+					<div @wheel.prevent="dayScrollBehavior" id="scrollContainer" ref="dayScrollContainer" style="height: 100%; overflow-y: scroll;">
 
 						<div ref="eventcontainer" class="position-relative flex-grow-1"  >
 							<div class="all-day-event-container" >
-								<div class="all-day-event all-day-event-border" v-for="(day,dayindex) in eventsPerDayAndHour">
+								<div @wheel.stop class="all-day-event all-day-event-border" v-for="(day,dayindex) in eventsPerDayAndHour">
 									<template v-for="(events,_day) in allDayEvents" :key="_day">
 
 									<div v-if="dayindex == _day" v-for="event in events" :key="event" class="d-grid m-1" style="top:0;" @click.prevent="eventClick(event)"
diff --git a/public/js/components/Calendar/Pane.js b/public/js/components/Calendar/Pane.js
index 5a3a43aa9..abcf03744 100644
--- a/public/js/components/Calendar/Pane.js
+++ b/public/js/components/Calendar/Pane.js
@@ -39,6 +39,9 @@ export default {
 		
 	},
 	methods: {
+		scrollBehavior(event){
+			this.$refs.calendarContainer?.scrollBy({ top: Math.sign(event.deltaY) * 100, behavior: 'instant' });
+		},
 		scrollCalendar(event){
 			this.scrollTop = this.$refs.calendarContainer.scrollTop;
 			this.clientHeight = this.$refs.calendarContainer.clientHeight;
@@ -82,7 +85,7 @@ export default {
 	},
 	template: `
 	<div ref="carousel" class="calendar-pane carousel slide" @[\`slide.bs.carousel\`]="slide" @[\`slid.bs.carousel\`]="slid" :data-queue="queue">
-		<div id="calendarContainer" @scroll="scrollCalendar" ref="calendarContainer" class="carousel-inner " style="height:var(--fhc-calendar-pane-height);">
+		<div id="calendarContainer" @wheel.prevent="scrollBehavior" @scroll="scrollCalendar" ref="calendarContainer" class="carousel-inner " style="height:var(--fhc-calendar-pane-height);">
 			<div ref="carouselItems" v-for="i in [...Array(3).keys()]" :key="i" class="carousel-item" style="height:var(--fhc-calendar-pane-height);">
 				<slot :active="i == activeCarouselItemIndex" :index="i" :offset="offsets[i]" />
 			</div>
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index 86db5947e..a6bc221fe 100644
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -11,7 +11,6 @@ export default {
 			hourPositionTime:null,
 			resizeObserver: null,
 			width: 0,
-			scrollContainer: null,
 		}
 	},
 	inject: [
@@ -37,23 +36,6 @@ export default {
 		'page:forward',
 		'input',
 	],
-	watch: {
-		active: {
-			handler(value) {
-				const activeContainer = document.querySelector("#calendarContainer")
-				if(value){
-					Vue.nextTick(() => {
-						this.scrollContainer = activeContainer;
-						activeContainer.addEventListener('wheel', this.scrollFunction);
-					})
-				}else{
-					this.scrollContainer=null;
-					activeContainer?.removeEventListener('wheel', this.scrollFunction);
-				}
-			},
-			immediate: true,
-		}
-	},
 	computed: {
 		allDayEvents(){
 			let allDayEvents = {};
@@ -209,10 +191,6 @@ export default {
 		}
 	}, 
 	methods: {
-		scrollFunction(event){
-				event.preventDefault();
-				this.scrollContainer?.scrollBy({ top: Math.sign(event.deltaY) * 100, behavior: 'instant' });
-		},
 		hourGridIdentifier(hour) {
 			// this is the id attribute that is responsible to scroll the calender to the first event
 			return 'scroll' + hour + this.focusDate.d + this.week;
@@ -375,7 +353,7 @@ export default {
 			</div>
 			<div ref="eventcontainer" class="position-relative flex-grow-1"  >
 				<div class="all-day-event-container" >
-					<div class="all-day-event all-day-event-border" v-for="(day,dayindex) in eventsPerDayAndHour">
+					<div @wheel.stop class="all-day-event all-day-event-border" v-for="(day,dayindex) in eventsPerDayAndHour">
 						<template v-for="(events,_day) in allDayEvents" :key="_day">
 
 						<div v-if="dayindex == _day" v-for="event in events" :key="event" class="d-grid m-1" style="top:0;" @click.prevent="weekPageClick(event, _day)"