makes the calendar week mode header align and highlights the week or day in the Month view depenedent if there is a week view available

public/css/components/calendar.css

@@ -133,6 +133,11 @@
   position: relative;
   aspect-ratio: 1;
 }
+
+.fhc-calendar-month-page-day-highlight {
+	background-color: #f5f5f5;
+}
+
 .fhc-calendar-sm .fhc-calendar-month-page-day.active .no,
 .fhc-calendar-xs .fhc-calendar-month-page-day.active .no {
   background-color: rgba(var(--bs-info-rgb), 0.25);

public/js/components/Calendar/Header.js

@@ -45,19 +45,21 @@ export default {
 		}
 	},
 	template: `
-	<div class="calendar-header card-header row w-100" :class="classHeader">
-		<button class="btn btn-outline-secondary border-0 col-auto" :class="{'btn-sm':!this.size}" @click="$emit('prev')"><i class="fa fa-chevron-left"></i></button>
-		<div class="col text-center">
-			<div class="d-flex justify-content-center align-items-center">
-				<button class="btn btn-link link-secondary text-decoration-none" :class="{'btn-sm': !this.size}" @click="$emit('click')">
-					{{ title }}
-					<i v-if="eventsAreNull" class="fa fa-spinner fa-pulse"></i>
-				</button>
-				<select class="form-select w-auto" aria-label="Default select example">
-					<option :selected="mode_kurzbz == mode" @click="$emit('updateMode',mode_kurzbz)" v-for="(mode_bezeichnung,mode_kurzbz) in modes">{{mode_bezeichnung}}</option>
-				</select>
+	<div class="calendar-header card-header w-100" :class="classHeader">
+		<div class="row">
+			<button class="btn btn-outline-secondary border-0 col-auto" :class="{'btn-sm':!this.size}" @click="$emit('prev')"><i class="fa fa-chevron-left"></i></button>
+			<div class="col text-center">
+				<div class="d-flex justify-content-center align-items-center">
+					<button class="btn btn-link link-secondary text-decoration-none" :class="{'btn-sm': !this.size}" @click="$emit('click')">
+						{{ title }}
+						<i v-if="eventsAreNull" class="fa fa-spinner fa-pulse"></i>
+					</button>
+					<select class="form-select w-auto" aria-label="Default select example">
+						<option :selected="mode_kurzbz == mode" @click="$emit('updateMode',mode_kurzbz)" v-for="(mode_bezeichnung,mode_kurzbz) in modes">{{mode_bezeichnung}}</option>
+					</select>
+				</div>
 			</div>
+			<button class="col-auto btn btn-outline-secondary border-0" :class="{'btn-sm': !this.size}" @click="$emit('next')"><i class="fa fa-chevron-right"></i></button>
 		</div>
-		<button class="col-auto btn btn-outline-secondary border-0" :class="{'btn-sm': !this.size}" @click="$emit('next')"><i class="fa fa-chevron-right"></i></button>
 	</div>`
 }

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

