3

First of all I'm very thankful for any input. I'm not asking you to do this for me, I would just like to know your thoughts on the best way to approach this project. Please see the image below:

enter image description here

Apologies for it being in German, the important translations are as follows:

verfügbar = available
bereits reserviert = already reserved
Uhrzeit = time slot
aktuelle Woche = this week
and Mo, Di, Mi etc. are shortenings of the days of the week.

I'll quickly explain what it should do, because the picture doesn't really explain everything. It's basically displaying when "someone" is available throughout the day. The data would be pulled as JSON and displayed dynamically for each user and list two weeks. The week we're on, and the future week.

Anyway, I would literally just like to have your opinions on the best way of going about this. My initial thought was: Unix timestamps, find the time difference and convert that into pixels to use as a height for each div. But then it struck me that I wouldn't be able to find out where the div should start. (Maybe it starts at 10:00 like on the picture, how would I determine that)

I thought about doing this in canvas, however have very little experience of Canvas so I avoided that. Shout if you would recommend it though. I'm looking for the ideal solution.

Just to know what to learn would be a big help for me, and any input will be gratefully taken on board!

Thank you for your time,
Peter

Edit: Sorry I forgot to mention those things, thanks for pointing that out:

Reserved time data will also be pulled, the user can decide whether they are available or unavailable during that period of time. I'm not really sure how complicated it would be to have two bars on the same day. For example: unavailable from 06:00 to 12:00, but available from 12:00 to 18:00. So I'm avoiding that for the time being.

Time intervals are 15 mins. For each 15 mins 9px should/could be added to the height.

Thanks for your replies.

Peter
  • 330
  • 1
  • 4
  • 18
  • How do you find out whether someone is available or not? – ayyp Jul 09 '12 at 15:08
  • About how many "units" are you talking here? Hours, half-hours, minutes.. What availability is used here, from a certain hour+minute point of view? – Luceos Jul 09 '12 at 15:18
  • Thanks for your comments, I've updated my post with the additional information. – Peter Jul 09 '12 at 15:51

2 Answers2

1

you could do it within a <table> and clever css styling... each <td> is 15 minutes and 9px height. the first and the last ones contain start / end time. I had some similar requirements and solved it with tables and css after I checked out the demo of http://www.project-open.org/ where they used tables sometimes to display calendar / milestone data. Also, the Google Calendar uses tables: https://www.google.com/calendar/

tmaximini
  • 8,403
  • 6
  • 47
  • 69
  • Yeah that was another idea, I found something like that here: https://www.studirent.com/content/studirent
    However I didn't like how tacky it looked, and I thought about how much markup there would have to be on the page... and I avoided it. If there aren't any better ways of doing it, then yes I'll probably end up doing it like that though. Thanks.     – Peter Jul 11 '12 at 15:26
  • i think with css3/sass/bourbon you can make it look nice quite easily, depending on your css skills. i wouldnt worry too much to have a lot of markup on the final html, as it gets generated anyway.. – tmaximini Jul 12 '12 at 13:36
0

This jquery-plugin might be worth looking at https://github.com/themouette/jquery-week-calendar

looks like it uses a combination of table(s) and divs to do the layout

sotto
  • 2,044
  • 4
  • 18
  • 22
  • Related to calendar and tables: http://stackoverflow.com/questions/10059400/should-a-calendar-by-represented-using-a-table-why-does-google-calendar-only-us – sotto Aug 13 '12 at 21:52