Working on calendar.js some more..
This commit is contained in:
Vendored
+21
-6
@@ -7,7 +7,7 @@
|
||||
require('./bootstrap');
|
||||
|
||||
//Dependencies
|
||||
require("moment");
|
||||
const moment = require("moment");
|
||||
|
||||
require('./date');
|
||||
|
||||
@@ -23,7 +23,7 @@ import { toggleMenu } from './navmenu/menu';
|
||||
|
||||
// window.Vue = require('vue');
|
||||
|
||||
//import { generateCalendar } from "./calendar/calendar";
|
||||
import { generateCalendar } from "./calendar/calendar";
|
||||
|
||||
// createCalendar();
|
||||
//
|
||||
@@ -53,8 +53,23 @@ import { toggleMenu } from './navmenu/menu';
|
||||
// el: '#app',
|
||||
// });
|
||||
|
||||
//generateCalendar();
|
||||
let weekOffset = 0;
|
||||
|
||||
document.getElementById("toggle").onclick = function () {
|
||||
toggleMenu('menu');
|
||||
};
|
||||
if(document.getElementById("calendar")) {
|
||||
generateCalendar();
|
||||
|
||||
document.getElementById("week-previous").onclick = function () {
|
||||
weekOffset--;
|
||||
generateCalendar(weekOffset);
|
||||
}
|
||||
|
||||
document.getElementById("week-next").onclick = function () {
|
||||
weekOffset++;
|
||||
generateCalendar(weekOffset);
|
||||
}
|
||||
}
|
||||
|
||||
if(document.getElementById("toggle"))
|
||||
document.getElementById("toggle").onclick = function () {
|
||||
toggleMenu('menu');
|
||||
};
|
||||
|
||||
+117
-212
@@ -22,229 +22,134 @@
|
||||
|
||||
const moment = require("moment");
|
||||
|
||||
const calendar = document.getElementById("calendar");
|
||||
const title = document.getElementById("month");
|
||||
// const calendar = document.getElementById("calendar");
|
||||
// const title = document.getElementById("month");
|
||||
|
||||
const days = [
|
||||
"Mandag",
|
||||
"Tirsdag",
|
||||
"Onsdag",
|
||||
"Torsdag",
|
||||
"Fredag",
|
||||
"Lørdag",
|
||||
"Søndag"
|
||||
];
|
||||
|
||||
|
||||
// calendar.innerHTML = "";
|
||||
|
||||
function generateCalendar(weekOffset = 0) {
|
||||
const week = (moment().week() + weekOffset);
|
||||
let weekDays = Array.apply(null, Array(7)).map((value, index) => {
|
||||
return moment(index, "e").locale("da").startOf("week").weekday(index).format("ddd");
|
||||
});
|
||||
// weekDays.push(weekDays.shift());
|
||||
|
||||
// console.log(week);
|
||||
// console.log(weekDays);
|
||||
|
||||
const calendar = document.getElementById("calendar");
|
||||
|
||||
let header = document.createElement("div");
|
||||
header.classList.add("calendar-table__header", "calendar-table__row");
|
||||
|
||||
weekDays.forEach(function (weekDay) {
|
||||
let headerDay = document.createElement("div");
|
||||
headerDay.classList.add("calendar-table__col");
|
||||
|
||||
headerDay.innerText = weekDay;
|
||||
|
||||
header.appendChild(headerDay);
|
||||
});
|
||||
|
||||
let calendarBody = document.createElement("div");
|
||||
calendarBody.classList.add("calendar-table__body");
|
||||
|
||||
let calendarRow = document.createElement("div");
|
||||
calendarRow.classList.add("calendar-table__row")
|
||||
|
||||
weekDays.forEach(function (value, index) {
|
||||
let date = moment().locale("da").day(value).week(week);
|
||||
|
||||
// onDateSelect(date);
|
||||
|
||||
let dayHolder = document.createElement("div");
|
||||
dayHolder.classList.add("calendar-table__col");
|
||||
|
||||
let day = document.createElement("div");
|
||||
day.classList.add("calendar-table__item");
|
||||
day.innerText = date.date();
|
||||
|
||||
dayHolder.appendChild(day);
|
||||
|
||||
dayHolder.onclick = function() {
|
||||
onDateSelect(date);
|
||||
}
|
||||
|
||||
calendarRow.appendChild(dayHolder);
|
||||
});
|
||||
|
||||
calendarBody.appendChild(calendarRow);
|
||||
|
||||
|
||||
calendar.innerHTML = "";
|
||||
|
||||
calendar.appendChild(header);
|
||||
calendar.appendChild(calendarBody);
|
||||
|
||||
// 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"))
|
||||
// });
|
||||
// }
|
||||
|
||||
|
||||
|
||||
// console.log(cal);
|
||||
}
|
||||
|
||||
// const eventArray = [
|
||||
//
|
||||
// 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,
|
||||
// };
|
||||
function onDateSelect(date) {
|
||||
const events = document.getElementById("events");
|
||||
|
||||
events.innerHTML = "";
|
||||
|
||||
|
||||
for (let hour = 8; hour <= 20; hour++) {
|
||||
|
||||
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");
|
||||
let option = document.createElement("option");
|
||||
option.text = prependZero(hour);
|
||||
|
||||
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"))
|
||||
});
|
||||
// let item = document.createElement("li");
|
||||
// item.classList.add("events__item");
|
||||
//
|
||||
// let itemData = document.createElement("div");
|
||||
//
|
||||
// let head = document.createElement("span");
|
||||
// head.classList.add("events__name");
|
||||
// head.innerText = "Vaskemaskine Tid";
|
||||
//
|
||||
// let dat = document.createElement("span");
|
||||
// dat.classList.add("events__date");
|
||||
// dat.innerText = "Klokken " + prependZero(hour);
|
||||
//
|
||||
// itemData.appendChild(head);
|
||||
// itemData.appendChild(dat);
|
||||
// item.appendChild(itemData);
|
||||
//
|
||||
// let button = document.createElement("span");
|
||||
// button.classList.add("events__tag");
|
||||
// button.innerText = "Book";
|
||||
//
|
||||
// item.appendChild(button);
|
||||
//
|
||||
// events.appendChild(item);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function prependZero(value) {
|
||||
if(value < 10)
|
||||
return "0" + value;
|
||||
return value;
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
|
||||
Reference in New Issue
Block a user