Schedule

by Alin Guta

HTML

<ul data-rel='1'>
     <h3>Luni</h3>

    <li>
        <div class="hour">08:00</div>
        <p>Class in session</p>
    </li>
</ul>
<ul data-rel='2'>
     <h3>Marti</h3>

    <li>
        <div class="hour">08:00</div>
        <p>Class in session</p>
    </li>
</ul>
<ul data-rel='3'>
     <h3>Miercuri</h3>

    <li class="passed">
        <div class="hour">08:00</div>
        <p>Class in session</p>
    </li>
</ul>
<ul data-rel='4'>
     <h3>Joi</h3>

    <li>
        <div class="hour">08:00</div>
        <p>Class in session</p>
    </li>
</ul>
<ul data-rel='5'>
     <h3>Vineri</h3>

    <li>
        <div class="hour">08:00</div>
        <p>Class in session</p>
    </li>
</ul>
<ul data-rel='6'>
     <h3>Sambata</h3>

    <li>
        <div class="hour">08:00</div>
        <p>Class in session</p>
    </li>
    <li>
        <div class="hour">12:00</div>
        <p>Class in session</p>
    </li>
    <li>
        <div class="hour">12:00</div>
        <p>Class in session</p>
    </li>
    <li>
        <div class="hour">16:00</div>
        <p>Class in session</p>
    </li>
</ul>
<ul data-rel='0'>
     <h3>Duminica</h3>

    <li>
        <div class="hour">08:00</div>
        <p>Class in session</p>
    </li>
</ul>

CSS

ul {
    width:auto;
    height:auto;
    display:table;
    position:relative;
    margin:10px;
    float:left;
    display:none;
}
.passed {
    color:#A5A5A5 !important;
    cursor:default;
}

JavaScript

var d = new Date();
var weekday = d.getDay();
var nextweekday = (d.getDay() + 1) % 7
var hour = d.getHours();

$('ul').each(function () {
    var myday = $(this).attr("data-rel");
    if (weekday == myday) {
        $(this).show();
        $(this).find('li').each(function () {
            var myhour = $(this).find('.hour').html().substr(0, 2);
            if (myhour < hour) {
                $(this).find('p').append(' -passed');
            };
        });
    //} else if (nextweekday == myday){
        //$(this).show();
    } else {
        $(this).hide();
    };
});