Implementing a multi-state planner

Question

I've been asked to develop a system wherein employees can mark on a form their availability on a given day of the week - for instance an employee could mark themselves as available on a given time on a given week, and unavailable on some other time. It looks a little like this:

http://img697.imageshack.us/img697/842/mvcb.jpg

Currently this works by rendering checkboxes within the table, picking up click events in each cell and marking the checkbox and hence the cell appropriately. I'm using the JQuery "click n drag checkbox" plugin from here. However, I've been informed that there could well be more than two states for a given cell (for instance available, unavailable, available in a given circumstance), in which case binding to a checkboxes checked value isnt going to be a lot of help.

I've never used javascript or asp.net before and am unsure as to the best way to approach this problem. Ideally I could stick a data structure behind each cell which I could update to a certain state and then get my cell colour by binding to this - however I'm at something as a loss as how to best achieve this.

Answer 1

Add a click event to the cell - e.g. click on the cell. Each click could then change the status of the cell. This status could then be store via ajax or using a submit button like on a form. Each cell could relate to a hidden form field which is where you status could be kept.

Answer 2

Maybe take some inspiration from google calendar. There you can select a timespan in the month view by click-dragging a range of days. I guess thats a faster way of entering longer timespans. (Like the lower part of the dragon)