John Peloquin’s Multi-layer Calendar

By YUI TeamApril 3rd, 2009

John Peloquin's multi-layer calendar navigator.

YUI contributor (and author of the Interval Selection Calendar example) John Peloquin of W. Hardy Interactive has released another excellent option for Calendar implementers: a layered navigation path for selecting years and months. The layered approach provides an alternative to the built-in navigator interface that ships with Calendar.

John describes the inspiration and thought process behind this implementation on his blog, where you’ll also find API documentation and source code.


  1. I personally don’t like this kind of navigation for a calendar. Reason being the more number of clicks. I asked a few friends, they also feel the same.

  2. @Gaurav Actually, it’s less clicks. You can still use the arrow buttons for simple back-and forth navigation between months. And certainly the year navigation could also be split again to be also forwardable with arrows. This navigation is for selecting bigger time spans. If you are in March want to select a date in December it’s 2 clicks instead of 9.

    An alternative (with the fewest clicks but with much data size and scrolling) would be three select fields. Not very fancy, but very fast for many applications, especially when combined with keyboard input.

  3. I really like this smart solution. The number of clicks is not always relevant. As long as it is more efficient & effective. Havey you tested this?

  4. Tracy Milburn said:
    April 13, 2009 at 1:38 pm

    Check out the calendar I created:

  5. Jay Wineinger said:
    May 14, 2009 at 7:30 pm

    I’m trying to use this instead of the standard Calendar with the example “Button Control: Calendar Menu Button with Date on Button Face”. The button renders fine but the calendar never shows. Should this multi-layer calendar be a drop-in replacement where ever the standard Calendar is used?

  6. John Peloquin said:
    May 18, 2009 at 11:30 am

    @Jay: the MLC does not support the older-style YUI constructor (where a second ID gets passed) which is used in that example. The code changes to get that example working with the MLC are minimal, here is a copy: