YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Calendar Control: Multi-Page Calendar

# Calendar Control: Multi-Page Calendar

The CalendarGroup control is a specialized version of the Calendar control which allows you to display multiple months (pages) together. This example demonstrates how the set up a CalendarGroup control which displays three months at a time.

The code is very similar to that used to setup a basic Calendar and in general, all of the Calendar examples can be applied to a CalendarGroup also.

View example in new window.

## 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.

<script> YAHOO.namespace("example.calendar"); YAHOO.example.calendar.init = function() { YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container", {PAGES:3}); YAHOO.example.calendar.cal1.render(); } YAHOO.util.Event.onDOMReady(YAHOO.example.calendar.init); </script>

## 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.

### Calendar Control Examples:

- Quickstart Tutorial
- Multi-Select Calendar
- Multi-Page Calendar
- Minimum/Maximum Dates
- Calendar Navigator
- Handling Calendar Events
- Calendar and Text Fields
- Calendar and Select Fields
- Using the Render Stack
- Popup Calendar - Basic
- Popup Calendar - Advanced
- Interval Selection Calendar
- Localization - Germany
- Localization - Japan
- Localization - Taiwan (Year Offset)
- Skinning The Calendar
- Calendar Plugin (included with examples for Rich Text Editor)
- Inline Cell Editing (included with examples for DataTable Control)
- Using YUI Loader to Load the Calendar Control (included with examples for YUI Loader Utility)
- Simple Calendar Menu Button (included with examples for Button Control)
- Calendar Menu Button with Date on Button Face (included with examples for Button Control)
- Simple Application (included with examples for Layout Manager)
- Complex Application (included with examples for Layout Manager)
- Simple Profiling (included with examples for ProfilerViewer Control)

### More Calendar Control Resources:

- User's Guide (external)
- API Documentation
- Cheat Sheet PDF (external)

Copyright © 2010 Yahoo! Inc. All rights reserved.

Privacy Policy - Terms of Service - Copyright Policy - Job Openings