the calendar modal is correctly opened when the correct event is called

application/views/Cis/Stundenplan.php

@@ -8,10 +8,10 @@ $includesArray = array(
 $this->load->view('templates/CISHTML-Header', $includesArray);
 ?>
 
-<div id="content">
+<div >
 	<h2>Stundenplan</h2>
 	<hr>
-	<fhc-calendar :events="events" initial-mode="week" show-weeks></fhc-calendar>
+	<div id="content"></div>
 </div>
 
 <?php $this->load->view('templates/CISHTML-Footer', $includesArray); ?>

public/js/apps/Cis/Stundenplan.js

@@ -1,16 +1,28 @@
 import FhcCalendar from "../../components/Calendar/Calendar.js";
+import CalendarModal from '../../components/Calendar/CalendarModal.js';
 import Phrasen from "../../plugin/Phrasen.js";
 
 const app = Vue.createApp({
 	components: {
-		FhcCalendar
+		FhcCalendar,
+		CalendarModal
 	},
 	data() {
 		return {
 			stunden: [],
-			events: null
+			events: null,
+			currentlySelectedEvent:null,
 		}
 	},
+	methods:{
+		selectEvent: function(event){
+			this.currentlySelectedEvent = event;
+			Vue.nextTick(()=>{
+				this.$refs.calendarModal.show();
+			})
+			
+		},
+	},
 	created() {
 		axios.get(FHC_JS_DATA_STORAGE_OBJECT.app_root + FHC_JS_DATA_STORAGE_OBJECT.ci_router + '/components/Cis/Stundenplan/Stunden').then(res => {
 			res.data.retval.forEach(std => {
@@ -48,7 +60,10 @@ const app = Vue.createApp({
 				});
 			});
 		});
-	}
+	},
+	template:`
+	<calendar-modal v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ref="calendarModal"  ></calendar-modal>
+	<fhc-calendar @select:event="selectEvent" :events="events" initial-mode="week" show-weeks></fhc-calendar>`
 });
 app.config.unwrapInjectedRef = true;
 app.use(Phrasen);

public/js/components/Calendar/Calendar.js

@@ -5,7 +5,7 @@ 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 +17,6 @@ export default {
 		CalendarWeek,
 		CalendarWeeks,
 		CalendarMinimized,
-		CalendarModal
 	},
 	provide() {
 		return {
@@ -105,15 +104,6 @@ export default {
 	},
 	methods: {
 		handleInput(day) {
-			// set the event when clicking on the lernveranstaltung in the data 
-			this.currentlySelectedEvent = day[1];
-			console.log(this.currentlySelectedEvent)
-			// showing the modal
-			Vue.nextTick(()=>{
-				this.$refs.calendarModal.show();
-			})
-			
-			console.log(day,"this is the day")
 			this.$emit(day[0], day[1]);
 		}
 	},
@@ -145,9 +135,8 @@ export default {
 			}).observe(this.$refs.container);
 		}
 	},
-	template: `
+	template: /*html*/`
 	<div ref="container" class="fhc-calendar card" :class="sizeClass">
-		<calendar-modal v-if="currentlySelectedEvent" :event="currentlySelectedEvent" ref="calendarModal"  />
 		<component v-slot="{event}" :is="'calendar-' + mode" @update:mode="mode=$event" @change:range="$emit('change:range',$event)" @input="handleInput" >
 			<!--Week Page layout-->
 			<slot :event="event">

public/js/components/Cis/Profil/ProfilModal/EditProfil.js

@@ -153,7 +153,8 @@ export default {
     this.modal = this.$refs.modalContainer.modal;
   },
   popup(options) {
-    return BsModal.popup.bind(this)(null, options);
+    BsModal.popup.bind(this);
+    return BsModal.popup(null, options);
   },
   template: /*html*/ `
   <bs-modal v-show="!loading" ref="modalContainer" v-bind="$props" body-class="" dialog-class="modal-lg" class="bootstrap-alert" backdrop="false" >