YUI Calendar

For a short while now I have been experimenting with the Yahoo! User Interface toolkit (also known as Yahoo! UI or simply YUI). It contains a hefty set of tools and framework pieces for quickly and easily doing some really cool web stuff using Javascript. It is not always the most intuitive tool to wield, but then again, it is something designed to do serious stuff, not just for beginners such as myself. With that in mind, I have worked towards creating an easy and simple way to implement the first YUI mechanism I have undertaken… a calendar!

I am not going to go through all the steps that are usually necessary to implement a YUI calendar, for that would defeat the purpose of this. I will simply say this: The default how-to’s include a considerable amount of code (which my method eliminates) and also contains no good solution for a pop-up calendar that only displays a single month. It shows how to use an in-line calendar, and even how to build a “2up” pop-up calendar (which displays 2 months at a time) but it was more difficult than it should have been to get a single month pop-up working. The solution described below requires 2 additional YUI files that have been customized in order to a) eliminate most of the in-page js YUI would have you create, and b) create a 1up cal.

The two additional files are a single javascript file and an additional css file.

The new js file, calendar-cfg.js, includes the listener the runs the init function at load time. The only reason I can think of for pulling the listener out and into the page itself is if you are passing variables into the init function, which this is not designed to do! I have not reflected this change in these files, but I have modified the init function so that a default date besides today can be passed in, if anyone is ever interested.

With all of the js in those files, the html to create a fully functional YUI calendar implementation contains only three parts: An input box for the date to go into, a link that calls the popup, and a div for the pop-up to live in. I will also add that the capability is present in the calendar-cfg.js file for the pop-up’s div to be created on the fly and dynamically inserted into the DOM tree, but for design purposes I decided to handle it manually. (But I have, in other places, created content on the fly with javascript: It’s sweet).

Now, the cool part: The customized function this calls is specifically designed to handle multiple calendar instances! Whereas the YUI how-to include lengthy code reduplication to make something like this happen, here you only need to re-create the HTML used above and send it a new argument at the highlighted places.

And now, an example.