@@ -1,13 +1,19 @@
 import CalendarDate from '../../../composables/CalendarDate.js';
 
 export default {
+	data(){
+		return{
+			highlightedWeek: null,
+			highlightedDay: null,
+		}
+	},
 	inject: [
 		'date',
 		'focusDate',
 		'size',
 		'events',
 		'showWeeks',
-		'noWeekView'
+		'noWeekView',
 	],
 	props: {
 		year: Number,
@@ -24,11 +30,12 @@ export default {
 			let firstDayOfMonth = new CalendarDate(this.year, this.month, 1);
 			let startDay = firstDayOfMonth.firstDayOfCalendarMonth;
 			let endDay = firstDayOfMonth.lastDayOfCalendarMonth;
-
+			
 			let res = [];
 			let week = {no:0,y:0,days:[]};
 			while (startDay <= endDay) {
 				week.days.push(new Date(startDay));
+				
 				if (week.days.length == 7) {
 					let d = new CalendarDate(week.days[res.length ? 0 : 6]);
 					week.no = d.w;
@@ -39,7 +46,8 @@ export default {
 				startDay.setDate(startDay.getDate() + 1);
 			}
 			return res;
-		}
+		},
+		
 	},
 	methods: {
 		selectDay(day) {
@@ -52,17 +60,32 @@ export default {
 					this.focusDate.set(week.days[0]);
 				this.$emit('updateMode', 'week');
 			}
+		},
+		highlight(week, day){
+			this.highlightedWeek = week.no; 
+			this.highlightedDay = day;
+		},
+		isHighlighted(week, day) {
+			return this.noWeekView ? day == this.highlightedDay : week.no == this.highlightedWeek;
+		},
+		clickEvent(day,week) {
+			if(this.noWeekView){
+				this.selectDay(day);
+			}else{
+				this.changeToWeek(week);
+			}
 		}
 	},
 	template: `
+	<p>{{minimized}}</p>
 	<div class="fhc-calendar-month-page" :class="{'show-weeks': showWeeks}">
-		<div v-if="showWeeks" class="bg-light fw-bold border-top border-bottom text-center"></div>
+		<div v-if="showWeeks" class=" bg-light fw-bold border-top border-bottom text-center"></div>
 		<div v-for="day in weeks[0].days" :key="day" class="bg-light fw-bold border-top border-bottom text-center">
 			{{day.toLocaleString(undefined, {weekday: size < 1 ? 'narrow' : (size < 3 ? 'short' : 'long')})}}
 		</div>
 		<template v-for="week in weeks" :key="week.no">
 			<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="#" v-for="day in week.days" :key="day" class="fhc-calendar-month-page-day text-decoration-none overflow-hidden" :class="{active:date.compare(day),'opacity-50':day.getMonth() != month}" @click.prevent="selectDay(day)">
+			<a href="#" @click.prevent="clickEvent(day,week)" @mouseover="highlight(week,day)" @mouseleave="highlightedWeek = null; highlightedDay = null" v-for="day in week.days" :key="day" :class="{'fhc-calendar-month-page-day-highlight': isHighlighted(week, day)}" class="fhc-calendar-month-page-day text-decoration-none overflow-hidden" :class="{active:date.compare(day),'opacity-50':day.getMonth() != month}" >
 				<span class="no">{{day.getDate()}}</span>
 				<span v-if="events[day.toDateString()] && events[day.toDateString()].length" class="events">
 					<span v-for="event in events[day.toDateString()]" :key="event.id" style="color:white" :style="{'background-color': event.color}">

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

@@ -96,8 +96,8 @@ export default {
 	<div class="fhc-calendar-week-page">
 	
 		<div class="d-flex flex-column border-top">
-			<div class="fhc-calendar-week-page-header border-2 border-bottom text-center d-flex" style="position:sticky; top:0; " >
-				<div type="button" v-for="day in days" :key="day" class="test flex-grow-1" :title="day.toLocaleString(undefined, {dateStyle:'short'})" @click.prevent="changeToMonth(day)">
+			<div class="fhc-calendar-week-page-header d-grid border-2 border-bottom text-center" :style="{'grid-template-columns': 'repeat(' + days.length + ', 1fr)', 'grid-template-rows':1}" style="position:sticky; top:0; " >
+				<div type="button" v-for="day in days" :key="day" class="flex-grow-1" :title="day.toLocaleString(undefined, {dateStyle:'short'})" @click.prevent="changeToMonth(day)">
 					<div class="fw-bold">{{day.toLocaleString(undefined, {weekday: size < 2 ? 'narrow' : (size < 3 ? 'short' : 'long')})}}</div>
 					<a href="#" class="small text-secondary text-decoration-none" >{{day.toLocaleString(undefined, [{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{day:'numeric',month:'numeric'},{dateStyle:'short'}][this.size])}}</a>
 				</div>