Working on calendar.js

skolehjem/resources/js/app.js

@@ -15,8 +15,17 @@ require('./sites/menuplan');
 //Webapp hamburger menu
 require('./navmenu/menu');
 
+// require("./calendar/calendar");
+
+import { nextMonth, previousMonth, countDays, createCalendar, months, month, currentMonth, days, calendar } from "./calendar/calendar";
+
 // window.Vue = require('vue');
 
+createCalendar();
+
+document.getElementById("month-next").onclick = nextMonth;
+document.getElementById("month-previous").onclick = previousMonth;
+
 /**
  * The following block of code may be used to automatically register your
  * Vue components. It will recursively scan this directory for the Vue

skolehjem/resources/js/calendar/calendar.js

@@ -0,0 +1,216 @@
+// class Calendar {
+//     constructor() {
+//
+//     }
+//
+//     nextMonth() {
+//
+//     }
+//
+//     previousMonth() {
+//
+//     }
+//
+//     addEvent() {
+//
+//     }
+//
+//     removeEvent() {
+//
+//     }
+// }
+
+const calendar = document.getElementById("calendar");
+const days = [
+    "Mandag",
+    "Tirsdag",
+    "Onsdag",
+    "Torsdag",
+    "Fredag",
+    "Lørdag",
+    "Søndag"
+];
+
+const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+]
+
+const month = document.getElementById("month");
+
+const year = 2020;
+
+let currentMonth = 0;
+
+let firstDay = (new Date(year, month)).getDay();
+
+function createCalendar() {
+
+    calendar.innerHTML = "";
+
+    // HEADER
+    let header = document.createElement("div");
+    header.classList.add("calendar-table__header", "calendar-table__row");
+
+    days.forEach((value) =>{
+        let head = document.createElement("div");
+        head.classList.add("calendar-table__col");
+
+        head.innerText = value;
+
+        header.appendChild(head);
+    });
+
+    calendar.appendChild(header);
+
+
+    // BODY
+
+    let date = new Date(Date.now());
+
+    months.forEach((value, index) => {
+        if(index === date.getMonth()) {
+
+        }
+    });
+
+
+// <div class="calendar-table__col">
+//         <div class="calendar-table__item">
+//         <span>2</span>
+//         </div>
+//         </div>
+
+    // let intDay = 1;
+    // for(let columns = 0; columns < 5; columns++)
+    // {
+    //     let row = document.createElement("div");
+    //     row.classList.add("calendar-table__row");
+    //
+    //     for (let i = 0; i < 7; i++)
+    //     {
+    //         let day = document.createElement("div");
+    //         day.classList.add("calendar-table__col", "calendar-table__item");
+    //         day.innerText = intDay;
+    //         // let
+    //
+    //         row.appendChild(day);
+    //
+    //         intDay++;
+    //     }
+    //     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);
+            //
+            // date++;
+        }
+        calendar.appendChild(row);
+    }
+}
+
+function nextMonth() {
+    currentMonth++;
+
+    if(currentMonth > 11)
+        currentMonth = 0;
+
+    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,
+};

skolehjem/resources/js/calendar/month.js

@@ -0,0 +1,31 @@
+class Month {
+    constructor(year, monthOffsetNormalized) {
+        this.year = year;
+        this.normalizedOffset = monthOffsetNormalized;
+    }
+
+    init() {
+        this.firstDay = (new Date(this.year, month - 1)).getDay();
+
+
+    }
+
+    draw(render) {
+        this.clearRender(render);
+
+
+    }
+
+    clearRender(render) {
+        let renderElement = document.getElementById(render);
+        renderElement.innerHTML = "";
+    }
+
+    createDay() {
+
+    }
+
+    countDays() {
+        return 32 - new Date(this.year, this.normalizedOffset - 1, 32).getDate();
+    }
+}