Topic: a web calendar - need to show events spanning multiple days like in google calendar...how?????

Hi guys need some help here.

Ok so I've built a nice little calendar application for my project. Its taking events and showing them nicely within the table that represents the calendar month. However I'm in a pickle when it comes to showing events that like span multiple days - one way is of course to just repeat the same text for teh event in all cells that the event spans the month but I would really like to do it the way google calendar has done it i.e. have a nice div bar elongate and span the days teh event spans.

Well consider that my month view is in a table and all the events are little divs within the cells which represnt the days - I'm stuck with respect ton how to get this done? COnsider this that teh table is resizable with the browser... any ideas guys

I'm working in PHP on teh backend though...in this case I'm dealing with a table whose cell widths can be changed if someone resizes teh browser so might wanna take that into consideration. Plus theres the darn possibility of overlapping other events by the elongating div - so thats an issue that might need to be avoided as well..

Can you show us what you have done already? Maybe draw a picture of what you want to achieve exactly.
To me it sounds like you aren't completely sure what you want. Think it through first and then come up with the solution. Doesn't sound like rocket science I'm sure you can do it.

Well heres a picture of what I have done so far:


Its a simple calendar - the calendar is a table. And the events are little divs inside teh table. It seems ok for displaying events that fall and end on the same day however what I need to accomplish is something like below with respect to events that span multiple days:



How can I get to do this - I've been hacking at it for a while and cant seem to get it right...

Have you looked at the markup and CSS of Google Calendar or any other web based calendar ?

I'm unsure how to do markup/render events that spans accross several lines. Ideally they should be in a single element so that you don't have to do some weird sh*t when drag'n drop'ing such event to another date.

From what I see in your screenshots, a TABLE with some a row of TH for the week day, and a column of TH for the week number , then a bunch of TD for the date seem fine. Then to allow events spanning accross several days, you'd have to position:absolute some DIV in % on top the TABLE, but that seem quickly limited.

On top of my head, I think that one solution to have events that can span accross several lines is to make do as above but with a twist. The duration of the events should be represented as a series of tags 1 day wide, and with a line-height/height 1 day tall. Position the start day using text-indent so that it only affects the first row of days, and the whole thing should behave just fine.

or have mulitple rows per day (that don't look like cells, basically), then you can do all the colspanning you want.
Just need to make sure the ordering is right, and that you handle those spanning weekends correctly - but
you'll need multiple elements for that anyhow.

one way to do it