Working on calendar.js again

skolehjem/package-lock.json

@@ -5704,6 +5704,11 @@
                 "minimist": "^1.2.5"
             }
         },
+        "moment": {
+            "version": "2.27.0",
+            "resolved": "https://registry.npmjs.org/moment/-/moment-2.27.0.tgz",
+            "integrity": "sha512-al0MUK7cpIcglMv3YF13qSgdAIqxHTO7brRtaz3DlSULbqfazqkc5kEjNrLDOM7fsjshoFIihnU8snrP7zUvhQ=="
+        },
         "move-concurrently": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",

skolehjem/package.json

@@ -18,5 +18,8 @@
         "sass": "^1.20.1",
         "sass-loader": "^8.0.0",
         "vue-template-compiler": "^2.6.11"
+    },
+    "dependencies": {
+        "moment": "^2.27.0"
     }
 }

skolehjem/resources/js/app.js

@@ -7,6 +7,8 @@
 require('./bootstrap');
 
 //Dependencies
+require("moment");
+
 require('./date');
 
 //Sites
@@ -17,14 +19,16 @@ require('./navmenu/menu');
 
 // require("./calendar/calendar");
 
-import { nextMonth, previousMonth, countDays, createCalendar, months, month, currentMonth, days, calendar } from "./calendar/calendar";
+// import { nextMonth, previousMonth, countDays, createCalendar, months, month, currentMonth, days, calendar } from "./calendar/calendar";
 
 // window.Vue = require('vue');
 
-createCalendar();
+import { generateCalendar } from "./calendar/calendar";
 
