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

Working on calendar.js again

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
skolehjem/resources/js/calendar/calendar.js
Vendored
+215 -179
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
};