diff --git a/skolehjem/package-lock.json b/skolehjem/package-lock.json
index 5431d05..f84361c 100644
--- a/skolehjem/package-lock.json
+++ b/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",
diff --git a/skolehjem/package.json b/skolehjem/package.json
index 52cbde8..5126d1c 100644
--- a/skolehjem/package.json
+++ b/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"
     }
 }
diff --git a/skolehjem/resources/js/app.js b/skolehjem/resources/js/app.js
index ee9352e..f479e32 100644
--- a/skolehjem/resources/js/app.js
+++ b/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;
-document.getElementById("month-previous").onclick = previousMonth;
+// 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
@@ -48,3 +52,5 @@ document.getElementById("month-previous").onclick = previousMonth;
 // const app = new Vue({
 //     el: '#app',
 // });
+
+generateCalendar();
diff --git a/skolehjem/resources/js/calendar/calendar.js b/skolehjem/resources/js/calendar/calendar.js
index eca6d56..356982f 100644
--- a/skolehjem/resources/js/calendar/calendar.js
+++ b/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 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
+// 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,
+// };
+
+
+
+calendar.innerHTML = "";
+//
+// 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"))
+        });
+    }
+
+
+}
 
 module.exports = {
-    createCalendar,
-    countDays,
-    nextMonth,
-    previousMonth,
-    calendar,
-    days,
-    months,
-    currentMonth,
-    month,
+    generateCalendar
 };