-document.getElementById("month-next").onclick = nextMonth;
+// createCalendar();
-document.getElementById("month-previous").onclick = previousMonth;
+//
+// document.getElementById("month-next").onclick = nextMonth;
+// document.getElementById("month-previous").onclick = previousMonth;
 
 /**
  * The following block of code may be used to automatically register your
@@ -48,3 +52,5 @@ document.getElementById("month-previous").onclick = previousMonth;
 // const app = new Vue({
 //     el: '#app',
 // });
+
+generateCalendar();

skolehjem/resources/js/calendar/calendar.js

@@ -20,7 +20,11 @@
 //     }
 // }
 
+const moment = require("moment");
+
 const calendar = document.getElementById("calendar");
+const title = document.getElementById("month");
+
 const days = [
     "Mandag",
     "Tirsdag",
@@ -30,187 +34,219 @@ const days = [
     "Lørdag",
     "Søndag"
 ];
+//
+// const months = [
+//     "January",
+//     "February",
+//     "March",
+//     "April",
+//     "May",
+//     "June",
+//     "July",
+//     "August",
+//     "September",
+//     "October",
+//     "November",
+//     "December",
+// ]
 
-const months = [
+// const month = document.getElementById("month");
-    "January",
+//
-    "February",
+// const year = 2020;
-    "March",
+//
-    "April",
+// let currentMonth = 0;
-    "May",
+//
-    "June",
+// let firstDay = (new Date(year, month)).getDay();
-    "July",
+//
-    "August",
+// function createCalendar() {
-    "September",
+//
-    "October",
+//     calendar.innerHTML = "";
-    "November",
+//
-    "December",
+//     // HEADER
-]
+//     let header = document.createElement("div");
-
+//     header.classList.add("calendar-table__header", "calendar-table__row");
-const month = document.getElementById("month");
+//
-
+//     days.forEach((value) =>{
-const year = 2020;
+//         let head = document.createElement("div");
-
+//         head.classList.add("calendar-table__col");
-let currentMonth = 0;
+//
-
+//         head.innerText = value;
-let firstDay = (new Date(year, month)).getDay();
+//
-
+//         header.appendChild(head);
-function createCalendar() {
+//     });
-
+//
-    calendar.innerHTML = "";
+//     calendar.appendChild(header);
-
+//
-    // HEADER
+//
-    let header = document.createElement("div");
+//     // BODY
-    header.classList.add("calendar-table__header", "calendar-table__row");
+//
-
+//     let date = new Date(Date.now());
-    days.forEach((value) =>{
+//
-        let head = document.createElement("div");
+//     months.forEach((value, index) => {
-        head.classList.add("calendar-table__col");
+//         if(index === date.getMonth()) {
-
+//
-        head.innerText = value;
+//         }
-
+//     });
-        header.appendChild(head);
+//
-    });
+//
-
+// // <div class="calendar-table__col">
-    calendar.appendChild(header);
+// //         <div class="calendar-table__item">
-
+// //         <span>2</span>
-
+// //         </div>
-    // BODY
+// //         </div>
-
+//
-    let date = new Date(Date.now());
+//     // let intDay = 1;
-
+//     // for(let columns = 0; columns < 5; columns++)
-    months.forEach((value, index) => {
+//     // {
-        if(index === date.getMonth()) {
+//     //     let row = document.createElement("div");
-
+//     //     row.classList.add("calendar-table__row");
-        }
+//     //
-    });
+//     //     for (let i = 0; i < 7; i++)
-
+//     //     {
-
+//     //         let day = document.createElement("div");
-// <div class="calendar-table__col">
+//     //         day.classList.add("calendar-table__col", "calendar-table__item");
-//         <div class="calendar-table__item">
+//     //         day.innerText = intDay;
-//         <span>2</span>
+//     //         // let
-//         </div>
+//     //
-//         </div>
+//     //         row.appendChild(day);
-
+//     //
-    // let intDay = 1;
+//     //         intDay++;
-    // for(let columns = 0; columns < 5; columns++)
+//     //     }
+//     //     calendar.appendChild(row);
+//     // }
+//     drawMonth(6);
+// }
+//
+// function drawMonth(monthId) {
+//
+//
+//     let dateObject = new Date()
+//
+//     let date = 1;
+//     for(let columns = 0; columns < 6; columns++)
 //     {
 //         let row = document.createElement("div");
 //         row.classList.add("calendar-table__row");
 //
 //         for (let i = 0; i < 7; i++)
 //         {
+//             if(columns === 0 && i < firstDay) {
 //                 let day = document.createElement("div");
 //                 day.classList.add("calendar-table__col", "calendar-table__item");
-    //         day.innerText = intDay;
+//                 // day.innerText = date;
-    //         // let
 //
 //                 row.appendChild(day);
+//             }
+//             else if(date > countDays(year, 6)) {
+//                 break;
+//             }
 //
-    //         intDay++;
+//             else {
+//                 let day = document.createElement("div");
+//                 day.classList.add("calendar-table__col", "calendar-table__item");
+//                 day.innerText = date;
+//
+//                 row.appendChild(day);
+//                 date++;
+//             }
+//
+//             // let day = document.createElement("div");
+//             // day.classList.add("calendar-table__col", "calendar-table__item");
+//             // day.innerText = date;
+//             // // let
+//             //
+//             // row.appendChild(day);
+//             //
+//             // date++;
 //         }
 //         calendar.appendChild(row);
 //     }
-    drawMonth(6);
+// }
-}
-
-function drawMonth(monthId) {
-
-
-    let dateObject = new Date()
-
-    let date = 1;
-    for(let columns = 0; columns < 6; columns++)
-    {
-        let row = document.createElement("div");
-        row.classList.add("calendar-table__row");
-
-        for (let i = 0; i < 7; i++)
-        {
-            if(columns === 0 && i < firstDay) {
-                let day = document.createElement("div");
-                day.classList.add("calendar-table__col", "calendar-table__item");
-                // day.innerText = date;
-
-                row.appendChild(day);
-            }
-            else if(date > countDays(year, 6)) {
-                break;
-            }
-
-            else {
-                let day = document.createElement("div");
-                day.classList.add("calendar-table__col", "calendar-table__item");
-                day.innerText = date;
-
-                row.appendChild(day);
-                date++;
-            }
-
-            // let day = document.createElement("div");
-            // day.classList.add("calendar-table__col", "calendar-table__item");
-            // day.innerText = date;
-            // // let
 //
-            // row.appendChild(day);
+// function nextMonth() {
+//     currentMonth++;
 //
-            // date++;
+//     if(currentMonth > 11)
-        }
+//         currentMonth = 0;
-        calendar.appendChild(row);
+//
-    }
+//     months.forEach((value, index) => {
-}
+//         if(index === currentMonth)
+//             month.innerText = value;
+//     });
+//
+//     drawMonth(currentMonth);
+// }
+//
+// function previousMonth() {
+//     currentMonth--;
+//
+//     if(currentMonth < 0)
+//         currentMonth = 11;
+//
+//     months.forEach((value, index) => {
+//         if(index === currentMonth)
+//             month.innerText = value;
+//     });
+//
+//     drawMonth(currentMonth);
+// }
+//
+//
+// function countDays(year, month) {
+//     return 32 - new Date(year, month, 32).getDate();
+// }
+//
+// // Monday
+// // Tuesday
+// // Wednesday
+// // Thursday
+// // Friday
+// // Saturday
+// // Sunday
+// //
+// // mon tue wed thu fri sat sun
+//
+//
+// module.exports = {
+//     createCalendar,
+//     countDays,
+//     nextMonth,
+//     previousMonth,
+//     calendar,
+//     days,
+//     months,
+//     currentMonth,
+//     month,
+// };
 
-function nextMonth() {
-    currentMonth++;
 
-    if(currentMonth > 11)
-        currentMonth = 0;
 
-    months.forEach((value, index) => {
+calendar.innerHTML = "";
-        if(index === currentMonth)
+//
-            month.innerText = value;
+// cal.forEach(value => {
+//     let elem = document.createElement("div");
+//     elem.innerText = value;
+//     console.log(value);
+//     calendar.appendChild(elem);
+// });
+//
+// title.innerText = moment().format("DD/MM/YYYY");
+
+function generateCalendar() {
+    const startWeek = moment().startOf("month").week();
+    const endWeek = moment().endOf("month").week();
+
+    let cal = [];
+    for (let week = startWeek; week < endWeek; week++) {
+        cal.push({
+            week : week,
+            days : Array(7).fill(0).map((n, i) => moment().week(week).startOf("week").clone().add(n + i, "day"))
         });
-
-    drawMonth(currentMonth);
-}
-
-function previousMonth() {
-    currentMonth--;
-
-    if(currentMonth < 0)
-        currentMonth = 11;
-
-    months.forEach((value, index) => {
-        if(index === currentMonth)
-            month.innerText = value;
-    });
-
-    drawMonth(currentMonth);
     }
 
 
-function countDays(year, month) {
-    return 32 - new Date(year, month, 32).getDate();
 }
 
-// Monday
-// Tuesday
-// Wednesday
-// Thursday
-// Friday
-// Saturday
-// Sunday
-//
-// mon tue wed thu fri sat sun
-
-
 module.exports = {
-    createCalendar,
+    generateCalendar
-    countDays,
-    nextMonth,
-    previousMonth,
-    calendar,
-    days,
-    months,
-    currentMonth,
-    month,
 };