loop

obaidaxt · Aug 16, 2022 · 666e613 · 666e613
1 parent 883f045
commit 666e613
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 17 deletions.
diff --git a/function.js b/function.js
@@ -1,7 +1,6 @@
 window.onload = main;
 
 function main() {
-    const monthDays = document.querySelector(".days");
 
 
 
@@ -21,11 +20,11 @@ function main() {
         "November",
         "December",
       ]
-    let date=new Date();
-    let year=date.getFullYear();
-    let month =date.getMonth()+1
+    let dateToday=new Date();
+    let year=dateToday.getFullYear();
+    let month =dateToday.getMonth()+1
 
-    let day =date.getDate()
+    let day =dateToday.getDate()
     console.log(day)
     let genauerTag
     let holidayYesNoD = false;
@@ -35,10 +34,10 @@ function main() {
         "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
     ];
     const dayNames = ["Sonntag","Montag","Dienstag","Mittwoch","Donnserstag","Freitag","Samstag"];
-    let monthD = monthNames[date.getMonth()];
+    let monthD = monthNames[dateToday.getMonth()];
     document.getElementById('infotext_month').innerHTML = monthD ;
 
-    const dayOfWeek = dayNames[date.getDay()];
+    const dayOfWeek = dayNames[dateToday.getDay()];
     document.getElementById('infotext_dayweek').innerHTML = dayOfWeek
 
 
@@ -63,10 +62,10 @@ function main() {
         holidayYesNoD = true;
     }
 
-    console.log('year:' + date.getFullYear())
+    console.log('year:' + dateToday.getFullYear())
     console.log('year:' + year)
 
-    document.getElementById("infotext_year").innerHTML = date
+    document.getElementById("infotext_year").innerHTML = dateToday
 
 
     if (day <= 7) {
@@ -82,7 +81,7 @@ function main() {
         genauerTag=5
     }
     document.getElementById('infotext_year').innerHTML = year;
-    document.getElementById("infotext_dateD").innerHTML = date;
+    document.getElementById("infotext_dateD").innerHTML = dateToday;
     document.getElementById("infotext_day").innerHTML = genauerTag;
     // document.getElementById("infotext_month").innerHTML = monthD;
     document.getElementById("infotext_dateD").innerHTML = germanDate;
@@ -94,14 +93,69 @@ function main() {
 
      //Kalendar
 
+     const monthDays = document.querySelector(".days");
+
      const lastDay = new Date(
-        date.getFullYear(),
-        date.getMonth() + 1,
+        dateToday.getFullYear(),
+        dateToday.getMonth() + 1,
+        0
+      ).getDate(); //z.B. 31, 30, 28
+
+    let firstOfMonthWeekday = new Date(
+        dateToday.getFullYear(),
+        dateToday.getMonth(),
+        1
+      ).getDay(); // 0: Snntag, 1: Montag, Dienstag, Mittwoch...
+    let daysToDrawBefore = firstOfMonthWeekday == 0 ? 6 : firstOfMonthWeekday - 1;
+    // if (firstOfMonthWeekday == 0) {
+    //     daysToDrawBefore = 6;
+    // } else {
+    //     daysToDrawBefore = firstOfMonthWeekday - 1;
+    // }
+
+    const weekdayOfLastDay=new Date(
+        dateToday.getFullYear(),
+        dateToday.getMonth()+1,
+        0
+      ).getDay() //Montag, Dienstag, Mittwoch...
+
+    const firstDayIndex = dateToday.getDay();
+
+
+    const lastDayOfPreviousMonth = new Date(
+        dateToday.getFullYear(),
+        dateToday.getMonth(),
         0
-      ).getDate();
+      ).getDate(); //z.B. 31, 30, 28
+      console.log(lastDayOfPreviousMonth)
+
+      let days = [];
+
+      for (let i = 0; i < weekdayOfFirstDay-1; i++) {
+        let newday = document.createElement("td");
+        newday.innerHTML = (lastDayOfPreviousMonth-i);
+        days.push(newday);
+      }
+
+      for (let i = 1; i <= lastDay; i++){
+        let newday = document.createElement("td");
+        newday.innerHTML = i;
+        days.push(newday);
+      }
+
+      for (let i = 1; weekdayOfLastDay != 0 && weekdayOfLastDay+i < 8; i++) {
+        let newday = document.createElement("td");
+        newday.innerHTML = (i);
+        days.push(newday);
+      }
+
+
+      let anzahlWochen = days.length/7
+
+      console.log(days)
+
+
 
-    const firstDay=new Date(date.getFullYear(), date.getMonth(),1).getDate()
-    console.log(lastDay);
 
 function easterDate( year ) {
     var date, a, b, c, m, d;
@@ -132,7 +186,6 @@ function easterDate( year ) {
     // Gregorian Western Easter Sunday
     return date;
 }
-//Kalender date 
 
 }
 

diff --git a/index.html b/index.html
@@ -4,6 +4,7 @@
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
         <link rel="stylesheet" href="style.css">
         <title>Kalender</title>
         <script language="javascript" type="text/javascript" src="function.js"></script>
@@ -28,7 +29,14 @@ <h1>Kalenderblatt vom 17.03.2022</h1>
                     <li class="pfeil"> < </li>
                 </ul>
 
-
+                <!-- <div class="month monat">
+                    <i class="fas fa-angle-left prev"></i>
+                    <div class="date">
+                      <h1></h1>
+                      <p></p>
+                    </div>
+                    <i class="fas fa-angle-right next"></i>
+                  </div> -->
 
                 <tr>
                     <th class="kw weekdays">