jQuery Selectable: Select Multiple Fields and label them

I need to replicate a non-digital functionality of our employment application where a student can box in hours in a schedule of when they're available, when they开发者_如何学JAVA're in class and when they're unavailable. I thought jQuery's Selectable function would be the right trick. Can this be done? What's the easiest way?

Here's the image of what I need done: http://campusrec.colostate.edu/images/Upload/workweekSchedule.jpg

Thanks!

I'd say you just add a class selected:

$('.whateverisselectable').bind('click', function() {
    $(this).toggleClass('selected');
});

In your css:

.selected {
    border: 1px solid black;
}

An easy solution for your problem. JSFiddle!