[jQuery] Google Calendar-style table cell selection
I'm looking to mimick the row-selection technique used by Google in
the week-view of their Calendaring app.
It's not my goal to replicate it, I just want to do the date selection
in a similar way.
After studying the calendar with Firebug, I noticed that they seem to
use a HTML table, with a TR element and several TD elements.
The first TD element contains the time DIVs (00:00 - 23:00) with a
height of say 100px.
The second TD contains the half-time DIVs (00:00, 00:30, 01:00,
etcetera) with a height of 50px each.
At this point I don't know where to go exactly....
- Dynamically inserting a new DOM element on mousedown at the position
().top coordinates of the target cell, and resizing it until mouseup?
- Coloring the inbetween cells (between mousedown and mouseup)?
- Another way?
Here's some code I came up with: http://gist.github.com/84059
Has anyone done this before? All tips and info are welcome.