diff --git a/public/js/components/Calendar/Calendar.js b/public/js/components/Calendar/Calendar.js
index 8eed731cd..cd935b2ad 100644
--- a/public/js/components/Calendar/Calendar.js
+++ b/public/js/components/Calendar/Calendar.js
@@ -95,7 +95,8 @@ export default {
 		'select:event',
 		'change:range',
 		'update:minimized',
-		'selectedEvent'
+		'selectedEvent',
+		'change:offset'
 	],
 	data() {
 		return {
@@ -240,7 +241,8 @@ export default {
 	},
 	template: /*html*/`
 	<div ref="container" class="fhc-calendar card h-100" :class="sizeClass">
-		<component :is="'calendar-' + mode" @updateMode="mode = $event" @change:range="$emit('change:range',$event)" @input="handleInput" >
+		<component :is="'calendar-' + mode" @updateMode="mode = $event" @change:range="$emit('change:range',$event)"
+		 @input="handleInput" @change:offset="$emit('change:offset', $event)">
 			<template #calendarDownloads>
 				<slot name="calendarDownloads" ></slot>
 			</template>
diff --git a/public/js/components/Calendar/Day.js b/public/js/components/Calendar/Day.js
index 2f07efef3..c1d0a6dfb 100644
--- a/public/js/components/Calendar/Day.js
+++ b/public/js/components/Calendar/Day.js
@@ -27,9 +27,11 @@ export default {
 		},
 		prev() {
 			this.$refs.pane.prev();
+			this.$emit('change:offset', { y: 0, m: 0, d: -1 });
 		},
 		next() {
 			this.$refs.pane.next();
+			this.$emit('change:offset', { y: 0, m: 0, d: -1 });
 		},
 		selectEvent(event) {
 			this.$emit('input', ['select:event', event]);
diff --git a/public/js/components/Calendar/Month.js b/public/js/components/Calendar/Month.js
index 79fc1bf23..513ed1c8c 100644
--- a/public/js/components/Calendar/Month.js
+++ b/public/js/components/Calendar/Month.js
@@ -35,9 +35,11 @@ export default {
 		},
 		prev() {
 			this.$refs.pane.prev();
+			this.$emit('change:offset', { y: 0, m: -1, d: 0 });
 		},
 		next() {
 			this.$refs.pane.next();
+			this.$emit('change:offset', { y: 0, m: 1, d: 0 });
 		},
 		selectDay(day) {
 			let m = day.getMonth();
diff --git a/public/js/components/Calendar/Week.js b/public/js/components/Calendar/Week.js
index 9a42f9659..350f0130d 100644
--- a/public/js/components/Calendar/Week.js
+++ b/public/js/components/Calendar/Week.js
@@ -27,9 +27,11 @@ export default {
 		},
 		prev() {
 			this.$refs.pane.prev();
+			this.$emit('change:offset', { y: 0, m: 0, d: -7 });
 		},
 		next() {
 			this.$refs.pane.next();
+			this.$emit('change:offset', { y: 0, m: 0, d: 7 });
 		},
 		selectEvent(event) {
 			this.$emit('input', ['select:event',event]);
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index d6e5c6df0..15ab08071 100644
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -272,6 +272,11 @@ export default {
 				this.$emit('updateMode', 'month');
 			}
 		},
+		changeToDay(day) {
+			this.date.set(day);
+			this.focusDate.set(day);
+			this.$emit('updateMode', 'day');
+		},
 		dateToMinutesOfDay(day) {
 			// subtract 7 from the total hours because the hours range from 7 to 24
 			return Math.floor(((day.getHours()-7) * 60 + day.getMinutes()) / this.smallestTimeFrame) + 1;
@@ -320,7 +325,7 @@ export default {
 	<div ref="page" class="fhc-calendar-week-page" style="min-width: 700px;">
 		<div class="d-flex flex-column">
 			<div class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="pageHeaderStyle" >
-				<div type="button" v-for="day in days" :key="day" class="flex-grow-1" :title="dayText[day]?.heading" @click.prevent="changeToMonth(day)">
+				<div type="button" v-for="day in days" :key="day" class="flex-grow-1" :title="dayText[day]?.heading" @click.prevent="changeToDay(day)">
 					<div class="fw-bold">{{dayText[day]?.tag}}</div>
 					<a href="#" class="small text-secondary text-decoration-none" >{{dayText[day]?.datum}}</a>
 				</div>
diff --git a/public/js/components/Calendar/Weeks.js b/public/js/components/Calendar/Weeks.js
index 844101b88..76243c67b 100644
--- a/public/js/components/Calendar/Weeks.js
+++ b/public/js/components/Calendar/Weeks.js
@@ -32,7 +32,7 @@ export default {
 		},
 	},
 	template: `
-	<div class="fhc-calendar-weeks">
+	<div class="fhc-calendar-weeks h-100">
 		<calendar-header :title="title" @prev="prev" @next="next" @click="$emit('updateMode', 'years')" @updateMode="$emit('updateMode', $event)" />
 		<div class="d-flex flex-wrap">
 			<div v-for="(week, key) in weeks" :key="key" class="d-grid col-2">
diff --git a/public/js/components/Calendar/Years.js b/public/js/components/Calendar/Years.js
index 6cda6cfe9..baff2eb6c 100644
--- a/public/js/components/Calendar/Years.js
+++ b/public/js/components/Calendar/Years.js
@@ -41,9 +41,11 @@ export default {
 		},
 		prev() {
 			this.$refs.pane.prev();
+			this.$emit('change:offset', { y: -1, m: 0, d: 0 });
 		},
 		next() {
 			this.$refs.pane.next();
+			this.$emit('change:offset', { y: 1, m: 0, d: 0 });
 		}
 	},
 	created() {
diff --git a/public/js/components/Cis/Mylv/RoomInformation.js b/public/js/components/Cis/Mylv/RoomInformation.js
index c89756faa..255e66164 100644
--- a/public/js/components/Cis/Mylv/RoomInformation.js
+++ b/public/js/components/Cis/Mylv/RoomInformation.js
@@ -79,6 +79,26 @@ const RoomInformation = {
 
 			this.currentDay = day;
 		},
+		handleOffset: function(offset)  {
+			this.currentDay = new Date(
+				this.currentDay.getFullYear() + offset.y,
+				this.currentDay.getMonth() + offset.m,
+				this.currentDay.getDate() + offset.d
+			)
+
+			const date = this.currentDay.getFullYear() + "-" +
+				String(this.currentDay.getMonth() + 1).padStart(2, "0") + "-" +
+				String(this.currentDay.getDate()).padStart(2, "0");
+
+			this.$router.push({
+				name: "Stundenplan",
+				params: {
+					mode: this.calendarMode,
+					focus_date: date,
+					lv_id: this.propsViewData?.lv_id || null
+				}
+			})
+		},
 		handleChangeMode(mode) {
 			const modeCapitalized = mode.charAt(0).toUpperCase() + mode.slice(1)
 
@@ -167,7 +187,8 @@ const RoomInformation = {
 			ref="calendar"
 			@selectedEvent="setSelectedEvent" 
 			:initial-date="currentDay"
-			@change:range="updateRange" 
+			@change:range="updateRange"
+			@change:offset="handleOffset"
 			:events="events" 
 			:initial-mode="propsViewData.mode"
 			show-weeks 
diff --git a/public/js/components/Cis/Stundenplan/Stundenplan.js b/public/js/components/Cis/Stundenplan/Stundenplan.js
index 43d7e3250..0eb21d5b1 100644
--- a/public/js/components/Cis/Stundenplan/Stundenplan.js
+++ b/public/js/components/Cis/Stundenplan/Stundenplan.js
@@ -106,6 +106,26 @@ const Stundenplan = {
 			
 			this.currentDay = day;
 		},
+		handleOffset: function(offset)  {
+			this.currentDay = new Date(
+				this.currentDay.getFullYear() + offset.y, 
+				this.currentDay.getMonth() + offset.m,
+				this.currentDay.getDate() + offset.d
+			)
+
+			const date = this.currentDay.getFullYear() + "-" +
+				String(this.currentDay.getMonth() + 1).padStart(2, "0") + "-" +
+				String(this.currentDay.getDate()).padStart(2, "0");
+
+			this.$router.push({
+				name: "Stundenplan",
+				params: {
+					mode: this.calendarMode,
+					focus_date: date,
+					lv_id: this.propsViewData?.lv_id || null
+				}
+			})
+		},
 		handleChangeMode(mode) {
 			const modeCapitalized = mode.charAt(0).toUpperCase() + mode.slice(1)
 
@@ -127,7 +147,7 @@ const Stundenplan = {
 			});
 		},
 		updateRange: function ({start,end}) {
-
+			
 			let checkDate = (date) => {
 				return date.m != this.eventCalendarDate.m || date.y != this.eventCalendarDate.y;
 			}
@@ -202,6 +222,7 @@ const Stundenplan = {
 		@selectedEvent="setSelectedEvent"
 		:initial-date="currentDay"
 		@change:range="updateRange"
+		@change:offset="handleOffset"
 		:events="events"
 		:initial-mode="propsViewData.mode"
 		show-weeks