YUI Calendar: Quickstart Tutorial

Setting up the Calendar

Calendar has three required dependencies: the YAHOO Global object, the Event Utility, and the DOM Collection.

In addition, the JavaScript and CSS files for Calendar must be included. You can see what the full list of included files looks like below. Please note that your file paths may vary depending on the location in which you installed the YUI libraries.

The only markup required by Calendar is an initial empty DIV into which the Calendar will be rendered. The DIV should have a unique id specified in the markup, which will match the id passed to the Calendar's constructor.

The markup for our simple Calendar example looks like this:

Finally, the Calendar can be instantiated in a script block, like this:

Note that to avoid using the global variable space, we are placing our example Calendar's variable into the YAHOO.example.calendar namespace (see line 2 above). For more information about namespacing, see the YAHOO Global object.

The constructor in our example (line 5) takes two arguments: the id to be used for our new Calendar's inner container DIV ("cal1" in this example) and the id of the inital container where we want to render the Calendar ("cal1Container" in this case).

We are also specifying that the init() function should not be executed until the window has loaded, using the Event Utility.