YUI Library Home

Site Search (YDN & YUIBlog):

# YUI Library Examples: Calendar Control: Calendar inside a Container

# Calendar Control: Calendar inside a Container

The default Calendar/CalendarGroup controls do not provide positioning or dragdrop support natively, as the Container family's Overlay control and its subclasses do.

This example demonstrates how the Calendar control can be wrapped in a Container (a Dialog control in this case) which allows you to leverage Container family features to position the Calendar relative to a context element, or if desired provide a draggable Calendar.

View example in new window.

Date:
Calendar

## Setting up the Calendar and Container

In this example, we leverage Dialog's `context` configuration property to position the Calendar relative to a "Calendar" button, and Dialog's `buttons` property to provide "Select" and "Cancel" buttons for the Calendar. We set the dialog's `draggable` property to `false` for this example, however if the application required it, we could also easily set `draggable` to `true` to get a draggable Calendar.

When creating a Calendar which is to be placed inside a Container control there are a few areas which require special attention.

1. Dialog Width

   When using Sam skin, Dialogs require a width to be set to avoid rendering problems with IE6 and IE7 quirks mode.

   The Calendar by default has no specific width defined (it's content defines how wide it is) but we set a width which is wide enough to allow for Calendar's default Sam skin implementation.

   dialog = new YAHOO.widget.Dialog("container", { context:["show", "tl", "bl"], buttons:[ {text:"Select", isDefault:true, handler: okHandler}, {text:"Cancel", handler: cancelHandler}], width:"16em", // Sam Skin dialog needs to have a width defined (7*2em + 2*1em = 16em). draggable:false, close:true });

   In order to allow the Calendar to take up the full width of the Dialog, we set the `.bd` padding to 0. We also over-ride the Calendar container's pixel based padding, in favor of ems, which allows us to set an `em` based width for the Dialog and have it resize automatically with text size changes.

   #container .bd {padding:0;} #cal {border:none;padding:1em}
2. Dialog Content Changes

   Whenever the contents of the Calendar are changed we fire Dialog's `changeContent` event so any of Dialog's rendered elements which need to be kept in sync are redrawn (such as the size of the shadow underlay for IE6/Safari2). We could optimize this, by checking for an actual change in dimensions before firing the `changeContent` event, using Calendar's `beforeRenderEvent` but the simpler approach is taken for the purposes of the example.

   The Calendar has `hide_blank_weeks` set to `true` to illustrate the fact that the shadow is resized when the height of the Calendar changes.

   calendar.renderEvent.subscribe(function() { // Tell Dialog it's contents have changed. dialog.fireEvent("changeContent"); });

   NOTE: Normally if you were to change the contents of the Dialog's header, body or footer elements (e.g. using `dialog.setBody(...)`), `changeContent` would be fired automatically, but in this case, we're changing the contents of the Calendar, and not the body element directly so we need to inform the Dialog that something inside the body changed.

3. Handling Calendar's Float

   CSS is used to clear Calendar's float:left and allow the Dialog body element to wrap the Calendar.

   #container .bd:after {content:".";display:block;clear:left;height:0;visibility:hidden;}
4. Double Iframe Shims

   Calendar's `iframe` property is set to `false` since the Dialog already provides iframe shim support and we want to avoid duplicating shims for performance reasons.

5. Workaround IE's `border-collapse:collapse` Issue

   IE has a known issue related to collapsed table borders remaining visible even though the table's containing element has its `visibility` set to `hidden` (See Container known issues).

   Since the Sam skin Calendar uses `border-collapse:collapse` and the Dialog is hidden using `visibility:hidden`, we need to use the workaround mentioned in the known issues section above, to make sure Calendar's table borders get hidden when the Dialog is hidden.

   // Using dialog.hide() instead of specifying visible:false in the constructor config options // is a workaround for an IE6/7 container known issue with border-collapse:collapse. dialog.hide();

As a side note, this example also shows how you can use the simpler version of the Calendar constructor, providing only the container id (available as of 2.4.0) and also how you can use Calendar's locale properties to create long date strings from a JavaScript Date object.

### 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
- Localization - Germany
- Localization - Japan
- Calendar inside a Container
- Interval Selection Calendar
- 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 (beta))
- 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 (beta))

### More Calendar Control Resources:

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

Copyright © 2008 Yahoo! Inc. All rights reserved.

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