defined row min height & event max height props; month event click opens lv modal; fixed off by one date state;

public/js/components/Calendar/Day.js

@@ -31,7 +31,7 @@ export default {
 		},
 		next() {
 			this.$refs.pane.next();
-			this.$emit('change:offset', { y: 0, m: 0, d: -1 });
+			this.$emit('change:offset', { y: 0, m: 0, d: 1 });
 		},
 		selectEvent(event) {
 			this.$emit('input', ['select:event', event]);

public/js/components/Calendar/Day/Page.js

@@ -36,6 +36,7 @@ export default {
 		'calendarClientHeight',
 		'setSelectedEvent',
 		'selectedEvent',
+		'rowMinHeight'
 	],
 	props: {
 		year: Number,
@@ -372,11 +373,12 @@ export default {
 								<div :class="{'fhc-calendar-no-events-overlay':noEventsCondition, 'events':true}">
 
 									<div class="hours">
-										<div v-for="hour in hours" style="min-height:100px" :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
+										<div v-for="hour in hours" :style="'min-height:' + rowMinHeight " :key="hour" class="text-muted text-end small" :ref="'hour' + hour">{{hour}}:00</div>
 									</div>
 									<div v-for="day in eventsPerDayAndHour" :key="day" class=" day border-start" :style="dayGridStyle(day)">
 										<div v-if="lookingAtToday && !noEventsCondition" :style="overlayStyle"></div>
-										<div v-for="event in day.events" :key="event" :style="eventGridStyle(day,event)" v-contrast :selected="event.orig == selectedEvent" class="fhc-entry mx-2 small rounded overflow-hidden " >
+										<div v-for="event in day.events" :key="event" :style="eventGridStyle(day,event)" v-contrast 
+											:selected="event.orig == selectedEvent" class="fhc-entry mx-2 small rounded overflow-hidden" >
 											<!-- desktop version of the page template, parent receives slotProp mobile = false -->
 											<div class="d-none d-xl-block h-100 "  @click.prevent="eventClick(event)">
 												<slot  name="dayPage" :event="event" :day="day" :mobile="false">

public/js/components/Calendar/Month/Page.js

@@ -143,16 +143,16 @@ export default {
 			<a href="#" v-if="showWeeks" class="fhc-calendar-month-page-weekday text-decoration-none text-end opacity-25"
 			@click.prevent="changeToWeek(week)">{{week.no}}</a>
 			<a href="#" 
-			@click.prevent="clickEvent(day,week)" 
+			@click="clickEvent(day,week)"
 			@mouseover="highlight(week,day)" 
 			@mouseleave="highlightedWeek = null; highlightedDay = null"
 			v-for="day in week.days" 
 			:key="day"
 			:class="getDayClass(week, day)" 
 			>
-				<span class="no" :style="getNumberStyle(day)">{{day.getDate()}}</span>
+				<span @click="clickEvent(day,week)" class="no" :style="getNumberStyle(day)">{{day.getDate()}}</span>
 				<span v-if="events[day.toDateString()] && events[day.toDateString()].length" class="events">
-					<div @click="setSelectedEvent(event);" v-for="event in events[day.toDateString()]" :key="event.id" 
+					<div v-for="event in events[day.toDateString()]" :key="event.id" 
 					:style="{'background-color': event.color}" class="fhc-entry" :selected="event == selectedEvent" v-contrast >
 						<slot  name="monthPage" :event="event" :day="day" >
 							<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>

public/js/components/Calendar/Week/Page.js

@@ -23,7 +23,8 @@ export default {
 		'noMonthView',
 		'isSliding',
 		'selectedEvent',
-		'setSelectedEvent'
+		'setSelectedEvent',
+		'rowMinHeight'
 	],
 	props: {
 		year: Number,
@@ -38,7 +39,7 @@ export default {
 	computed: {
 		getGridStyle() {
 			return {
-				'min-height': '100px',
+				'min-height': this.rowMinHeight,
 				// this.size is the magic number anyway which directs font-size,
 				// which in turn influences a lot of layout
 				width: '42px'

public/js/components/Cis/Stundenplan/Stundenplan.js

@@ -24,7 +24,21 @@ const Stundenplan = {
 		}
 	},
 	props: {
-		propsViewData: Object
+		propsViewData: Object,
+		rowMinHeight: {
+			type: String,
+			default: '100px'
+		},
+		eventMaxHeight: {
+			type: String,
+			default: '125px'
+		}
+	},
+	provide() {
+		return {
+			rowMinHeight: this.rowMinHeight,
+			eventMaxHeight: this.eventMaxHeight
+		}	
 	},
 	watch: {
 		weekFirstDay: {
@@ -94,7 +108,7 @@ const Stundenplan = {
 			const date = day.getFullYear() + "-" +
 				String(day.getMonth() + 1).padStart(2, "0") + "-" +
 				String(day.getDate()).padStart(2, "0");
-			
+
 			this.$router.push({
 				name: "Stundenplan",
 				params: {
@@ -128,19 +142,23 @@ const Stundenplan = {
 		},
 		handleChangeMode(mode) {
 			const modeCapitalized = mode.charAt(0).toUpperCase() + mode.slice(1)
+			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: modeCapitalized,
-					focus_date: this.currentDay.toISOString().split("T")[0],
+					focus_date: date,
 					lv_id: this.propsViewData?.lv_id ?? null
 				}
 			})
 		
 			this.calendarMode = mode
 		},
-		showModal: function(event){
+		showModal: function(e, event){
+			e.stopPropagation()
 			this.currentlySelectedEvent = event;
 			Vue.nextTick(() => {
 				this.$refs.lvmodal.show();
@@ -241,12 +259,15 @@ const Stundenplan = {
 			</div>
 		</template>
 		<template #monthPage="{event,day}">
-			<span class="fhc-entry" >
-				{{event.topic}}
-			</span>
+			<div @click="showModal($event, event); ">
+				<span class="fhc-entry">
+					{{event.topic}}
+				</span>
+			</div>
+			
 		</template>
 		<template #weekPage="{event,day}">
-			<div @click="showModal(event?.orig); " type="button"
+			<div @click="showModal($event, event?.orig);" type="button"
 			class=" position-relative border border-secondary border d-flex flex-col align-items-center
 			justify-content-evenly h-100" style="overflow: auto;">
 
@@ -264,22 +285,22 @@ const Stundenplan = {
 			</div>
 		</template>
 		<template #dayPage="{event,day,mobile}">
-			<div @click="mobile? showModal(event?.orig):null" type="button" class="fhc-entry border border-secondary border row m-0 h-100 justify-content-center align-items-center text-center">
+			<div @click="mobile? showModal($event, event?.orig):null" type="button" class="fhc-entry border border-secondary border row m-0 h-100 justify-content-center align-items-center text-center">
 				<div class="col-auto" v-if="event?.orig?.beginn && event?.orig?.ende" >
 					<div class="d-flex flex-column p-4 border-end border-secondary">
 						<span class="small">{{convertTime(event.orig.beginn.split(":"))}}</span>
 						<span class="small">{{convertTime(event.orig.ende.split(":"))}}</span>
 					</div>
 				</div>
-				<div class="col ">
+				<div class="col">
 					<p>{{ $p.t('lehre/lehrveranstaltung') }}:</p>
 					<p class="m-0">{{event?.orig.topic}}</p>
 				</div>
-				<div class="col ">
+				<div class="col" :style="'max-height: ' + eventMaxHeight + '; overflow: auto;'">
 					<p>{{ $p.t('lehre/lektor') }}:</p>
 					<p class="m-0" v-for="lektor in event?.orig.lektor">{{lektor.kurzbz}}</p>
 				</div>
-				<div class="col ">
+				<div class="col">
 					<p>{{ $p.t('profil/Ort') }}: </p>
 					<p class="m-0">{{event?.orig.ort_kurzbz}}</p>
 				</div>