217 lines
4.1 KiB
JavaScript
217 lines
4.1 KiB
JavaScript
// 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,
|
|
};
|