Create astonishing iCal-like calendars with jQuery

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?).

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.

Download the source files!

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…