Schedule n JavaScript

Tutorial session solution

by Brian von Konsky

HTML

<div id="horizontalLegend">
    <div id="time" class="day">Time</div>
    <div class="day">Monday</div>
    <div class="day">Tuesday</div>
    <div class="day">Wednesday</div>
    <div class="day">Thursday</div>
    <div class="day">Friday</div>
    <div class="day">Saturday</div>
    <div class="day">Sunday</div>
</div>
<div id="schedule">
    <div id="legend">
        <div class="even">8:00</div>
        <div class="odd">9:00</div>
        <div class="even">10:00</div>
        <div class="odd">11:00</div>
        <div class="even">12:00</div>
        <div class="odd">13:00</div>
        <div class="even">14:00</div>
        <div class="odd">15:00</div>
        <div class="even">16:00</div>
        <div class="odd">17:00</div>
        <div class="even">18:00</div>
        <div class="odd">19:00</div>
    </div>
    <div id="legendOffset" class="day"></div>
    <div id="Monday"    class="day"></div> 
    <div id="Tuesday"   class="day"></div> 
    <div id="Wednesday" class="day"></div>
    <div id="Thursday"  class="day"></div> 
    <div id="Friday"    class="day"></div> 
    <div id="Saturday"  class="day"></div> 
    <div id="Sunday"    class="day"></div> 
</div>

CSS

#schedule {
    position: absolute;
    top:5%;
    width: 100%;
    height:95%;
}

#legend {
    width: 100%;
    height: 100%;
}

.unit {
    position: absolute;
    background-color: darkblue;
    width: 12.5%;
    color: white;
    border-width: 1px;
    border-style: solid;
    border-color: palegoldenrod;
    text-align: center;
}


.even {
    height: 8.33%;
    background-color: lightgray;
    color: black;
}

.odd {
    height: 8.33%;
    background-color: slategray;
    color: white;
}

.day {
    width: 12.5%;
    height : 100%;
    float: left;
    text-align: center;
}

#time {
    text-align: left;
}

JavaScript

// Return the time in hours since the start of the day
function startTime(hours, min) {
    var time = hours + min / 60.0;
    return time;
}

// Use Object Notation with comma separated name:value paris
// to stgore the schedule
var schedule = {
    givenName : "Brian",
    familyName: "von Konsky",
    unit : [
        {
            name: "IPM (Lecture)",
            dow:   "Tuesday",
            time: startTime(10, 0),
            duration: 1
        },
        {
            name: "IPM (Tutorial 1)",
            dow:   "Tuesday",
            time: startTime(12, 0),
            duration: 2
        },
        {
            name: "IPM (Tutorial 2)",
            dow:   "Wednesday",
            time: startTime(14, 0),
            duration: 2
        },
        {
            name: "IPM (Tutorial 3)",
            dow:   "Wednesday",
            time: startTime(18, 0),
            duration: 2
        },
        {
            name: "BWT (Group 1)",
            dow:   "Thursday",
            time: startTime(9, 0),
            duration: 3
        },
        {
            name: "BWT (Group 2)",
            dow:   "Thursday",
            time: startTime(14,0),
            duration: 3
        }
        ]
};

function editDOM(schedule) {
    for (var i=0 ; i<schedule.unit.length ; i++ ) {
        var element = document.getElementById(schedule.unit[i].dow);
        if (element == null) {
            alert("WARNING: " + schedule.unit[i].dow + " not found.");
        }
        else {
            var theDiv = document.createElement("div");
            theDiv.appendChild(document.createTextNode(schedule.unit[i].name));
            var theStyle= "";
            theStyle += "top:" + (schedule.unit[i].time - 8.0) / 12.0  * 100.0 + "%;";
            theStyle += "height:" + schedule.unit[i].duration / 12.0 * 100 + "%;";
            theDiv.setAttribute("class", "unit");
            theDiv.setAttribute("style", theStyle);
            element.appendChild(theDiv);
        }
   ...