Event Calendar

[TheDahv]

Make a prettier calendar that doesn't rely on Google's presentation. Based on the provided JSON data (see the link at the end of this post) the calendar page should

• List upcoming events by name in bullet format
• Link to an event page within the site

The event page should also afford some means to 'check in' to give some kind of record of who attended. We would need to figure out how many past events to show, and how many future events to show to keep things clean.

Otherwise, we could offer some kind of filter system: 'Past Events' | 'Upcoming Events' | 'All Events'

If we really wanted to get fancy, we could offer some way to tie events to locations (which would introduce another model) so that we could filter by events at particular locations.

The Event model should contain the following information (presented in JSON here):

{
  google_uri: 'http://something.json',
  event_name: 'Beer && Code Seattle - Capitol Hill m/dd/yyyy',
  checkins: [],
  location: 'Capitol Hill'
}

JSON data lives at: https://www.google.com/calendar/feeds/nkm9kdgn47rdutq4nibvjp3qn4%40group.calendar.google.com/public/full?alt=json

[smoak]

See these two pages for some help on using the json output provided by google:

• http://code.google.com/apis/gdata/docs/json.html
• http://code.google.com/apis/gdata/samples.html#JavaScript

[TheDahv]

Here's my take on what it could look like:

[TotallyGatsby]

Tiny thing, but that google calendar image/button does seem adrift the way you have it laid out. Maybe pull it up so it aligns with the "more..."

Also, the way the text is aligned makes it difficult to scan through the dates/times. Maybe reverse it so the dates/times come first, and the event name comes afterwards? (Ie, put the information that is a constant length to the left.) That way you could scan through the dates, the times, or the event names without needing to jump around as much visually.

[TheDahv]

That's really good feedback. I will definitely work that in to a new mockup.

I actually recently had another idea for a different layout with a "tile" theme. What I'm imagining should be more visually engaging and hopefully make things easier to understand. I'll try to throw that together soon.

[TheDahv]

Ok, here is an idea I've been kicking around in my head:

This would pull future events from Google Calendar. Clicking on each tile would bring up a little flyout that would have the event description and address.

Something that would need to happen before I go with this would be to get some photography help and generate some prettier photos that we had the rights to.

Aesthetically, the style pays homage to the "business cards" we have on the People page. It could probably use some sprucing up and I'd play with the vertical rhythm when I build this in CSS.

What do you guys think?

[TheDahv]

Actually, I can notify everybody in the @BeerAndCodeSeattle organization, can't I? :)

[TotallyGatsby]

I like it, though the alignment of the image/text seems a little off to me.

[TheDahv]

So here's another update. I'd rather find more visually stimulating photos with less text on it, but I have the photos taking up the lower 3/4 of each tile. How about that?

[DustinVenegas]

I like the photos. It really feels like if there's ever a "presents" or third location it will be very beneficial. Not to scope creep, but what about "tonight" and "tomorrow" banners that show up on the corners?

[TheDahv]

Sounds interesting. Can you fork that idea into its own issue so we can iterate on it a bit more? I'd like to see some mockups to see what you mean.