From bf8085f642f62847994be0c6dec7d755e47328e5 Mon Sep 17 00:00:00 2001
From: SimonGschnell <simongschnell@gmail.com>
Date: Thu, 10 Oct 2024 11:24:26 +0200
Subject: [PATCH] starts the stundenplan from hour 7 instead of hour 0

---
 public/css/components/calendar.css         |  3 ++-
 public/js/components/Calendar/Week/Page.js | 11 +++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/public/css/components/calendar.css b/public/css/components/calendar.css
index 912161097..1b0a4dc39 100755
--- a/public/css/components/calendar.css
+++ b/public/css/components/calendar.css
@@ -55,7 +55,8 @@
   grid-template-columns: 3em repeat(7, 1fr);
   margin-left: -3em;
   /*min-height: 266.6666666667%;*/
-  background-image: linear-gradient(#f8f9fa calc(100% / 24 - .5px), #dee2e6 calc(100% / 24 - .5px), #dee2e6 calc(100% / 24 + .5px), #f8f9fa calc(100% / 24 + .5px), #f8f9fa calc(200% / 24 - .5px), #dee2e6 calc(200% / 24 - .5px), #dee2e6 calc(200% / 24 + .5px), #f8f9fa calc(200% / 24 + .5px), #f8f9fa calc(300% / 24 - .5px), #dee2e6 calc(300% / 24 - .5px), #dee2e6 calc(300% / 24 + .5px), #f8f9fa calc(300% / 24 + .5px), #f8f9fa calc(400% / 24 - .5px), #dee2e6 calc(400% / 24 - .5px), #dee2e6 calc(400% / 24 + .5px), #f8f9fa calc(400% / 24 + .5px), #f8f9fa calc(500% / 24 - .5px), #dee2e6 calc(500% / 24 - .5px), #dee2e6 calc(500% / 24 + .5px), #f8f9fa calc(500% / 24 + .5px), #f8f9fa calc(600% / 24 - .5px), #dee2e6 calc(600% / 24 - .5px), #dee2e6 calc(600% / 24 + .5px), #f8f9fa calc(600% / 24 + .5px), #f8f9fa calc(700% / 24 - .5px), #dee2e6 calc(700% / 24 - .5px), #dee2e6 calc(700% / 24 + .5px), #f8f9fa calc(700% / 24 + .5px), #f8f9fa calc(800% / 24 - .5px), #dee2e6 calc(800% / 24 - .5px), #dee2e6 calc(800% / 24 + .5px), #fff calc(800% / 24 + .5px), #fff calc(900% / 24 - .5px), #dee2e6 calc(900% / 24 - .5px), #dee2e6 calc(900% / 24 + .5px), #fff calc(900% / 24 + .5px), #fff calc(1000% / 24 - .5px), #dee2e6 calc(1000% / 24 - .5px), #dee2e6 calc(1000% / 24 + .5px), #fff calc(1000% / 24 + .5px), #fff calc(1100% / 24 - .5px), #dee2e6 calc(1100% / 24 - .5px), #dee2e6 calc(1100% / 24 + .5px), #fff calc(1100% / 24 + .5px), #fff calc(1200% / 24 - .5px), #dee2e6 calc(1200% / 24 - .5px), #dee2e6 calc(1200% / 24 + .5px), #fff calc(1200% / 24 + .5px), #fff calc(1300% / 24 - .5px), #dee2e6 calc(1300% / 24 - .5px), #dee2e6 calc(1300% / 24 + .5px), #fff calc(1300% / 24 + .5px), #fff calc(1400% / 24 - .5px), #dee2e6 calc(1400% / 24 - .5px), #dee2e6 calc(1400% / 24 + .5px), #fff calc(1400% / 24 + .5px), #fff calc(1500% / 24 - .5px), #dee2e6 calc(1500% / 24 - .5px), #dee2e6 calc(1500% / 24 + .5px), #fff calc(1500% / 24 + .5px), #fff calc(1600% / 24 - .5px), #dee2e6 calc(1600% / 24 - .5px), #dee2e6 calc(1600% / 24 + .5px), #fff calc(1600% / 24 + .5px), #fff calc(1700% / 24 - .5px), #dee2e6 calc(1700% / 24 - .5px), #dee2e6 calc(1700% / 24 + .5px), #f8f9fa calc(1700% / 24 + .5px), #f8f9fa calc(1800% / 24 - .5px), #dee2e6 calc(1800% / 24 - .5px), #dee2e6 calc(1800% / 24 + .5px), #f8f9fa calc(1800% / 24 + .5px), #f8f9fa calc(1900% / 24 - .5px), #dee2e6 calc(1900% / 24 - .5px), #dee2e6 calc(1900% / 24 + .5px), #f8f9fa calc(1900% / 24 + .5px), #f8f9fa calc(2000% / 24 - .5px), #dee2e6 calc(2000% / 24 - .5px), #dee2e6 calc(2000% / 24 + .5px), #f8f9fa calc(2000% / 24 + .5px), #f8f9fa calc(2100% / 24 - .5px), #dee2e6 calc(2100% / 24 - .5px), #dee2e6 calc(2100% / 24 + .5px), #f8f9fa calc(2100% / 24 + .5px), #f8f9fa calc(2200% / 24 - .5px), #dee2e6 calc(2200% / 24 - .5px), #dee2e6 calc(2200% / 24 + .5px), #f8f9fa calc(2200% / 24 + .5px), #f8f9fa calc(2300% / 24 - .5px), #dee2e6 calc(2300% / 24 - .5px), #dee2e6 calc(2300% / 24 + .5px), #f8f9fa calc(2300% / 24 + .5px));
+  background-image: linear-gradient(#f8f9fa calc(100% / 18 - .55px), #dee2e6 calc(100% / 18 - .55px), #dee2e6 calc(100% / 18 + .55px), #f8f9fa calc(100% / 18 + .55px), #f8f9fa calc(200% / 18 - .55px), #dee2e6 calc(200% / 18 - .55px), #dee2e6 calc(200% / 18 + .55px), #f8f9fa calc(200% / 18 + .55px), #f8f9fa calc(300% / 18 - .55px), #dee2e6 calc(300% / 18 - .55px), #dee2e6 calc(300% / 18 + .55px), #f8f9fa calc(300% / 18 + .55px), #f8f9fa calc(400% / 18 - .55px), #dee2e6 calc(400% / 18 - .55px), #dee2e6 calc(400% / 18 + .55px), #f8f9fa calc(400% / 18 + .55px), #f8f9fa calc(500% / 18 - .55px), #dee2e6 calc(500% / 18 - .55px), #dee2e6 calc(500% / 18 + .55px), #f8f9fa calc(500% / 18 + .55px), #f8f9fa calc(600% / 18 - .55px), #dee2e6 calc(600% / 18 - .55px), #dee2e6 calc(600% / 18 + .55px), #f8f9fa calc(600% / 18 + .55px), #f8f9fa calc(700% / 18 - .55px), #dee2e6 calc(700% / 18 - .55px), #dee2e6 calc(700% / 18 + .55px), #f8f9fa calc(700% / 18 + .55px), #f8f9fa calc(800% / 18 - .55px), #dee2e6 calc(800% / 18 - .55px), #dee2e6 calc(800% / 18 + .55px), #fff calc(800% / 18 + .55px), #fff calc(900% / 18 - .55px), #dee2e6 calc(900% / 18 - .55px), #dee2e6 calc(900% / 18 + .55px), #fff calc(900% / 18 + .55px), #fff calc(1000% / 18 - .55px), #dee2e6 calc(1000% / 18 - .55px), #dee2e6 calc(1000% / 18 + .55px), #fff calc(1000% / 18 + .55px), #fff calc(1100% / 18 - .55px), #dee2e6 calc(1100% / 18 - .55px), #dee2e6 calc(1100% / 18 + .55px), #fff calc(1100% / 18 + .55px), #fff calc(1200% / 18 - .55px), #dee2e6 calc(1200% / 18 - .55px), #dee2e6 calc(1200% / 18 + .55px), #fff calc(1200% / 18 + .55px), #fff calc(1300% / 18 - .55px), #dee2e6 calc(1300% / 18 - .55px), #dee2e6 calc(1300% / 18 + .55px), #fff calc(1300% / 18 + .55px), #fff calc(1400% / 18 - .55px), #dee2e6 calc(1400% / 18 - .55px), #dee2e6 calc(1400% / 18 + .55px), #fff calc(1400% / 18 + .55px), #fff calc(1500% / 18 - .55px), #dee2e6 calc(1500% / 18 - .55px), #dee2e6 calc(1500% / 18 + .55px), #fff calc(1500% / 18 + .55px), #fff calc(1600% / 18 - .55px), #dee2e6 calc(1600% / 18 - .55px), #dee2e6 calc(1600% / 18 + .55px), #fff calc(1600% / 18 + .55px), #fff calc(1700% / 18 - .55px), #dee2e6 calc(1700% / 18 - .55px), #dee2e6 calc(1700% / 18 + .55px), #f8f9fa calc(1700% / 18 + .55px), #f8f9fa calc(1800% / 18 - .55px), #dee2e6 calc(1800% / 18 - .55px), #dee2e6 calc(1800% / 18 + .55px), #f8f9fa calc(1800% / 18 + .55px), #f8f9fa calc(1900% / 18 - .55px), #dee2e6 calc(1900% / 18 - .55px), #dee2e6 calc(1900% / 18 + .55px), #f8f9fa calc(1900% / 18 + .55px), #f8f9fa calc(2000% / 18 - .55px), #dee2e6 calc(2000% / 18 - .55px), #dee2e6 calc(2000% / 18 + .55px), #f8f9fa calc(2000% / 18 + .55px), #f8f9fa calc(2100% / 18 - .55px), #dee2e6 calc(2100% / 18 - .55px), #dee2e6 calc(2100% / 18 + .55px), #f8f9fa calc(2100% / 18 + .55px), #f8f9fa calc(2200% / 18 - .55px), #dee2e6 calc(2200% / 18 - .55px), #dee2e6 calc(2200% / 18 + .55px), #f8f9fa calc(2200% / 18 + .55px), #f8f9fa calc(2300% / 18 - .55px), #dee2e6 calc(2300% / 18 - .55px), #dee2e6 calc(2300% / 18 + .55px), #f8f9fa calc(2300% / 18 + .55px));
+  
 }
 .fhc-calendar-week-page .events .day {
   gap: 1px;
diff --git a/public/js/components/Calendar/Week/Page.js b/public/js/components/Calendar/Week/Page.js
index 7a2d5c509..1eca1e8a6 100755
--- a/public/js/components/Calendar/Week/Page.js
+++ b/public/js/components/Calendar/Week/Page.js
@@ -23,7 +23,7 @@ export default {
 	],
 	data() {
 		return {
-			hours: [...Array(24).keys()]
+			hours: [7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24]
 		};
 	},
 	computed: {
@@ -73,7 +73,7 @@ export default {
 			return res;
 		},
 		smallestTimeFrame() {
-			return [30,15,10,5][this.size];
+			return 10;//[30,15,10,5][this.size];
 		}
 	},
 	methods: {
@@ -86,10 +86,13 @@ export default {
 			}
 		},
 		dateToMinutesOfDay(day) {
-			return Math.floor((day.getHours() * 60 + day.getMinutes()) / this.smallestTimeFrame) + 1;
+			//console.log((day.getHours() * 60 + day.getMinutes()) / this.smallestTimeFrame,"this are the hours");
+			//console.log(Math.floor((day.getHours() * 60 + day.getMinutes()) / this.smallestTimeFrame) + 1,"this is the result of the calculation");
+			return Math.floor(((day.getHours()-7) * 60 + day.getMinutes()) / this.smallestTimeFrame) + 1;
 		}
 	},
 	mounted() {
+		console.log(this.hours,"this are the hours");
 		setTimeout(() => this.$refs.eventcontainer.scrollTop = this.$refs.eventcontainer.scrollHeight / 3 + 1, 0);
 	},
 	template: `
@@ -107,7 +110,7 @@ export default {
 					<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>
-					<div v-for="day in eventsPerDayAndHour" :key="day" class="day border-start" :style="{'grid-template-columns': 'repeat(' + day.lanes + ', 1fr)', 'grid-template-rows': 'repeat(' + (1440 / smallestTimeFrame) + ', 1fr)'}">
+					<div v-for="day in eventsPerDayAndHour" :key="day" class=" day border-start" :style="{'grid-template-columns': 'repeat(' + day.lanes + ', 1fr)', 'grid-template-rows': 'repeat(' + (1080 / smallestTimeFrame) + ', 1fr)'}">
 						<div :style="{'background-color':event.orig.color}" class="mx-2 border border-dark border-2 small rounded overflow-hidden "  @click.prevent="$emit('input', event.orig)" :style="{'grid-column-start': 1+(event.lane-1)*day.lanes/event.maxLane, 'grid-column-end': 1+event.lane*day.lanes/event.maxLane, 'grid-row-start': dateToMinutesOfDay(event.start), 'grid-row-end': dateToMinutesOfDay(event.end) ,'--test': dateToMinutesOfDay(event.end)}" v-for="event in day.events" :key="event">	
 							<slot :event="event" :day="day">
 								<p>this is a placeholder which means that no template was passed to the Calendar Page slot</p>