Employee schedule draft - vertical

nice colors

by brico

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css">
<p>Employee schedule for week X</p>
<ul id="week" class="box">   
    <li class="labels">
    <ul class="labels">
        <li>Sun</li>
        <li>Mon</li>
        <li>Tue</li>
        <li>Wed</li>
        <li>Thu</li>
        <li>Fri</li>
        <li>Sat</li>
    </ul>
    </li>       
    <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

.box { display: block; background: #fff; padding: 5px; border: 1px solid #bbb; border-radius: 5px;}
ul.labels li { display: inline-block; height: 20px; padding: 0 9px;}
ul.labels, li.labels { height: 20px;}
li, ul.shifts { display: block; height: 100%; }
li.day { display: block; float: left; background: #eee; margin: 5px; padding: 5px; border: 1px solid #bbb; border-radius: 5px;}
li.off { background: #f88; border-radius: 5px; }
li.shift { background: #bbb; border-radius: 5px; border-top: 3px double #999; border-bottom: 3px double #999;}
div#resizable { background: #dd9; width: 40px; height: 100px;}

JavaScript

// standard dimensions
var unit = 20;
var gutter = 5;
// we'll be pulling shifts from the db, but for the sake
// of mockup...
$('ul#week').height(unit * 12 + gutter * 4 + 20);
$('.box').width(unit * 14 + gutter * 28 + 14)

$('li.day, ul.shifts').height(unit * 12);
$('li.day, .labels li').width(unit * 2);
$('#sunday .shift').css({
    'top': unit * (9 - 7),
    'height': unit * 8
});
$('#monday .shift, #tuesday .shift, #wednesday .shift, #thursday .shift').css({
    'top': unit * (7 - 7),
    'height': unit * 8
});
// context menu on shifts:
// delete
// cut
// copy
// paste
// change role
// context menu on days:
// create new shift
// paste
$('li.shift').bind("contextmenu", function(e) {
    e.preventDefault();
    e.stopPropagation();
    alert('shift context menu');
});
$('li.day').bind("contextmenu", function(e) {
    e.preventDefault();
    alert('day context menu');
});
// need different one for off days, or??
$('li.off').bind("contextmenu", function(e) {
    e.preventDefault();
    e.stopPropagation();
    alert('off context menu');
});
// make shifts resizable
// TODO make them draggable too?
$(".shift").resizable({
    maxHeight: unit * 12,
    maxWidth: unit * 2,
    minHeight: unit,
    minWidth: unit * 2,
    handles: 'n, s',
    containment: 'ul.shifts',
    grid: unit,
    stop: function(event, ui) {
        alert($(this).css('top') + $(this).css('height'));
    }
});