jQuery Selectable: Select Multiple Fields and label them

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'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!