// class Calendar { // constructor() { // // } // // nextMonth() { // // } // // previousMonth() { // // } // // addEvent() { // // } // // removeEvent() { // // } // } const moment = require("moment"); // const calendar = document.getElementById("calendar"); // const title = document.getElementById("month"); // calendar.innerHTML = ""; function generateCalendar(weekOffset = 0) { const week = (moment().week() + weekOffset); document.getElementById("title").innerText = week; 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"); 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 (weekDay) { let headerDay = document.createElement("div"); headerDay.classList.add("calendar-table__col"); headerDay.innerText = weekDay; header.appendChild(headerDay); let date = moment().locale("da").day(weekDay).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); } function onDateSelect(date) { let events; let machinez; let container = document.getElementById("event-container"); if(document.getElementById("washing-machines") != undefined) machinez = document.getElementById("washing-machines"); else { let span = document.createElement("span"); span.classList.add("events__title"); span.innerText = "Maskiner"; let select = document.createElement("select"); select.classList.add("events__title"); select.id = "washing-machines"; container.appendChild(span); container.appendChild(select); machinez = document.getElementById("washing-machines"); } if(document.getElementById("events") != undefined) events = document.getElementById("events"); else { let span = document.createElement("span"); span.classList.add("events__title"); span.innerText = "Tider"; let select = document.createElement("select"); select.classList.add("events__title"); select.id = "events"; container.appendChild(span); container.appendChild(select); events = document.getElementById("events"); } // events.innerHTML = ""; const machines = [ "Maskine 1", "Maskine 2" ] for (let i = 0; i < machines.length; i++) { let option = document.createElement("option"); option.text = machines[i]; machinez.appendChild(option); } for (let hour = 8; hour <= 20; hour++) { let option = document.createElement("option"); option.text = prependZero(hour); events.appendChild(option); // 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 = { generateCalendar };