Multi-Layer (Vista-Inspired) Calendar
April 3rd, 2009 by JohnIn spite of its other flaws as an operating system, Windows Vista did get one thing right: the taskbar calendar. This little calendar provides a multi-level navigation interface, allowing you to easily move from an individual month up to the year containing that month, then up to the decade containing that year, and finally up to the century containing that decade (Powers of Ten, anyone?). It also gives you the ability to navigate forward and backward at each level. The visual animation is slick, providing a zoom effect when moving between levels, and a scrolling effect when moving left and right.
Windows Vista taskbar calendar (levels pictured separately)
A colleague suggested it might be useful to obtain this functionality in a Javascript widget for use in web applications. Googling a bit, I found a very cool Vista-like Ajax Calendar which captures the look and feel of the Vista calendar nicely. The only things I didn’t like about it were that it requires use of PHP and Ajax, and it is built on the MooTools library.
I decided to build a “Vista-inspired” calendar widget using Javascript alone, based on the YUI Calendar widget. The result is what I have titled the Multi-Layer Calendar.
This widget uses layers to mimic the leveled navigation of the Vista calendar. To use it, click on the heading to bring up the year layer, then again to bring up the decade layer. Click on the cells in the layers to move down. You can navigate left and right at any level.
The widget is purely Javascript-based, and is easy to set up with a few lines of code. After including the required files, in the HTML simply define a container (here using the default skin):
<div class="yui-skin-sam"> <div id="mylayercal"></div> </div>
Then simply instantiate the widget:
<script type="text/javascript">
var cal = new YAHOO.WHII.widget.MultiLayerCalendar('mylayercal');
cal.render();
</script>
The widget provides a handful of configuration options in addition to the standard options provided by the YUI Calendar. You can control the initially displayed layer, layer sizing, fading options, and more. You can also interact with it programmatically. For detailed information, see the detailed API documentation. You can download the source package here.
Due to implementation details of the YUI Calendar, I did not attempt to implement scrolling animation on left/right navigation. Also, I have not implemented a century layer as on the Vista calendar, but I may add that soon.
This type of calendar widget could be very useful for web applications in a number of contexts. For example, if you need to collect a user’s birth date in a form, you can let them easily drill down to the date instead of making them type in a text box or fiddle with drop-down selectors. Other examples include forms for searching for messages (or documents, images, etc.) by date. The possibilities go on…
Tags: calendar, calendar widget, javascript, layer, multi-layer calendar, taskbar, vista, windows, yui, yui calendar
