Calendar and Date Picker Design Showcase

For a recent project I needed to create a month-at-a-glance date picker / calendar. Seeking some design inspiration, I took a look around the web to see how others had tackled this challenge.

As a result of this search I put together a gallery of calendar and date picker designs that I liked.

In Search of Inspiration

I had hoped to find some good examples from blogs, but it seems that this feature (providing a calendar view of entry dates for the current or previous months) has largely been discontinued.

And for good reason – did anyone ever use it as a way to browse someone’s blog? I never did.

Another source I had expected to provide some useful ideas were the date pickers used by travel sites. However, in the main I was disappointed by how poorly these tools were designed from a presentational standpoint. Yes, they functioned correctly, but did they have to look so ugly?

In fact, not all of the date pickers even worked properly. For example, try using Jet Blue’s in Firefox and see if you can navigate forward a month. Just try getting Continental’s to even open in Firefox!

Interestingly, some travel sites, such as Expedia and Virgin Atlantic, have decided to forgo the date picker altogether as a means for choosing your travel dates.

Why they would do this is beyond me – the date picker icon takes up very little screen real estate and is an invaluable tool if you’re not fixed to particular travel dates.

Let’s say you wanted to travel on a Saturday in September. Without a date picker you’d have no way of knowing what dates to choose without consulting another calendar, which you may not necessarily have to hand.

Success at Last

I had more success with the new breed of online calendar applications. The majority of them combined functionality with simple, clean, clear design.

Where I did strike a ‘goldmine’ of sorts was at a couple of sites where you can download user-created skins for various desktop applications. I found many different skins for a calendar app called Rainlender, some of which were extremely well designed.

Obviously, it’s not always possible to exactly translate the design of a desktop application to a web-based one. However, with a bit of creative coding I’m sure you could get pretty close.

And what I was looking for was inspiration, not to simply copy something someone else created.

The Gallery

So now I have a nice reference collection of good calendar designs. To save others the effort I had to go through in finding them, I’ve come up with a showcase of the ones I liked the most.

I’d love to find some more examples, so if anyone has any, please email me or let me know in the comments.