Setting up the Calendar

Calendar can be displayed in a two-page format by using the CalendarGroup class. The dependencies (the YAHOO Global object, the Event Utility, and the DOM Collection) and markup structure are identical to the basic Calendar (outlined in the Quickstart Tutorial).

Having included the necessary script files and placed the requisite markup on the page, we can easily invoke a Dual Calendar display by creating a CalendarGroup instance (see line 5 below); in our previous examples, we've instantiated Calendar to show a single calendar month. CalendarGroup allows us to specify a n-month display. By default, a CalendarGroup instance will show two months at a time.

The only notable difference, illustrated in the code block below, is the use of the CalendarGroup class when instantiating the Calendar:

<script> YAHOO.namespace("example.calendar"); function init() { YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container"); YAHOO.example.calendar.cal1.render(); } YAHOO.util.Event.addListener(window, "load", init); </script>