Ekapp/skolehjem/resources/js/calendar/calendar.js

// 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,
};