diff --git a/public/css/Cis4/CoreCalendarEvents.css b/public/css/Cis4/CoreCalendarEvents.css
index df451ebf1..3941872ef 100644
--- a/public/css/Cis4/CoreCalendarEvents.css
+++ b/public/css/Cis4/CoreCalendarEvents.css
@@ -4,96 +4,96 @@
 	height: 100%;
 }
 
-/* Feiertag */
-.feiertagEventContent {
+/* Feiertage */
+.cis-renderer-feiertage-calendar-event {
 	align-items: center;
 	color: var(--fhc-light);
 }
-.monthPageContainer .feiertagEventContent,
-.weekPageContainer .feiertagEventContent,
-.dayPageContainer .feiertagEventContent {
+.monthPageContainer .cis-renderer-feiertage-calendar-event,
+.weekPageContainer .cis-renderer-feiertage-calendar-event,
+.dayPageContainer .cis-renderer-feiertage-calendar-event {
 	display: grid;
 	grid-template-columns: auto 1fr;
 	justify-items: center;
 }
-.listPageContainer .feiertagEventContent {
+.listPageContainer .cis-renderer-feiertage-calendar-event {
 	display: flex;
 	justify-content: center;
 }
 
-.monthPageContainer .feiertagEventContent #ferienEventIcon {
+.monthPageContainer .cis-renderer-feiertage-calendar-event .event-icon {
 	margin: 0 .5rem;
 }
-.weekPageContainer .feiertagEventContent #ferienEventIcon,
-.dayPageContainer .feiertagEventContent #ferienEventIcon,
-.listPageContainer .feiertagEventContent #ferienEventIcon {
+.weekPageContainer .cis-renderer-feiertage-calendar-event .event-icon,
+.dayPageContainer .cis-renderer-feiertage-calendar-event .event-icon,
+.listPageContainer .cis-renderer-feiertage-calendar-event .event-icon {
 	margin: .5rem;
 }
 
-.listPageContainer .feiertagEventContent #ferienEventTitle {
+.listPageContainer .cis-renderer-feiertage-calendar-event .event-title {
 	flex-grow: 1;
 }
 
 /* Lehreinheit */
-.monthPageContainer .lehreinheitEventContent {
+/* Reservierungen */
+.monthPageContainer .calendar-event-default {
 	padding: 0!important;
 }
-.monthPageContainer .lehreinheitEventContent #lehreinheitEventHeader,
-.monthPageContainer .lehreinheitEventContent #lehreinheitLektoren,
-.monthPageContainer .lehreinheitEventContent #lektorEllipsis {
+.monthPageContainer .calendar-event-default .event-time,
+.monthPageContainer .calendar-event-default .event-lectors {
 	display: none!important;
 }
-.monthPageContainer .lehreinheitEventContent #lehreinheitEventText {
+.monthPageContainer .calendar-event-default .event-text {
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
 }
-.weekPageContainer .lehreinheitEventContent {
+.weekPageContainer .calendar-event-default {
 	display: grid;
 	grid-template-columns: auto 1fr;
 }
-.weekPageContainer .lehreinheitEventContent #lehreinheitEventHeader {
+.weekPageContainer .calendar-event-default .event-time {
 	border-inline-end: solid 1px var(--bs-secondary);
 	align-self: stretch;
 	align-content: center;
 	padding: .25em .5em .25em .25em;
 	margin-inline-end: .25rem;
 }
-.weekPageContainer .lehreinheitEventContent #lehreinheitEventText {
+.weekPageContainer .calendar-event-default .event-text {
 	display: flex;
 	flex-direction: column;
 	justify-content: space-evenly;
 	align-items: center;
 }
-.dayPageContainer .lehreinheitEventContent,
-.listPageContainer .lehreinheitEventContent {
+.dayPageContainer .calendar-event-default,
+.listPageContainer .calendar-event-default {
 	display: flex;
 	align-items: center;
 }
-.dayPageContainer .lehreinheitEventContent #lehreinheitEventHeader,
-.listPageContainer .lehreinheitEventContent #lehreinheitEventHeader {
+.dayPageContainer .calendar-event-default .event-time,
+.listPageContainer .calendar-event-default .event-time {
 	align-content: center;
 	padding-inline-end: .5em;
 	border-inline-end: solid 1px;
 	margin-inline-end: .5em;
 }
-.dayPageContainer .lehreinheitEventContent #lehreinheitEventText,
-.listPageContainer .lehreinheitEventContent #lehreinheitEventText {
+.dayPageContainer .calendar-event-default .event-text,
+.listPageContainer .calendar-event-default .event-text {
 	flex: 1 1 auto;
 	display: flex;
 	flex-wrap: wrap;
 	gap: .25em;
 	justify-content: center;
 }
-.dayPageContainer .lehreinheitEventContent #lehreinheitTopic,
-.dayPageContainer .lehreinheitEventContent #lehreinheitOrt,
-.listPageContainer .lehreinheitEventContent #lehreinheitTopic,
-.listPageContainer .lehreinheitEventContent #lehreinheitOrt {
+.dayPageContainer .calendar-event-default .event-topic,
+.dayPageContainer .calendar-event-default .event-place,
+.listPageContainer .calendar-event-default .event-topic,
+.listPageContainer .calendar-event-default .event-place {
 	flex: 0 0 100%;
 	text-align: center;
 }
 
-.fhc-roominformation .lehreinheitEventContent #lehreinheitOrt {
+.fhc-roominformation .calendar-event-default .event-place {
 	display: none;
 }
 
diff --git a/public/js/components/Cis/Renderer/Feiertage/calendarEvent.js b/public/js/components/Cis/Renderer/Feiertage/calendarEvent.js
index ffc164117..d226e935a 100644
--- a/public/js/components/Cis/Renderer/Feiertage/calendarEvent.js
+++ b/public/js/components/Cis/Renderer/Feiertage/calendarEvent.js
@@ -7,8 +7,8 @@ export default {
 		},
 	},
 	template: `
-		<div class="feiertagEventContent " >
-			<i id="ferienEventIcon" class="fa-regular fa-calendar"></i>
-			<span id="ferienEventTitle" class="fw-bold text-center">{{event.titel}}</span>
-		</div>`,
+	<div class="cis-renderer-feiertage-calendar-event">
+		<i class="event-icon" class="fa-regular fa-calendar"></i>
+		<span class="event-title fw-bold text-center">{{ event.titel }}</span>
+	</div>`,
 };
\ No newline at end of file
diff --git a/public/js/components/Cis/Renderer/Lehreinheit/calendarEvent.js b/public/js/components/Cis/Renderer/Lehreinheit/calendarEvent.js
index a334ea4d4..ca8d470e2 100644
--- a/public/js/components/Cis/Renderer/Lehreinheit/calendarEvent.js
+++ b/public/js/components/Cis/Renderer/Lehreinheit/calendarEvent.js
@@ -1,59 +1,92 @@
 export default {
-	methods:{
-		convertTime: function ([hour, minute]) {
-			let date = new Date();
-			date.setHours(hour);
-			date.setMinutes(minute);
-			// returns date string as hh:mm
-			return date.toLocaleTimeString(this.$p.user_locale, { hour: '2-digit', minute: '2-digit', hour12: false });
-
-		},
-	},
-	computed:{
-		calendarEventTooltip: function(){
-			let lektorenEmpty = true;
-			let tooltipString = `${this.$p.t('global','uhrzeit')}: ${this.convertTime(this.event.beginn.split(":"))} / ${this.convertTime(this.event.ende.split(":")) }`;
-			
-			tooltipString += `\n${this.$p.t('profilUpdate', 'topic')}: ${this.event.topic}`;
-			tooltipString += `${this.$p.t('person', 'ort')}: ${this.event.ort_kurzbz}`;
-			if(Array.isArray(this.event.lektor) && this.event.lektor.length > 0){
-				lektorenEmpty = false;
-				tooltipString += `\n${this.$p.t('lehre','lektor')}: `;
-				this.event.lektor.slice(0,3).forEach(lektor => {
-					tooltipString += `${lektor.kurzbz}\n`;
-				})
-				if(this.event.lektor.length > 3){
-					tooltipString += `${this.$p.t('lehre', 'weitereLektoren', [(this.event.lektor.length - 3)])}\n`;
-				}
-			}
-			if(lektorenEmpty){
-				tooltipString += "\n";	
-			}
-			
-			
-			return tooltipString;
-		},
-	},
 	props:{
 		event: {
-			type:Object,
-			required:true,
+			type: Object,
+			required: true
+		}
+	},
+	computed:{
+		tooltipString() {
+			const tooltipArray = [];
+
+			tooltipArray.push([
+				this.$p.t('global/uhrzeit'),
+				[this.start, this.end].join(' - ')
+			].join(": "));
+			
+			tooltipArray.push([
+				this.$p.t('profilUpdate/topic'),
+				this.event.topic
+			].join(": "));
+			
+			tooltipArray.push([
+				this.$p.t('person/ort'),
+				this.event.ort_kurzbz
+			].join(": "));
+
+			this.event.lektor = [
+				this.event.lektor[0],
+				this.event.lektor[0],
+				this.event.lektor[0],
+				this.event.lektor[0],
+				this.event.lektor[0],
+			];
+			
+			if (Array.isArray(this.event.lektor) && this.event.lektor.length > 0) {
+				if (this.event.lektor.length > 3) {
+					tooltipArray.push([
+						this.$p.t('lehre/lektor'),
+						this.event.lektor.slice(0, 3).map(lektor => lektor.kurzbz).join("\n")
+						+ "\n" + this.$p.t('lehre/weitereLektoren', [this.event.lektor.length - 3])
+					].join(": "));
+				} else {console.log(this.event.lektor);
+					tooltipArray.push([
+						this.$p.t('lehre/lektor'),
+						this.event.lektor.map(lektor => lektor.kurzbz).join("\n")
+					].join(": "));
+				}
+			}
+			
+			return tooltipArray.join("\n");
 		},
+		start() {
+			return luxon.Duration
+				.fromISOTime(this.event.beginn)
+				.toISOTime({ suppressSeconds: true });
+		},
+		end() {
+			return luxon.Duration
+				.fromISOTime(this.event.ende)
+				.toISOTime({ suppressSeconds: true });
+		}
 	},
 	template: /*html*/`
-	<div class="lehreinheitEventContent h-100 w-100 p-1" @wheel.stop >
-		<div id="lehreinheitEventHeader" class="d-none d-xl-grid h-100 " v-if="!event.allDayEvent && event?.beginn && event?.ende" >
-			<span >{{convertTime(event.beginn.split(":"))}}</span>
-			<span >{{convertTime(event.ende.split(":"))}}</span>
+	<div
+		class="cis-renderer-lehreinheit-calendar-event calendar-event-default h-100 w-100 p-1"
+		@wheel.stop
+	>
+		<div
+			v-if="!event.allDayEvent && event?.beginn && event?.ende"
+			class="event-time d-none d-xl-grid h-100"
+		>
+			<span>{{ start }}</span>
+			<span>{{ end }}</span>
 		</div>
-		<div id="lehreinheitEventText" v-tooltip="calendarEventTooltip">
-			<span id="lehreinheitTopic">{{event.topic}}</span>
-			<span id="lehreinheitOrt">{{event.ort_kurzbz}}</span>
-			<span id="lehreinheitLektoren" v-for="(lektor,index) in event.lektor.slice(0,3)">
-				{{lektor.kurzbz}}
+		<div class="event-text" v-tooltip="tooltipString">
+			<span class="event-topic">{{ event.topic }}</span>
+			<span class="event-place">{{ event.ort_kurzbz }}</span>
+			<span
+				v-for="(lektor,index) in event.lektor.slice(0, 3)"
+				class="event-lectors"
+			>
+				{{ lektor.kurzbz }}
+			</span>
+			<span
+				v-if="event.lektor.length > 3"
+				class="event-lectors-plus"
+			>
+				... +{{ event.lektor.length - 3 }}
 			</span>
-			<span id="lektorEllipsis" class="fw-bold" v-if="event.lektor.length > 3">...+ 
-		 	{{event.lektor.length-3}}</span>
 		</div>
 	</div>
 	`,
diff --git a/public/js/components/Cis/Renderer/Reservierungen/calendarEvent.js b/public/js/components/Cis/Renderer/Reservierungen/calendarEvent.js
index c6b8054c2..2447c4f61 100644
--- a/public/js/components/Cis/Renderer/Reservierungen/calendarEvent.js
+++ b/public/js/components/Cis/Renderer/Reservierungen/calendarEvent.js
@@ -1,30 +1,83 @@
 export default {
-	methods: {
-		convertTime: function ([hour, minute]) {
-			let date = new Date();
-			date.setHours(hour);
-			date.setMinutes(minute);
-			// returns date string as hh:mm
-			return date.toLocaleTimeString(this.$p.user_locale, { hour: '2-digit', minute: '2-digit', hour12: false });
-
-		},
-	},
 	props: {
 		event: {
 			type: Object,
-			required: true,
-		},
+			required: true
+		}
 	},
-	template: `
-	<div class="lehreinheitEventContent h-100 w-100 p-1" >
-		<div id="lehreinheitEventHeader" class="h-100 " v-if="!event.allDayEvent && event?.beginn && event?.ende" >
-			<span class="small">{{convertTime(event.beginn.split(":"))}}</span>
-			<span class="small">{{convertTime(event.ende.split(":"))}}</span>
+	computed: {
+		tooltipString() {
+			const tooltipArray = [];
+
+			tooltipArray.push([
+				this.$p.t('global/uhrzeit'),
+				[this.start, this.end].join(' - ')
+			].join(": "));
+			
+			tooltipArray.push([
+				this.$p.t('profilUpdate/topic'),
+				this.event.topic
+			].join(": "));
+			
+			tooltipArray.push([
+				this.$p.t('person/ort'),
+				this.event.ort_kurzbz
+			].join(": "));
+			
+			if (Array.isArray(this.event.lektor) && this.event.lektor.length > 0) {
+				if (this.event.lektor.length > 3) {
+					tooltipArray.push([
+						this.$p.t('lehre/lektor'),
+						this.event.lektor.slice(0, 3).map(lektor => lektor.kurzbz).join("\n")
+						+ "\n" + this.$p.t('lehre/weitereLektoren', [this.event.lektor.length - 3])
+					].join(": "));
+				} else {
+					tooltipArray.push([
+						this.$p.t('lehre/lektor'),
+						this.event.lektor.map(lektor => lektor.kurzbz).join("\n")
+					].join(": "));
+				}
+			}
+			
+			return tooltipArray.join("\n");
+		},
+		start() {
+			return luxon.Duration
+				.fromISOTime(this.event.beginn)
+				.toISOTime({ suppressSeconds: true });
+		},
+		end() {
+			return luxon.Duration
+				.fromISOTime(this.event.ende)
+				.toISOTime({ suppressSeconds: true });
+		}
+	},
+	template: /* html */`
+	<div
+		class="cis-renderer-reservierungen-calendar-event calendar-event-default h-100 w-100 p-1"
+	>
+		<div
+			v-if="!event.allDayEvent && event?.beginn && event?.ende"
+			class="event-time d-grid h-100"
+		>
+			<span>{{ start }}</span>
+			<span>{{ end }}</span>
 		</div>
-		<div id="lehreinheitEventText">
-			<span>{{event.topic}}</span>
-			<span v-for="lektor in event.lektor">{{lektor.kurzbz}}</span>
-			<span>{{event.ort_kurzbz}}</span>
+		<div class="event-text" v-tooltip="tooltipString">
+			<span class="event-topic">{{ event.topic }}</span>
+			<span
+				v-for="lektor in event.lektor.slice(0, 3)"
+				class="event-lectors"
+			>
+				{{ lektor.kurzbz }}
+			</span>
+			<span
+				v-if="event.lektor.length > 3"
+				class="event-lectors-plus"
+			>
+				... +{{ event.lektor.length - 3 }}
+			</span>
+			<span class="event-place">{{ event.ort_kurzbz }}</span>
 		</div>
 	</div>
 	`,