Launch: University Events Calendar

You probably noticed just about everything on the events calendar has changed, the design, structure, images and navigation but rest assure we migrated all the events into the new site. And even through their URL’s are different the old links will forward to their new location.

After three months of development we are finally ready to show off the first release of the new events calendar. Not only is the front end completely changed but we re-wrote and optimized every piece of back end code. Below is a breakdown of what changes we made.

New Wayne State University Events Calendar

Completely new look

The old calendar didn’t really have a design, it was more of a list of events by day with every event having the same prominence. Classes at the Rec and Fitness Center looked exactly like a FOCIS event which brings in world renowned speakers. Scanning down the page you couldn’t determine which events were large scale. Not to mention we made it 200% faster.

Featured upcoming events

Featured Events

With the new look also comes the ability to feature upcoming events on the homepage. This means weeks and months ahead of time an event can be promoted visually to gain larger attendance.

Community events

Right now a work in progress but the new calendar allows for events that are pulled in from other sources to be promoted as “Community Events”. It could be an art show at MOCAD or a band playing around campus. The goal is to let students know is going on between or after classes.


Reminders and deadlines

These have been pulled out of the main event listing and pulled to the top of the page to ensure the most visual weight. They can be collapsed by clicking the X in the top right of the box. The goal is it remind students when important deadlines are coming up separate from the event listing so they don’t get lost.

Event Details

Individual event additions

We added quite a bit when it comes to individual events. The first is the ability to upload a photo to promote the event. From there we also allow uploading of images and video from the event. These photos and video will create a gallery and be featured on the calendar homepage. Not to mention if an event happens every year the photos from previous events can be linked to the next years event.

If a student is interested or is attending an event they now have the ability to mark right on the event page. In turn the event will show how many people are interested or attending. It will not show the users information to the public or the event admin so users don’t have to worry about privacy concerns. But the end user will be able to keep a list of events they are interested in or attending.

We created a more intuitive URL structure. Before an event URL looked like this: From that you have no idea what day the event is on or what it is about. The new structure looks like this: It shows the year, month and day of the event and part of the title. A user will know a little about the event before clicking on a link.


RSVP’s for everyone

For the past year we have been rolling out the RSVP system to a limited number of users around campus and now it is ready to go mainstream. Anyone who has access to create an event will now be able to create an RSVP for that event. The RSVP can be fully customized with fields, order, examples, thank you information, limits and waiting lists. For the time being each RSVP will need to be submitted for approval before they go live, this will not only help us ensure the system is working correctly but also refine the calendar as we see trends. In the next few days we will be releasing screencasts to walk everyone through the system.

Calendar categorization

Instead of a drop down with the full list of ~160 calendars we have begun separating the calendars into categories. For example in addition to the Main Calendar we also have a list of the Schools & Colleges, Administrative, Departments, etc. This list is still a work in progress and we will continue to refine it each day.

Mini navigation calendar now functions as it should

On the old calendar navigating between days, weeks and months was cumbersome so we refined the top left calendar area to work as it should. It now includes previous/next month days for the first and last weeks. It also remembers where you were at as you move through pages and is over all easier to select date ranges.

Streamlined adding/editing events

The add an event form has been completely redone. The page is now split into sections, What, Where, Who and When. This will make is easier for both a first time user and seasoned veteran to add events with ease. In addition to the page structure change we also changed how you select multiple calendars. Before it was a clumsy multi-select box that forced the user to ctrl+click every calendar, you let us know how big of a pain this was, so we changed it to a simple checkbox of the calendars you have access to.

An overview of your events page

Most users who enter events enter more than one. Now when you login you are presented with an overview screen that in one glance show you “Your Recently Added Events”, “RSVPs”, “Images” and “Videos”. This way you can quickly edit something you were recently working on. We are planning to expand this page to also include statistics about your events or calendars.

Next steps

This is just the first phase in a larger plan to integrate events and event promotion throughout campus both online and on screens. The old calendar served its purpose but now students, faculty, staff and alumni are demanding more and we plan to deliver. Over the next few weeks we will be analyzing statistics on how the categories are being used and plan to make other modifications on the fly.

View the new calendar at:

Create a quick html form connected to a database

Having a small staff and enormous amounts of work everything we can do to speed up tasks we take advantage of. We are asked all the time to create html forms for sites, its the only way to get users information, from RSVP’s to request information. Recreating forms is time consuming especially since most feed into a database plus usually email someone also.

I created a screencast to show how we in the Web Communications department of Wayne State University create forms quickly, consistently and accessible using an open source framework I created and that we maintain. The framework is PHPSimpl and is hosted on Google Code, it is not meant to be a full blown MVC framework but more or less a helper for common tasks.

[flashvideo filename=”wp-content/uploads/2008/10/screencast-form.flv” height=”406″ width=”650″ image=”wp-content/uploads/2008/10/screencast-form.jpg” /]

This is the first screencast I have ever created so bear with me as I adjust to talking to a computer instead of a room full of people. Also ignore any technical issues which I am still trying to work through. I created it with just a Mac Book Pro, Snapz Pro and the internal mic, so the sound might not be the best.

The video is best viewed at full screen to see the detail in the text. I am playing with the flash video encoder options to find the optimal compression for quality and size. If anyone has any suggestions on the settings or screencast recorder feel free to comment.

In case you are wondering the form is being created on an Apache server running PHP5 and MySQL.

Hope you enjoy it and it helps you out.

Upgrade to WordPress 2.5

WordPress 2.5 was released today and we decided to do an upgrade to see how the upgrade process worked. WordPress is used by thousands of people online and with its simplicity and straightforwardness we assumed the upgrade process would be the same.

We were right, upgrade was a snap, backup, disable plugins, upload, run script, enable plugins and back to normal, took about 10 minutes. Agile software without all the clunky overhead. Fully extendable, customizable and powerful yet free and light.

After reviewing RFP’s from software companies trying to sell old school software to the university it is easy to tell what companies have adapted to the new development styles and which ones are holding tight to their old school software griping it for every dime they can.

Small teams creating the least amout of code to create the most amount of impact. With limited resources we have to adopt these principles or die. Every peice of code we create is part of a larger master plan, it has to be forward thinking and be useful to most of the unit around campus.

Great work WordPress and Happy Cog for the interface.

Redirection with ModRewrite and GET variables

Yesterday I started working on the redirect in the .htaccess for the homepage. The quick links on the homepage are redirected using ModRewrite then pushed through a php file that logs the action. This lets us monitor their usage so we can make sure the best possible links are available in this drop down. Here’s the code we were using in the .htaccess:

RewriteRule ^r/(.+)$$1

It was working well with normal URLs but when a URL was passed that had a query string, that query string was being truncated leaving the forwarding php with a URL that didn’t have a query string which then forwarded to the wrong location.After looking deeper into the options available with ModRewrite I found the [QSA] flag. This appends the query string back onto the URL when forwarding, which allowed me to modify the php file that was managing the forwarding so it could reattach the missing query string onto the end of the URL. So now the quick links will forward properly, even with complicated URLs.Here’s that same RewriteRule with the flag:

RewriteRule ^r/(.+)$$1 [QSA]

The PHP file gained this code which reattaches the query string back onto the end of the URL being passed in.

foreach($_GET as $key => $item){
  if($key != 'url'){
    $pieces[] = $key . ($item != '' ? '=' . $item : '');
$url = $_GET['url'];
if(sizeof($pieces) > 0){
  $url .= '?' . implode('&', $pieces);