Oppgave 11

Resultat

Du kan endre på kalenderen! Maks lov med 8 dager i uka dessverre.

Koden

JavaScript

                
window.onload = ready;

function ready() {
    var weekStart = document.getElementById("o11-cal-start");
    var daysInMonth = document.getElementById("o11-cal-days");
    var daysInWeek = document.getElementById("o11-cal-week");
    
    writeCalendar(daysInMonth.value, weekStart.value, daysInWeek.value);

    weekStart.oninput = function(){
        writeCalendar(daysInMonth.value, this.value, daysInWeek.value)
    };

    daysInMonth.oninput = function(){
        writeCalendar(this.value, weekStart.value, daysInWeek.value)
    };

    daysInWeek.oninput = function(){
        writeCalendar(daysInMonth.value, weekStart.value, this.value)
    };
}

function writeCalendar(daysInMonth, weekStart, daysInWeek) {
    var weekStart = parseInt(weekStart);
    var calendar = document.getElementById("calendar");
    var dayNames = ["Man", "Tir", "Ons", "Tor", "Fre", "Lør", "Søn", "Doomsday"];
    var weekStartHTML = "<div class='cal-row'>";
    var weekEndHTML = "</div>";
    var tmpHTML = weekStartHTML;
    var extraStart = false;

    if (daysInWeek > 8 || daysInMonth <= 7) {
        return false;
    }

    calendar.innerHTML = ""; // Tøm kalender før start

    // Lag en rad med ukedagenes navn
    for (var i = 0; i < daysInWeek; i++) {
        var offset = Math.abs((i - weekStart) % dayNames.length);

        tmpHTML += putDay(dayNames[offset]);

        if (dayNames.length === i) {
            i = 0;
        }
    }
    // Avslutt raden
    tmpHTML += weekEndHTML + weekStartHTML;
    
    // Lag alle dagene i månden
    for (var i = 1; i <= daysInMonth; i++) {
        if (extraStart === false) {
            extraStart = true;

            // Lag ekstra dager når uka starter på en annen dag enn mandag
            for (var j = daysInMonth-weekStart+1; j <= daysInMonth; j++) {
                tmpHTML += putDay(j);
            }
        }

        tmpHTML += putDay(i);

        // Avslutt og lag en ny rad for hver gjeldene dag er delelig med antall dager i uka
        if ((i+weekStart)%daysInWeek === 0) {
            tmpHTML += weekEndHTML + weekStartHTML;
        }
    }

    // Output HTML
    calendar.innerHTML = tmpHTML;

    // Wrap en dag i HTML.
    function putDay(day) {
        return "<span style='width:" + (100/daysInWeek) + "%'>" + day + "</span>";
    }
}
                
            

HTML

                
<div class="row input-field">
    <label for="o11-cal-start" class="col s4">Først dag i uka</label>
    <label for="o11-cal-days" class="col s4">Dager i måneden</label>
    <label for="o11-cal-week" class="col s4">Dager i uka</label>
</div>
<div class="row input-field">
    <select id="o11-cal-start" class="col s4">
        <option value="0">Mandag</option>
        <option value="1">Tirsdag</option>
        <option value="2">Onsdag</option>
        <option value="3">Torsdag</option>
        <option value="4">Fredag</option>
        <option value="5">Lørdag</option>
        <option value="6">Søndag</option>
    </select>
    <input type="number" id="o11-cal-days" class="col s4" min="7" value="30">
    <input type="number" id="o11-cal-week" class="col s4" max="8" min="1" value="7">
</div>
<div id="calendar"></div>