Working on calendar.js again
This commit is contained in:
parent
32da29dd49
commit
3f9eaa7f8d
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -18,5 +18,8 @@
|
|||
"sass": "^1.20.1",
|
||||
"sass-loader": "^8.0.0",
|
||||
"vue-template-compiler": "^2.6.11"
|
||||
},
|
||||
"dependencies": {
|
||||
"moment": "^2.27.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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 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++)
|
||||
// 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 = intDay;
|
||||
// // let
|
||||
// // day.innerText = date;
|
||||
//
|
||||
// row.appendChild(day);
|
||||
// }
|
||||
// else if(date > countDays(year, 6)) {
|
||||
// break;
|
||||
// }
|
||||
//
|
||||
// intDay++;
|
||||
// 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);
|
||||
// }
|
||||
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);
|
||||
// function nextMonth() {
|
||||
// currentMonth++;
|
||||
//
|
||||
// date++;
|
||||
}
|
||||
calendar.appendChild(row);
|
||||
}
|
||||
}
|
||||
// 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,
|
||||
// };
|
||||
|
||||
function nextMonth() {
|
||||
currentMonth++;
|
||||
|
||||
if(currentMonth > 11)
|
||||
currentMonth = 0;
|
||||
|
||||
months.forEach((value, index) => {
|
||||
if(index === currentMonth)
|
||||
month.innerText = value;
|
||||
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"))
|
||||
});
|
||||
|
||||
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,
|
||||
generateCalendar
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue