Calendar Sidebar Fixed

@AlexE030 and me
the days start at the right weekday now
2.30 am coding sessions are the best

anwendung/src/components/CalendarSideBar.jsx

@@ -4,15 +4,16 @@ const months = [["Januar", 31], ["Februar", 28], ["März", 31], ["April", 30], [
 const days = months.map((month => month[1]))
 let result = []
 let check = true
+let startDate
+let calculatedDay = []
 const weekdays = ["Mo", "Di", "Mi", "Do", "Fr", "Sa", "So"]
+
 export default function BasicDateCalendar(p) {
     if (check) {
-        let startDate = new Date(p.startyear,  0 ,p.startday)
+        startDate = new Date(p.startyear,  0 ,p.startday)
         let endDate = new Date(p.endyear, 0 , p.endday)
         let startString = startDate.getDate() + "." + (startDate.getMonth() + 1) +  "." + p.startyear
         let endString = endDate.getDate() + "." + (endDate.getMonth() + 1) +  "." + p.endyear
-        console.log(startString)
-        console.log(endString)
         generateCalendar(startString, endString)
         check = false
     }
@@ -30,6 +31,7 @@ export default function BasicDateCalendar(p) {
                             {weekdays.map((weekday) => (
                                 <p key={weekday}>{weekday}</p>
                             ))}
+                            {freeSpaces(index)}
                             {monthResult.map((date) => (
                                 <p key={date}>{date}</p>
                             ))}
@@ -49,7 +51,6 @@ function getMonthName(monthIndex) {
     }
 }
 
-
 function generateCalendar(start, ende)
 {
     splitter(start, ende)
@@ -66,6 +67,7 @@ function generateCalendar(start, ende)
                 )
                 {
                     monthResult.push(j);
+                    calculateDay(startParts[2], i, j)
                 }
             }
             result.push(monthResult);
@@ -79,6 +81,7 @@ function generateCalendar(start, ende)
                         if (new Date(endParts[2], h, g) <= new Date(endParts[2], endParts[1] - 1, endParts[0]))
                         {
                             monthResultNewYear.push(g);
+                            calculateDay(endParts[2], h, g)
                         }
                     }
                     result.push(monthResultNewYear);
@@ -97,7 +100,8 @@ function generateCalendar(start, ende)
                     new Date(startParts[2], i, j) <= new Date(startParts[2], endParts[1] - 1, endParts[0])
                 )
                 {
-                    monthResult.push(j);
+                    monthResult.push(j)
+                    calculateDay(startParts[2], i, j)
                 }
             }
             result.push(monthResult);
@@ -105,6 +109,24 @@ function generateCalendar(start, ende)
     }
 }
 
+function calculateDay(x, i, j){
+    if (j == startDate.getDate() && i == startDate.getMonth() || j == 1){
+        let monthStart = new Date(x, i, j)
+        if (monthStart.getDay() == 0)
+            calculatedDay.push(6)
+        else calculatedDay.push(monthStart.getDay() - 1)
+    }
+}
+
+function freeSpaces(index)
+{
+    let arrayTest = []
+    for (let i = 0; i < calculatedDay[index]; i++) {
+        arrayTest.push(<p></p>)
+    }
+    return arrayTest
+}
+
 function splitter(startDate, endDate)
 {
     startParts = startDate.split(".")

anwendung/src/pages/planning.js

@@ -21,7 +21,7 @@ export default function planning(p)
                 justifyContent : "space-around",
                 alignItems : "center"
             }}>
-            <BasicDateCalendar startyear={2015} startday={1} endyear={2015} endday={80}/>
+            <BasicDateCalendar startyear={2023} startday={1} endyear={2024} endday={100}/>
             <CalenderView/>
                 <div style={{
                     width : 250