YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Calendar Control: Popup Calendar - Basic

# Calendar Control: Popup Calendar - Basic

Calendar can be positioned absolutely to make it float above the document. This example shows how to setup a "Popup" Calendar and uses a couple of configuration properties specifically provided for use when the Calendar is floated above other content.

If you're familiar with the YUI Container family, it's worth noting that the Calendar does not extend the Overlay control, but provides a couple of similar configuration properties.

View example in new window.

## Setting up the Calendar

In order to support a popup style Calendar which floats above other content on the page, Calendar provides a few extra configuration properties specifically geared towards popup Calendars. Those properties are:

- close - Indicates whether or not a close icon should be displayed in the Calendar. Defaults to false.
- iframe - Indicates whether or not an IFRAME shim should be placed under the Calendar to avoid the bleed-through of "select" elements in IE6 and below. Defaults to true for IE6 and below, when the Calendar is positioned absolutely or relatively.

In addition, the Calendar provides show and hide methods for displaying the Calendar or hiding it from view. This is achieved by setting the Calendar's outer container to display:none.

In this tutorial, we will create a Calendar and a CalendarGroup which can be displayed by clicking a corresponding button. First, the Calendar and CalendarGroup are instantiated using some of the new properties that were introduced in this tutorial.

YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container", { pages:2, title:"Please make a selection:", close:true } ); YAHOO.example.calendar.cal1.render(); // Listener to show the two page Calendar when the button is clicked YAHOO.util.Event.addListener("show2up", "click", YAHOO.example.calendar.cal1.show, YAHOO.example.calendar.cal1, true); YAHOO.example.calendar.cal2 = new YAHOO.widget.Calendar("cal2","cal2Container", { title:"Choose a date:", close:true } ); YAHOO.example.calendar.cal2.render(); // Listener to show the single page Calendar when the button is clicked YAHOO.util.Event.addListener("show1up", "click", YAHOO.example.calendar.cal2.show, YAHOO.example.calendar.cal2, true);

Next, we place the markup for the buttons that will invoke the Calendar and CalendarGroup, along with the container div elements that are required for each.

<button id="show2up" type="button">Show CalendarGroup</button> <div id="cal1Container"></div> <button id="show1up" type="button">Show Calendar</button> <div id="cal2Container"></div>

Using CSS, the calendar containers are positioned absolutely to place them above other content in the document and given a z-index so that the order in which they are stacked is defined explicitly if they're rendered on top of each other (we'll place the CalendarGroup above the single page Calendar).

#cal1Container { display:none; position:absolute; left:10px; top:10px; z-index:2} #cal2Container { display:none; position:absolute; left:10px; top:300px; z-index:1}

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