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

whoabackoff picture whoabackoff · May 17, 2011 · Viewed 61.6k times · Source

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?

Answer

Brandon Boone picture Brandon Boone · May 17, 2011

Why reinvent the wheel?

I think this covers all your concerns.

http://arshaw.com/fullcalendar/