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.
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:
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.
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.
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).
All YUI 2.x users should review the YUI 2.8.2 security bulletin, which discusses a vulnerability present in YUI 2.4.0-2.8.1.