vict3459
/
Ekapp
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Working on calendar.js again

This commit is contained in:
Sebastian Davaris 2020-06-25 13:20:47 +02:00
parent 32da29dd49
commit 3f9eaa7f8d
4 changed files with 233 additions and 183 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
skolehjem/package-lock.json generated
View File

@ -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",

3
skolehjem/package.json
View File

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

14
skolehjem/resources/js/app.js vendored
View File

@ -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();

394
skolehjem/resources/js/calendar/calendar.js vendored
View File

@ -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
};