JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://dl.dropbox.com/u/564962/jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js"></script>
<label>Week of:</label>
<select>
    <option selected>June 19</option>
    <option>June 26</option>
</select>
<div id="drag-c">
    <div id="app2" class="app-h8 drag">Faucets</div>
    <div id="app1" class="app-h4 drag">Lights</div>
    <div id="app3" class="app-h4 drag">Fans</div>
</div>
<div id="slider">
    <table>
        <tr>
            <th>Sun</th>
            <th>Mon</th>
            <th>Tue</th>
            <th>Wed</th>
            <th>Thu</th>
            <th>Fri</th>
            <th>Sat</th>
        </tr>
    <tr>
        <td>
            <span class="h4">
                <label class="left">8am</label>
                <label class="right">12</label>
                <div data-timespan="8-12" data-date="06/19/2011" class="drop"></div>
            </span>

        </td>
        <td>
            <span class="h8">
                <label>8am</label>
                <label class="right">5pm</label>
                <div data-timespan="8-5" data-date="06/20/2011" class="drop"></div>
            </span>
        </td>
        <td>
            <span class="h8">
                <label>8am</label>
                <label class="right">5pm</label>
                <div data-timespan="8-5" data-date="06/21/2011" class="drop"></div>
            </span>
        </td>
        <td>
            <span class="h4">
                <label class="left">8am</label>
                <label class="right">12</label>
                <div data-timespan="5-12" data-date="06/22/2011" class="drop"></div>
            </span>
            <span class="h4">
                <label>1pm</label>
                <label class="right">5</label>
                <div data-timespan="1-5" data-date="06/22/2011" class="drop"></div>
            </span>
        </td>
        <td>
            <span class="h8">
                <label>8am</label>
                <label class="right">5pm</label>
   ...

CSS

body { font: 12px Verdana }
#appointments { margin-top: 10px; }  
#appointments label { font-weight: bold;  } 
#drag-c { position: relative; height: 30px; margin-top: 10px; }
#slider { width: 700px; padding: 5px 0; color: #444; font: 95% Verdana }

#slider table { border: none; padding: 0; width: 100% }
#slider table td, #slider table th { padding: 2px 5px; width: 90px; }
#slider table th { font-weight: bold }
#slider table span label { position: absolute; clear: right; font-size: 8px; color: #888; }
#slider table span label.left{ left: 3px; }
#slider table span label.right { right: 6px; }
#slider table span.h4 { width: 50%; float: left; position: relative; }
#slider table span.h8 { width: 100%; float: left; position: relative;}
#slider table span div { border: 1px solid #999; display: block; border-radius: 3px; width: 95%; height: 25px; margin-right: 2px; margin-top: 12px; background-color: #E8E8E8 }
#slider table span .drophover { background: #8DAADF !important }
#slider table span .available { background: #62B37D }
#slider table span .dropped{ background: #8DAADF }

.drag { z-index: 100; position: absolute; cursor: pointer !important; background-color: #444; border-radius: 15px; padding-top:6px; height: 20px; display: block; margin: 1px; text-align: center; color: #fff; font: bold 10px Verdana }
.app-h4 { width: 43px }
.app-h8 { width: 86px }

JavaScript

// locals
var lastLeft = 0,
    dropFunc = function( event, ui ) {
        var drag = $(ui.draggable),
            $this = $(this),
            id = drag.attr('id'),
            timespan = $this.data('timespan'),
            date = $this.data('date');
        
        $this.addClass("dropped " + id);
        $('span.output.' + id).html(date + ' from ' + timespan);
    };

// position the draggables
$('#drag-c .drag').each(function(){ 
    lastLeft += $(this).css('left', lastLeft).width(); 
});


// drop for 4 hour appointments
$('#slider span.h4 div.drop').droppable({ 
    accept: '.app-h4',
    hoverClass: 'drophover',
    activeClass: 'available',
    drop: dropFunc
});


// drop for 8 hr appointments
$('#slider span.h8 div.drop').droppable({ 
    accept: function(drop){
        return $(drop).hasClass('drag') &&
            !$(this).hasClass('dropped');
    },
    hoverClass: 'drophover',
    activeClass: 'available',
    drop: dropFunc
});

// hook up drags
$('div.drag').draggable({ 
    start: function(){
        $('#slider span div.drop.' + this.id)
            .removeClass('dropped ' + this.id);
    },
    stop: function(e){
        //var s = $(this).data('draggable');
        //$.ui.ddmanager.drop(s, e)
        //console.log('stop');
    },
    revert: 'invalid',
    snap: 'div.drop',
    snapMode: 'inner',
    snapTolerance: 20,
    opacity: 0.85
});