How can I create a dynamic weekly schedule in HTML and Javascript?

Question

It's simple to create a table based layout for a weekly calendar with 7 columns for each day of the week and various rows for each hour of the week. I have no problem creating that. The hard part is filling in this table with daily 'events' dynamically (I'm not even sure how I would do this statically).

The user will have access to a list of 'events' that they would like to add to their weekly schedule. And they need to be added dynamically to the webpage. Each event has a specific start and end time, and may occur on more than one day of the week. I'm not sure how I could possibly add these 'events' to my table layout without getting into a bunch of rowspan problems ( a lot of the events are various lengths and span different hours ). It would be easy if each event was always 1 hour long, but that's not the case.

I was thinking of making each day a respective table with a hidden hour column. I still feel like this will result in a huge mess. Any ideas?

Solution

Why reinvent the wheel?

I think this covers all your concerns.

http://arshaw.com/fullcalendar/

Comments

[whoabackoff]

Out of curiosity, do you know of any fullcalendar alternatives?

[Brandon Boone]

@whoabackoff - No not really. There's Google Cal and Apple's Mobile Me, but other than that, I'm not aware of anything else. Good luck!