lane overlay div up to certain % instead of all day opaque or not; defined hours length and calculating accurate lane width from that;

public/css/components/calendar.css

@@ -1,5 +1,6 @@
 :root{
 	--fhc-calendar-pane-height: calc(100vh - 220px);
+	--fhc-calendar-past: #F5E9D7
 }
 
 .fhc-calendar-week-page-header {
@@ -188,7 +189,7 @@
 
 
 .fhc-calendar-past {
-	background-color:#F5E9D7;
+	background-color: var(--fhc-calendar-past);
 	border-color: #E8E8E8;
 	opacity: 0.5;
 }

public/js/components/Calendar/Calendar.js

@@ -8,7 +8,6 @@ import CalendarMinimized from './Minimized.js';
 import CalendarDate from '../../composables/CalendarDate.js';
 import CalendarDates from '../../composables/CalendarDates.js';
 
-
 const todayDate = new Date(new Date().setHours(0, 0, 0, 0));
 const today = todayDate.getTime()
 

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

@@ -93,6 +93,18 @@ export default {
 		}
 	},
 	computed: {
+		overlayStyle() {
+			return {
+				'background-color': '#F5E9D7',
+				'position': 'absolute',
+				'pointer-events': 'none',
+				'z-index': 2,
+				height:  this.getDayTimePercent + '%',
+				width: '100%',
+				opacity: 0.5,
+				overflow: 'hidden'
+			}
+		},
 		pageHeaderStyle() {
 			return {
 				'z-index': 4,
@@ -307,7 +319,6 @@ export default {
 			// calculate the minutes percentage of the total minutes 
 			timePercentage = ((currentMinutes - (this.hours[0] * 60)) / (this.hours.length * 60)) * 100;
 			// calculate the relative position of the time percentage
-			console.log('height: ', height)
 			position = height * (timePercentage / 100);
 			this.hourPosition = position;
 
@@ -365,6 +376,7 @@ export default {
 										<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>
 									<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 " >
 											<!-- desktop version of the page template, parent receives slotProp mobile = false -->
 											<div class="d-none d-xl-block h-100 "  @click.prevent="eventClick(event)">

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

@@ -36,8 +36,16 @@ export default {
 		'input',
 	],
 	computed: {
+		getGridStyle() {
+			return {
+				'min-height': '100px',
+				// this.size is the magic number anyway which directs font-size,
+				// which in turn influences a lot of layout
+				width: '42px'
+			}
+		},
 		laneWidth() {
-			return this.width / this.days.length
+			return (this.width - 42) / this.days.length
 		},
 		curTime() {
 			const now = new Date();
@@ -52,6 +60,17 @@ export default {
 				top: 0,
 			}
 		},
+		overlayStyle() {
+			return {
+				'background-color': '#F5E9D7',
+				'position': 'absolute',
+				'pointer-events': 'none',
+				'z-index': 2,
+				height:  this.getDayTimePercent + '%',
+				width: this.laneWidth + 'px',
+				opacity: 0.5
+			}
+		},
 		indicatorStyle() {
 			return {
 				'pointer-events': 'none',
@@ -148,7 +167,7 @@ export default {
 				'z-index': 2,
 				'border-color': '#00649C!important',
 				top: this.getDayTimePercent + '%',
-				width: this.laneWidth + 'px' // todo: manage the real value of 1fr somehow
+				width: this.laneWidth + 'px'
 			}
 		},
 		getDayTimePercent() {
@@ -170,7 +189,7 @@ export default {
 				top: this.getAbsolutePositionForHour(hour),
 				left: 0,
 				right: 0,
-				'z-index': 0,
+				'z-index': 0
 			}
 		},
 		dayGridStyle(day) {
@@ -185,9 +204,9 @@ export default {
 				styleObj.opacity = 0.5;
 			} else if (day.isToday) {
 				
-				styleObj['backgroundImage'] = 'linear-gradient(to bottom, #F5E9D7 '+this.getDayTimePercent+'%, #FFFFFF '+this.getDayTimePercent+'%)'
-				styleObj['border-color'] = '#E8E8E8';
-				styleObj.opacity = 0.5;
+				// styleObj['backgroundImage'] = 'linear-gradient(to bottom, #F5E9D7 '+this.getDayTimePercent+'%, #FFFFFF '+this.getDayTimePercent+'%)'
+				// styleObj['border-color'] = '#E8E8E8';
+				// styleObj.opacity = 0.5;
 			}
 			
 			return styleObj
@@ -315,7 +334,7 @@ export default {
 				
 				<div class="events" :ref="'eventsRef'+week">
 					<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="getGridStyle" :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)">
 						<Transition>
@@ -323,6 +342,7 @@ export default {
 								<span class="border border-top-0 px-2 bg-white">{{curTime}}</span>
 							</div>
 						</Transition>
+						<div v-if="day.isToday" :style="overlayStyle"></div>
 						<div v-for="event in day.events" :key="event" @click.prevent="weekPageClick(event.orig, day)" 
 						:selected="event.orig == selectedEvent"
 						:style="eventGridStyle(day,event)"