From 3f9eaa7f8d9f10798171c0b158707f994427be66 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 25 Jun 2020 13:20:47 +0200 Subject: [PATCH] Working on calendar.js again --- skolehjem/package-lock.json | 5 + skolehjem/package.json | 3 + skolehjem/resources/js/app.js | 14 +- skolehjem/resources/js/calendar/calendar.js | 394 +++++++++++--------- 4 files changed, 233 insertions(+), 183 deletions(-) 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()) { - - } - }); - - -//
-//
-// 2 -//
-//
- - // 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()) { +// +// } +// }); +// +// +// //
+// //
+// // 2 +// //
+// //
+// +// // 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 };