Ciao, sono Stefano Verna, software engineer e cofounder di weLaika.
Mi interesso di nuove tecnologie web e mobile, TDD e metodi agili di sviluppo.
Lavoro su diversi progetti open, tra cui DownThemAll!
According to my web designer experience, one of the most common requests from clients when it comes to Wordpress personalization, is to add a basic event calendar to their website.
Finding a good place to position a big table like a calendar within your Wordpress template is always a taught work. In addition, the <table> tag itself is often quite difficult to style in a good way.
One of the calendar solution that I came out with and that I'm particulary proud of is the one I built inside the freshly launched Graham Watson for President website.
I wanted it to be similar to the iPhone Calendar application (or, if you want, to the little calendar on the left bottom corner in iCal). And I also wanted to keep the code as little and sweet as possible (we don't like maintenance, do we?).
Here's the simple HTML code I used, the simplest you could ever come up with:
All the magic takes place with some ninja CSS:
Please note a couple of things here, as it's the trickiest part:
Make your images seamless. Draw only the top and right border of the cells inside the image: neighbour cells will continue the pattern. Then add the bottom and left border to the table via CSS to complete the work.
Use a single image for all the graphics whenever is possible to decrease the download speed time (just a single TCP three-way-handshake to manage, a single Apache request to be answered by your server, a single PNG header overhead to be downloaded).
In addition to the plain calendar structure, we obviously also want the events description to show up on mouse hover. To do that, just add this block inside the calendar cells:
And use the beautiful, handy, lightweight Coda-like effect for jQuery to bring it to life (how I love jQuery?)
This is the CSS code used to style the popup div:
Please note how nice the box-shadow CSS property is when applied to the popup... unfortunately, this CSS3 property is still only implemented in WebKit browsers (Safari, Google Chrome), but more of them are about to support it.
And... that's it. Simple and sweet, as we wanted. Obviously, you'll have to properly configure your preferred Wordpress plugin to output a code like the one I showed you, but that's the boring part of the lesson and I'll skip it :) Instead, let me just add a note...
Choosing the right Wordpress Plugin
There are plenty of pretty good Wordpress calendar plugins around to facilitate your backend work. I can tell you I tried them all, and the one that convinced me the most was Event Calendar.
With Event Calendar you can add a countless number of events to any post or page directly within the New and Edit page, there's a lot of great functions you can use to freely tweak the event-browsing experience within your PHP template -- but some work still should be done in this direction -- it's AJAX ready and the plugin itself is already localized in 19 languages.
Hope you've enjoyed the tut! I'll try to reply to your question in my free time :)