moves the CalendarModal into the Stundenplan component instead of the Calendar component and changes the start_time and end_time computed properties

public/js/apps/Cis/Stundenplan.js

@@ -1,7 +1,7 @@
 import FhcCalendar from "../../components/Calendar/Calendar.js";
 import Phrasen from "../../plugin/Phrasen.js";
 import CalendarDate from "../../composables/CalendarDate.js";
-
+import CalendarModal from "../../components/Calendar/CalendarModal.js";
 
 const app = Vue.createApp({
 	data() {
@@ -9,11 +9,12 @@ const app = Vue.createApp({
 			stunden: [],
 			events: null,
 			calendarDate: new CalendarDate(new Date()),
-
+			currentlySelectedEvent: null,
 		}
 	},
 	components: {
-		FhcCalendar
+		FhcCalendar,
+		CalendarModal
 	},
 	computed:{
 		weekFirstDay: function () {
@@ -31,6 +32,12 @@ const app = Vue.createApp({
 	},
 	methods:{
 
+		showModal: function(event){
+			this.currentlySelectedEvent = event;
+			Vue.nextTick(() => {
+				this.$refs.calendarModal.show();
+			});
+		},
 		updateRange: function (data) {
 			let tmp_date = new CalendarDate(data.start);
 			// only load month data if the month or year has changed
@@ -89,8 +96,9 @@ const app = Vue.createApp({
 	template:/*html*/`
 	<h2>Stundenplan</h2>
 	<hr>
+	<calendar-modal v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ref="calendarModal"  />
 	<fhc-calendar @change:range="updateRange" v-slot="{event, day}" :events="events" initial-mode="week" show-weeks>
-		<div type="button" class="d-flex flex-column align-items-center justify-content-evenly h-100">
+		<div @click="showModal(event)" type="button" class="d-flex flex-column align-items-center justify-content-evenly h-100">
 			<span>{{event.orig.topic}}</span>
 			<span v-for="lektor in event.orig.lektor">{{lektor.kurzbz}}</span>
 			<span>{{event.orig.ort_kurzbz}}</span>

public/js/components/Calendar/Calendar.js

@@ -5,7 +5,6 @@ import CalendarWeek from './Week.js';
 import CalendarWeeks from './Weeks.js';
 import CalendarMinimized from './Minimized.js';
 import CalendarDate from '../../composables/CalendarDate.js';
-import CalendarModal from './CalendarModal.js';
 
 // TODO(chris): week/month toggle
 
@@ -17,7 +16,6 @@ export default {
 		CalendarWeek,
 		CalendarWeeks,
 		CalendarMinimized,
-		CalendarModal
 	},
 	provide() {
 		return {
@@ -63,7 +61,6 @@ export default {
 	],
 	data() {
 		return {
-			currentlySelectedEvent: null,
 			header: '',
 			prevMode: null,
 			currMode: null,
@@ -105,13 +102,6 @@ export default {
 	},
 	methods: {
 		handleInput(day) {
-			// set the event when clicking on the lehrveranstaltungen in the data 
-			this.currentlySelectedEvent = day[1];
-			// showing the modal
-			Vue.nextTick(() => {
-				this.$refs.calendarModal.show();
-			})
-
 			this.$emit(day[0], day[1]);
 		}
 	},
@@ -145,7 +135,6 @@ export default {
 	},
 	template: /*html*/`
 	<div ref="container" class="fhc-calendar card" :class="sizeClass">
-		<calendar-modal v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ref="calendarModal"  />
 		<component v-slot="{event,day}" :is="'calendar-' + mode" @update:mode="mode=$event" @change:range="$emit('change:range',$event)" @input="handleInput" >
 			<!--Week Page layout-->
 			<slot :event="event" :day="day"></slot>

public/js/components/Calendar/CalendarModal.js

@@ -38,10 +38,16 @@ export default {
 	computed: {
 		start_time: function(){
 			if(!this.event.start) return 'N/A';
+			if (!this.event.start instanceof Date){
+				return this.event.start;
+			}
 			return this.event.start.getHours() + ":" + this.event.start.getMinutes();
 		},
 		end_time: function(){
 			if (!this.event.end) return 'N/A';
+			if (!this.event.end instanceof Date) {
+				return this.event.end;
+			}
 			return this.event.end.getHours() + ":" + this.event.end.getMinutes();
 		}
 	},