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.

6 thoughts to “Calendar and Date Picker Design Showcase”

  1. Interestingly I had to search for a solution to this for a client just a few hours ago. The more important aspect was the functionality as the client isn’t really paying enough to fuss over the looks. Still, it’s nice to see a sampling of what’s out there.

  2. *Gabe* – I hear what you’re saying. However, I’ve always said that it doesn’t have to take any longer to design something that looks nice than it does to design something that looks ugly.
    *Sholom* – I actually included a Yahoo! calendar in my showcase. It’s clearly based on the default YUI calendar, just styled slightly differently.

  3. I needed a calendar for a client just recently and I faced the same problems. There are not many nice ones who work as well… And – on top of that – I needed a calendar that allowed me to pick a period of dates, i.e. not just a start and end date, but Sunday-Sunday for example. I found one in the end and my client, who runs a hotel, is really happy that visitors can now select the duration of the stay rather than just start / end date.

  4. Hi, i search for the code from the google calendar… Is there anybody who can give me this code? i can’t extract it from the website….
    Would be nice if you help me – thanks!!!

  5. Hi, my calendar can easily be styled any way using CSS.
    Clean Calendar ( Javascript / CSS / DHTML )
    Attach the calendar to as many text fields as you want! (simply add a class)
    Style any aspect of the calendar with CSS!
    Object oriented Javascript.
    No images needed and the calendar still looks very nice.
    Browser Support:
    Tested on IE6+, FF2, Opera, Netscape, AOL Browser, Konqueror.

Comments are closed.