diff --git a/public/js/components/DashboardWidget/Stundenplan.js b/public/js/components/DashboardWidget/Stundenplan.js
index c99395f31..3c8610422 100755
--- a/public/js/components/DashboardWidget/Stundenplan.js
+++ b/public/js/components/DashboardWidget/Stundenplan.js
@@ -2,7 +2,8 @@ import Phrasen from '../../mixins/Phrasen.js';
 import AbstractWidget from './Abstract.js';
 import FhcCalendar from '../Calendar/Calendar.js';
 import LvUebersicht from '../Cis/Mylv/LvUebersicht.js';
-import ContentModal from '../Cis/Cms/ContentModal.js';
+import ContentModal from '../Cis/Cms/ContentModal.js'
+import CalendarDate from '../../composables/CalendarDate.js';
 
 export default {
 	mixins: [
@@ -21,10 +22,9 @@ export default {
 			minimized: true,
 			events: null,
 			currentDay: new Date(),
-			// used for contentModal
+			calendarDate: new CalendarDate(new Date()),
 			roomInfoContentID: null,
 			ort_kurzbz: null,
-			// used for LvUbersichtModal
 			selectedEvent: null,
 		}
 	},
@@ -37,12 +37,23 @@ export default {
 			let currentDay = new Date(this.currentDay);
 			currentDay.setDate(currentDay.getDate() + 1);
 			return currentDay;
-		}
+		},
+		monthFirstDay: function () {
+			return this.calendarDateToString(this.calendarDate.cdFirstDayOfCalendarMonth);
+		},
+		monthLastDay: function () {
+			return this.calendarDateToString(this.calendarDate.cdLastDayOfCalendarMonth);
+		},
 	},
 	methods: {
-		
-		showRoomInfoModal: function(ort_kurzbz){
+		calendarDateToString: function (calendarDate) {
 
+			return calendarDate instanceof CalendarDate ?
+				[calendarDate.y, calendarDate.m + 1, calendarDate.d].join('-') :
+				null;
+
+		},
+		showRoomInfoModal: function(ort_kurzbz){
 			// getting the content_id of the ort_kurzbz
 			this.$fhcApi.factory.ort.getContentID(ort_kurzbz).then(res =>{
 				this.roomInfoContentID = res.data;
@@ -70,7 +81,6 @@ export default {
 			this.currentDay = day;
 			this.minimized = true;
 		},
-		// this function was the alternative of showing the room information in the content component instead of showing the room information inside a modal
 		showRoomInfo: function($ort_kurzbz){
 			
 			this.$fhcApi.factory.ort.getContentID($ort_kurzbz).then(res =>{
@@ -78,17 +88,61 @@ export default {
 				window.location.href = FHC_JS_DATA_STORAGE_OBJECT.app_root +
 				FHC_JS_DATA_STORAGE_OBJECT.ci_router +
 				"/CisHtml/Cms/content/" + res.data;
-			
 			})
-		}
+		},
+
+		updateRange: function (data) {
+			
+			let tmp_date = new CalendarDate(data.start);
+			// only load month data if the month or year has changed
+			if (tmp_date.m != this.calendarDate.m || tmp_date.y != this.calendarDate.y) {
+				this.calendarDate = tmp_date;
+				Vue.nextTick(() => {
+					this.loadEvents();
+				});
+			}
+		},
+		
+
+		loadEvents: function () {
+			Promise.allSettled([
+				this.$fhcApi.factory.stundenplan.getStundenplan(this.monthFirstDay, this.monthLastDay),
+				this.$fhcApi.factory.stundenplan.getStundenplanReservierungen(this.monthFirstDay, this.monthLastDay)
+			]).then((result) => {
+				let promise_events = [];
+				result.forEach((promise_result) => {
+					if (promise_result.status === 'fulfilled' && promise_result.value.meta.status === "success") {
+
+						let data = promise_result.value.data;
+						// adding additional information to the events 
+						if (data && data.forEach) {
+
+							data.forEach((el, i) => {
+								el.id = i;
+								if (el.type === 'reservierung') {
+									el.color = '#' + (el.farbe || 'FFFFFF');
+								} else {
+									el.color = '#' + (el.farbe || 'CCCCCC');
+								}
+
+								el.start = new Date(el.datum + ' ' + el.beginn);
+								el.end = new Date(el.datum + ' ' + el.ende);
+
+							});
+						}
+						promise_events = promise_events.concat(data);
+					}
+				})
+				this.events = promise_events;
+			});
+		},
+	
 
 	},
 	created() {
-
-		
-		
 		this.$emit('setConfig', false);
-		axios
+		this.loadEvents();
+		/* axios
 			.get(this.apiurl + '/components/Cis/Stundenplan/Stunden').then(res => {
 				res.data.retval.forEach(std => {
 					this.stunden[std.stunde] = std; // TODO(chris): geht besser
@@ -109,24 +163,23 @@ export default {
 					})
 					.catch(err => { console.log(err);console.error('ERROR: ', err.response.data) });
 			})
-			.catch(err => { console.error('ERROR: ', err.response.data) });
+			.catch(err => { console.error('ERROR: ', err.response.data) }); */
 	},
 	template: /*html*/`
 	<div class="dashboard-widget-stundenplan d-flex flex-column h-100">
 		<lv-uebersicht ref="lvUebersicht" :event="selectedEvent"  />
 		<content-modal :contentID="roomInfoContentID" :ort_kurzbz="" dialogClass="modal-lg" ref="contentModal"/>
-		<fhc-calendar :initial-date="currentDay" class="border-0" class-header="p-0" @select:day="selectDay" v-model:minimized="minimized" :events="events" no-week-view :show-weeks="false" />
+		<fhc-calendar @change:range="updateRange" :initial-date="currentDay" class="border-0" class-header="p-0" @select:day="selectDay" v-model:minimized="minimized" :events="events" no-week-view :show-weeks="false" />
 		<div v-show="minimized" class="flex-grow-1 overflow-scroll">
 			<div v-if="events === null" class="d-flex h-100 justify-content-center align-items-center">
 				<i class="fa-solid fa-spinner fa-pulse fa-3x"></i>
 			</div>
 			<div v-else-if="currentEvents.length" class="list-group list-group-flush">
 				<div role="button" @click="showLvUebersicht(evt)" class="" v-for="evt in currentEvents" :key="evt.id" class="list-group-item small" :style="{'background-color':evt.color}">
-					<b>{{evt.title}}</b>
+					<b>{{evt.topic}}</b>
 					<br>
 					<small class="d-flex w-100 justify-content-between">
 						<!-- event modifier stop to prevent opening the modal for the lv Uebersicht when clicking on the ort_kurzbz -->
-						<!-- old event: showRoomInfo(evt.ort_kurzbz) -->
 						<span @click.stop="showRoomInfoModal(evt.ort_kurzbz)" style="text-decoration:underline" type="button">{{evt.ort_kurzbz}}</span>
 						<span>{{evt.start.toLocaleTimeString(undefined, {hour:'numeric',minute:'numeric'})}}-{{evt.end.toLocaleTimeString(undefined, {hour:'numeric',minute:'numeric'})}}</span>
 					</small>