calendar minimized only using slot; showing whole week in stundeplan widget tagesansicht grouped by day; everything in past has 0.5 opacity

public/js/components/Calendar/Minimized.js

@@ -23,9 +23,6 @@ export default {
 	},
 	template: `
 	<div class="fhc-calendar-minimized h-100 d-flex flex-column">
-		<div class="card-header d-grid" :class="classHeader">
-			<button class="btn btn-link link-secondary text-decoration-none" @click="maximize">{{ date.format({dateStyle: ['long','full','full','full'][this.size]}) }}</button>
-		</div>
 		<slot name="minimizedPage"></slot>
 	</div>`
 }

public/js/components/DashboardWidget/Stundenplan.js

@@ -29,18 +29,18 @@ export default {
 		}
 	},
 	computed: {
-		nextEventsGrouped() {
+		allEventsGrouped() {
 			// groups all events of all days until end of week together
-			return new Map((this.events || []).filter(evt => evt.end < this.endOfWeek && evt.start >= this.currentDay).reduce((acc, cur) => {
+			const currentCalendarDate = new CalendarDate(this.currentDay)
+			const mapArr = currentCalendarDate.wholeWorkWeek.map((d) => [new CalendarDate(d), []])
+
+			return new Map((this.events || []).filter(evt => evt.end < currentCalendarDate.lastDayOfWeek && evt.start >= currentCalendarDate.firstDayOfWeek).reduce((acc, cur) => {
 				const date = new CalendarDate(new Date(cur.datum))
 				const arr = acc.find(el => el[0].compare(date))
-				if(arr) {
-					arr[1].push(cur)
-				} else {
-					acc.push([date, [cur]])
-				}
+				arr[1].push(cur)
+				
 				return acc
-			}, []))
+			}, mapArr))
 		},
 		currentEvents() {
 			return (this.events || []).filter(evt => evt.end < this.dayAfterCurrentDay && evt.start >= this.currentDay);
@@ -50,12 +50,6 @@ export default {
 			currentDay.setDate(currentDay.getDate() + 1);
 			return currentDay;
 		},
-		endOfWeek() {
-			let endOfWeek = new Date(this.currentDay); //
-			endOfWeek.setDate(this.currentDay.getDate() + (7 - this.currentDay.getDay()));
-			endOfWeek.setHours(23, 59, 59, 999);
-			return endOfWeek;
-		},
 		monthFirstDay: function () {
 			return this.calendarDateToString(this.calendarDate.cdFirstDayOfCalendarMonth);
 		},
@@ -67,6 +61,7 @@ export default {
 		getEventStyle: function(evt) {
 			const styles = {'background-color': evt.color};
 			if(evt.start.getTime() < Date.now()) styles.opacity = 0.5;
+
 			return styles;
 		},
 		getCurrentDate: function() {
@@ -194,12 +189,15 @@ export default {
 		<content-modal :contentID="roomInfoContentID" :ort_kurzbz="" dialogClass="modal-lg" ref="contentModal"/>
 		<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" >
 			<template #minimizedPage >
-				<div class="flex-grow-1 overflow-scroll">
+				<div class="flex-grow-1" style="overflow-y: scroll; overflow-x: hidden">
 					<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}">
+					<template ref="allWeek" v-else-if="allEventsGrouped.size" v-for="([key, value], index) in allEventsGrouped" :key="index" style="margin-top: 8px;">
+						<div class="card-header d-grid p-0">
+							<button class="btn btn-link link-secondary text-decoration-none" @click="setCalendarMaximized">{{ key.format({dateStyle: "full"})}}</button>
+						</div>
+						<div role="button" @click="showLvUebersicht(evt)" v-for="evt in value" :key="evt.id" class="list-group-item small" :style="getEventStyle(evt)">
 							<b>{{evt.topic}}</b>
 							<br>
 							<small class="d-flex w-100 justify-content-between">
@@ -208,39 +206,13 @@ export default {
 								<span>{{evt.start.toLocaleTimeString(undefined, {hour:'numeric',minute:'numeric'})}}-{{evt.end.toLocaleTimeString(undefined, {hour:'numeric',minute:'numeric'})}}</span>
 							</small>
 						</div>
-					</div>
+					</template>
 					<div v-else class="d-flex h-100 justify-content-center align-items-center fst-italic text-center">
 						{{ p.t('lehre/noLvFound') }}
 					</div>
 				</div>
 			</template>
 		</fhc-calendar>
-		
-		<fhc-calendar ref="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-if="nextEventsGrouped.size" class="list-group list-group-flush">
-				<template v-for="([key, value], index) in nextEventsGrouped" :key="index" style="margin-top: 8px;">
-					<div v-if="index > 0" class="card-header d-grid p-0">
-						<button class="btn btn-link link-secondary text-decoration-none" @click="setCalendarMaximized">{{ key.format({dateStyle: "full"})}}</button>
-					</div>
-					<div role="button" @click="showLvUebersicht(evt)" v-for="evt in value" :key="evt.id" class="list-group-item small" :style="getEventStyle(evt)">
-						<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 -->
-							<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>
-					</div>
-				</template>
-			</div>
-		
-			<div v-else-if class="d-flex h-100 justify-content-center align-items-center fst-italic text-center">
-				{{ p.t('lehre/noLvFound') }}
-			</div>
 		</div>
 	</div>`
 }

public/js/composables/CalendarDate.js

@@ -68,6 +68,16 @@ class CalendarDate {
 		lastDayOfWeek.setDate(this.d -(lastDayOfWeek.getDay()+7-this.weekStart)%7 +6);
 		return lastDayOfWeek;
 	}
+	get wholeWorkWeek() {
+		const days = []
+		const date = new Date(this.y, this.m, this.d);
+		for(let i = 0; i < 5; i++) {
+			days[i] = new Date(this.y, this.m, this.d)
+			days[i].setDate(this.d -(date.getDay()+7-this.weekStart)%7 + i)
+		}
+		console.log('wholeWorkWeek', days)
+		return days
+	}
 	get cdLastDayOfWeek() {
 		return new CalendarDate(this.lastDayOfWeek);
 	}