DeCal: A Web Design / Development Event Calendar

kevinpotts · 2010-04-02 02:29:17

Today I launched DeCal, a new extension to my site graphicpush. In essence, it is a calendar of conferences and workshops for web design and web development professionals. It is built with 100% Grade-A free range organic Textpattern.

The whole architecture is not that fancy. smd_calendar is an anchor plugin for sure, but I am also using arc_twitter, msv_if_custom_article_date, tru_tags and wet_haystack to expand the search functionality, plus a few admin-side bits to make my life easier. jQuery is used for the pop-up windows, and also for the calendar dropdowns attached to the date fields on the submit a new event page. The two pieces of heavy lifting that went into the development were the copious conditionals around each event’s 12 custom fields, plus a hand-rolled RSS 2.0 feed for displaying future-dated content. I am trying to find time to write a tutorial on the second piece because it took awhile to perfect, and might be of use to others publishing future-dated stuff.

So please give me feedback on the whole thing: functionality, design, code, whatever. Since I built it for myself (in just over a week), it may be missing a tooth here or there. As I mentioned in my announcement, I will be looking to add print styles and a mobile version soonish. Also need a proper 404 page. But don’t tell anyone else.

pieman · 2010-04-02 09:52:52

Great work Kevin. Easy on the eye, clean and functional. Very smooth :o)

Some thoughts and suggestions:

Once I’d shifted through a few pages I couldn’t figure out how to return to current month (until I spotted the ‘full calendar’ link). Maybe use the logo for that as well?

Using a modal window (nicely done of course) for the event details means there aren’t any bookmarkable permalinks for each event – unless you arrive at an article page via RSS. Might be some value to adding the permlink URL to the event overlay? Stef’s smd_short_url might come in handy if you do that.

Links to category pages are bit buried – I only discovered them after doing a tag search.

Some weird behaviour in Mac/FF3.6.2 – when I mouse over the modal window I get scrollbars on both axes (axis + axis = axes?). Mouse out and they disappear.

While I was rooting around trying to figure out how you make vevents export to iCal as ‘all day’ events (you just don’t specify a start and end time?) I spotted a couple of errors:

<span class="region">CA</abbr>

</div> <!-- end .vcard -->
			</h3><div id="ical">

I was also wondering if it’d be possible to subscribe in iCal – I tried http://h2vx.com/ics/decal.graphicpush.com but the calendar doesn’t seem to contain any events. Not sure if there’s anything you can do about that though – I’ve lost weeks trying to get those things to work.

hope that’s helpful

Stu

kevinpotts · 2010-04-02 13:16:38

Stu — Thanks for your thoughts. The design around the modal window was deliberate; the goal of the site is to really drive people away from DeCal to the event sites. However, each event does have a permalink, such as http://decal.graphicpush.com/event/an-event-apart-minneapolis-2010 in case someone comes from a search engine.

As for the iCal … what a pain. I did fix those HTML errors (thank you). I think I’m going to try to implement something like the “Add to my calendar” link on the Big Omaha registration page. The .ics format is very annoying. I wish I was smart enough to build a better conversion tool.

pieman · 2010-04-02 13:33:38

kevinpotts wrote:

As for the iCal … what a pain. I did fix those HTML errors (thank you). I think I’m going to try to implement something like the “Add to my calendar” link on the Big Omaha registration page. The .ics format is very annoying. I wish I was smart enough to build a better conversion tool.

Oh, maybe I confused you there. The add this single event to calendar links you have there work fine for me:
eg. http://h2vx.com/ics/http://decal.graphicpush.com/event/designing-for-mobile-with-css3

But H2VX also enables you to subscribe to a calendar – so you can set iCal (or Google Calendar etc) to pick up new content. That’s the one I couldn’t get to work, but I figured out why – I was passing it the full calendar view. I just tried with the list view and bingo, it works a treat.

Try this one: webcal://h2vx.com/ics/decal.graphicpush.com/list

The Big Omaha implementation is nice isn’t it? Letting people choose their calendar makes it a lot more obvious that having to assume (or explain) that it will only work in certain apps.

jakob · 2010-04-02 16:07:50

Looks great, Kevin. What a great implementation of smd_calendar!

One further idea. From the source code it looks like you’re using zem_contact_reborn to collect submitted entries. I guess you get that as a mail and then hammer the infos into txp manually. You could shortcut that process by using mem_moderation and mem_form to pass submissions to a moderation queue and from there directly to txp articles. The form setup is very similaralbeit much simpler event form application. Maybe that helps streamline things further.

Thanks for the pointer for h2vx. I’d previously used the converter Brian Suda offered on his own site for converting microformats to ical events. That one was a bit erratic at times, but this looks like a more official rendition of it.

JanDW · 2010-09-07 06:25:07

Hi Kevin,

…plus a hand-rolled RSS 2.0 feed for displaying future-dated content. I am trying to find time to write a tutorial on the second piece because it took awhile to perfect, and might be of use to others publishing future-dated stuff.

Yep, Indeed! :)

I’m wondering how I can get the <pubDate> for each event set to the day I posted the article.
Since smd_calendar uses posted and expires as begin and end dates of the event, I was wondering how you got the right time in your feed… since it can’t be $thisarticle['posted']

Really nice smd_calendar implementation BTW!

Last edited by JanDW (2010-09-07 06:26:59)

JanDW · 2010-09-09 02:52:00

Or if anybody else wants to chime in…

JanDW · 2010-09-09 06:00:51

Ok I got it – <txp:modified format="rfc822" gmt="1" /> that’s what I needed.

Textpattern CMS

Textpattern CMS support forum

#1 2010-04-02 02:29:17

DeCal: A Web Design / Development Event Calendar

#2 2010-04-02 09:52:52

Re: DeCal: A Web Design / Development Event Calendar

#3 2010-04-02 13:16:38

Re: DeCal: A Web Design / Development Event Calendar

#4 2010-04-02 13:33:38

Re: DeCal: A Web Design / Development Event Calendar

#5 2010-04-02 16:07:50

Re: DeCal: A Web Design / Development Event Calendar

#6 2010-09-07 06:25:07

Re: DeCal: A Web Design / Development Event Calendar

#7 2010-09-09 02:52:00

Re: DeCal: A Web Design / Development Event Calendar

#8 2010-09-09 06:00:51

Re: DeCal: A Web Design / Development Event Calendar

Board footer