Setting up the Calendar

Having included the necessary script files and placed the requisite markup on the page, we can easily invoke a multi page Calendar by creating a CalendarGroup (see line 5 below). In our previous examples, we've instantiated Calendar to show a single calendar month, whereas the CalendarGroup allows us to specify an n-month display.

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

By default, a CalendarGroup instance will show two months at a time but it can be configured to show more than two months by specifying the number of pages using the pages configuration property. In the example below, we'll set it to 3. When specifying the pages property, it should be the first property in the configuration object passed to the CalendarGroup constructor.

Configuration for This Example

You can load the necessary JavaScript and CSS for this example from Yahoo's servers. Click here to load the YUI Dependency Configurator with all of this example's dependencies preconfigured.