Employee schedule draft

nice colors

by brico

HTML

<p>Employee schedule for week X</p>
<ul id="week">
    <li id="sunday" class="day">
        <ul class="shifts">
            <li class="shift">9AM to 6PM</li>
        </ul>
    </li>
    <li id="monday" class="day">
        <ul class="shifts">
            <li class="shift">7AM to 3:30PM</li>
        </ul>
    </li>
    <li id="tuesday" class="day">
        <ul class="shifts">
            <li class="shift">7AM to 3:30PM</li>
        </ul>
    </li>
    <li id="wednesday" class="day">
        <ul class="shifts">
            <li class="shift">7AM to 3:30PM</li>
        </ul>
    </li>
    <li id="thursday" class="day">
        <ul class="shifts">
            <li class="shift">7AM to 3:30PM</li>
        </ul>
    </li>
    <li id="friday" class="day">
        <ul class="shifts">
            <li class="off">Off</li>
        </ul>
    </li>
    <li id="saturday" class="day">
        <ul class="shifts">
            <li class="off">Off</li>
        </ul>
    </li>
</ul>

CSS

ul#week { display: block; background: #ddd; padding: 5px; }
li.day { display: block; background: #e55; margin: 5px; padding: 5px; }
li.off { background: #eaa; }
li.shift { background: #88f; }

JavaScript

var unit = 40;
var gutter = 5;
$('ul#week').width(unit * 12).height(unit * 7 + gutter * 22);
$('li.day').height(unit);
$('#sunday .shift').css({
    'margin-left': unit * (9 - 7),
    'margin-right': unit * (7 - 6)
});
$('#monday .shift, #tuesday .shift, #wednesday .shift, #thursday .shift').css({
    'margin-left': unit * (7 - 7),
    'margin-right': unit * (7 - 3.5)
});