webgui/www/extras/yui/examples/calendar/calcontainer.html
2008-03-25 16:13:25 +00:00

317 lines
23 KiB
HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>YUI Library Examples: Calendar Control: Calendar inside a Container</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >
<style>
/*Supplemental CSS for the YUI distribution*/
#custom-doc { width: 95%; min-width: 950px; }
#pagetitle {background-image: url(../../assets/bg_hd.gif);}
#pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}
</style>
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<!--Script and CSS includes for YUI dependencies on this page-->
<link rel="stylesheet" type="text/css" href="../../build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="../../build/container/assets/skins/sam/container.css" />
<link rel="stylesheet" type="text/css" href="../../build/calendar/assets/skins/sam/calendar.css" />
<script type="text/javascript" src="../../build/yahoo/yahoo-min.js"></script>
<script type="text/javascript" src="../../build/dom/dom-min.js"></script>
<script type="text/javascript" src="../../build/event/event-min.js"></script>
<script type="text/javascript" src="../../build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="../../build/element/element-beta-min.js"></script>
<script type="text/javascript" src="../../build/button/button-min.js"></script>
<script type="text/javascript" src="../../build/container/container-min.js"></script>
<script type="text/javascript" src="../../build/calendar/calendar-min.js"></script>
<!--begin custom header content for this example-->
<style type="text/css">
/* Clear calendar's float */
#container .bd:after {content:".";display:block;clear:left;height:0;visibility:hidden;}
/* Have calendar squeeze upto bd bounding box */
#container .bd {padding:0;}
/* Remove calendar's border and set padding in ems instead of px, so we can specify an width in ems for the container */
#cal {border:none;padding:1em}
/* Datefield look/feel */
.datefield {
position:relative;
top:10px;
left:10px;
white-space:nowrap;
border:1px solid black;
background-color:#eee;
width:25em;
padding:5px;
}
.datefield input,
.datefield button,
.datefield label {vertical-align:middle}
.datefield label {font-weight:bold}
.datefield input {width:15em}
.datefield button {padding:0 5px 0 5px; margin-left:2px;}
.datefield button img {padding:0;margin:0;vertical-align:middle}
/* Example box */
.box {
position:relative;
height:30em;
}
</style>
<!--end custom header content for this example-->
</head>
<body id="yahoo-com" class=" yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
<div id="ygunav">
<p><em>
<a href="http://developer.yahoo.com">Yahoo! Developer Network Home</a> <i> - </i>
<a href="http://help.yahoo.com/help/us/ysearch">Help</a>
</em>
</p>
<form action="http://search.yahoo.com/search"><label for="ygsp">YDN Site Search</label>
<input name="vs" type="hidden" value="developer.yahoo.com">
<input name="fr" type="hidden" value="ush-myweb">
<input id="ygsp" name="va" size="22">
<input type="submit" value="Search" class="ygbt"></form>
</div>
<div id="ygma"><a href="../../"><img src="../../assets/yui.gif" border="0" width="378" height="28"></a></div>
<div id="pagetitle"><h1>YUI Library Examples: Calendar Control: Calendar inside a Container</h1></div>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
<div class="yui-ge">
<div class="yui-u first example">
<div class="promo">
<h1>Calendar Control: Calendar inside a Container</h1>
<div class="exampleIntro">
<p>The default Calendar/CalendarGroup controls do not provide positioning or dragdrop support natively, as the Container family's Overlay control and its subclasses do.</p>
<p>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.</p>
</div>
<div class="example-container module ">
<div class="hd exampleHd">
<p class="newWindowButton yui-skin-sam"><!--<span id="newWindowLinkx"><span class="first-child">--><a href="calcontainer_clean.html" target="_blank">View example in new window.</a><!--</span></span>-->
</div> <div id="example-canvas" class="bd">
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<script type="text/javascript">
YAHOO.util.Event.onDOMReady(function(){
var dialog, calendar;
calendar = new YAHOO.widget.Calendar("cal", {
iframe:false, // Turn iframe off, since container has iframe support.
hide_blank_weeks:true // Enable, to demonstrate how we handle changing height, using changeContent
});
function okHandler() {
if (calendar.getSelectedDates().length > 0) {
var selDate = calendar.getSelectedDates()[0];
// Pretty Date Output, using Calendar's Locale values: Friday, 8 February 2008
var wStr = calendar.cfg.getProperty("WEEKDAYS_LONG")[selDate.getDay()];
var dStr = selDate.getDate();
var mStr = calendar.cfg.getProperty("MONTHS_LONG")[selDate.getMonth()];
var yStr = selDate.getFullYear();
YAHOO.util.Dom.get("date").value = wStr + ", " + dStr + " " + mStr + " " + yStr;
} else {
YAHOO.util.Dom.get("date").value = "";
}
this.hide();
}
function cancelHandler() {
this.hide();
}
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
});
calendar.render();
dialog.render();
// Using dialog.hide() instead of visible:false is a workaround for an IE6/7 container known issue with border-collapse:collapse.
dialog.hide();
calendar.renderEvent.subscribe(function() {
// Tell Dialog it's contents have changed, Currently used by container for IE6/Safari2 to sync underlay size
dialog.fireEvent("changeContent");
});
YAHOO.util.Event.on("show", "click", dialog.show, dialog, true);
});
</script>
<div class="box">
<div class="datefield">
<label for="date">Date: </label><input type="text" id="date" name="date" value="" /><button type="button" id="show" title="Show Calendar"><img src="assets/calbtn.gif" width="18" height="18" alt="Calendar" ></button>
</div>
<div id="container">
<div class="hd">Calendar</div>
<div class="bd">
<div id="cal"></div>
</div>
</div>
</div>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</div>
</div>
</div>
<h2 class="first">Setting up the Calendar and Container</h2>
<p>
In this example, we leverage Dialog's <code>context</code> configuration property to position the Calendar relative to a "Calendar" button, and Dialog's <code>buttons</code> property to provide "Select" and "Cancel" buttons for the Calendar. We set the dialog's <code>draggable</code> property to <code>false</code> for this example, however if the application required it, we could also easily set <code>draggable</code> to <code>true</code> to get a draggable Calendar.
</p>
<p>When creating a Calendar which is to be placed inside a Container control there are a few areas which require special attention.</p>
<ol>
<li>
<strong>Dialog Width</strong>
<p>When using Sam skin, Dialogs require a width to be set to avoid rendering problems with IE6 and IE7 quirks mode.</p>
<p>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.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
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
});
</textarea>
<p>In order to allow the Calendar to take up the full width of the Dialog, we set the <code>.bd</code> padding to 0.
We also over-ride the Calendar container's pixel based padding, in favor of ems, which allows us to set an <code>em</code> based width for
the Dialog and have it resize automatically with text size changes.</p>
<textarea name="code" class="CSS" cols="60" rows="1">
#container .bd {padding:0;}
#cal {border:none;padding:1em}
</textarea>
</li>
<li>
<strong>Dialog Content Changes</strong>
<p>Whenever the contents of the Calendar are changed we fire Dialog's <code>changeContent</code> event so any of Dialog's rendered elements which need to be kept in sync are redrawn <em>(such as the size of the shadow underlay for IE6/Safari2)</em>. We could optimize this, by checking for an actual change in dimensions before firing the <code>changeContent</code> event, using Calendar's <code>beforeRenderEvent</code> but the simpler approach is taken for the purposes of the example.<p>The Calendar has <code>hide_blank_weeks</code> set to <code>true</code> to illustrate the fact that the shadow is resized when the height of the Calendar changes.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
calendar.renderEvent.subscribe(function() {
// Tell Dialog it's contents have changed.
dialog.fireEvent("changeContent");
});
</textarea>
<p><strong>NOTE:</strong> Normally if you were to change the contents of the Dialog's header, body or footer elements (e.g. using <code>dialog.setBody(...)</code>), <code>changeContent</code> 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.</p>
</li>
<li>
<strong>Handling Calendar's Float</strong>
<p>CSS is used to clear Calendar's float:left and allow the Dialog body element to wrap the Calendar.</p>
<textarea name="code" class="CSS" cols="60" rows="1">
#container .bd:after {content:".";display:block;clear:left;height:0;visibility:hidden;}
</textarea>
</li>
<li><strong>Double Iframe Shims</strong>
<p>Calendar's <code>iframe</code> property is set to <code>false</code> since the Dialog already provides iframe shim support and we want to avoid duplicating shims for performance reasons.</p>
</li>
<li><strong>Workaround IE's <code>border-collapse:collapse</code> Issue</strong>
<p>IE has a known issue related to collapsed table borders remaining visible even though the table's containing element has its <code>visibility</code> set to <code>hidden</code> (See <a href="http://developer.yahoo.com/yui/container/#knownissues">Container known issues</a>).</p>
<p>Since the Sam skin Calendar uses <code>border-collapse:collapse</code> and the Dialog is hidden using <code>visibility:hidden</code>, 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.</p>
<textarea name="code" class="JScript" cols="60" rows="1">
// 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();
</textarea>
</li>
</ol>
<p>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.</p>
</div>
<div class="yui-u">
<div id="examples">
<h3 class='firstContent'>Calendar Control Examples:</h3>
<div id="exampleToc">
<ul>
<li><a href='../calendar/quickstart.html'>Quickstart Tutorial</a></li><li><a href='../calendar/multi.html'>Multi-Select Calendar</a></li><li><a href='../calendar/calgrp.html'>Multi-Page Calendar</a></li><li><a href='../calendar/minmax.html'>Minimum/Maximum Dates</a></li><li><a href='../calendar/calnavigator.html'>Calendar Navigator</a></li><li><a href='../calendar/events.html'>Handling Calendar Events</a></li><li><a href='../calendar/formtxt.html'>Calendar and Text Fields</a></li><li><a href='../calendar/formsel.html'>Calendar and Select Fields</a></li><li><a href='../calendar/render.html'>Using the Render Stack</a></li><li><a href='../calendar/popup.html'>Popup Calendar</a></li><li><a href='../calendar/germany.html'>Localization - Germany</a></li><li><a href='../calendar/japan.html'>Localization - Japan</a></li><li class='selected'><a href='../calendar/calcontainer.html'>Calendar inside a Container</a></li><li><a href='../calendar/calskin.html'>Skinning The Calendar</a></li><li><a href='../editor/cal_editor.html'>Calendar Plugin (included with examples for Rich Text Editor (beta))</a></li><li><a href='../datatable/dt_cellediting.html'>Inline Cell Editing (included with examples for DataTable Control (beta))</a></li><li><a href='../yuiloader/yl-basic.html'>Using YUI Loader to Load the Calendar Control (included with examples for YUI Loader Utility (beta))</a></li><li><a href='../button/btn_example09.html'>Calendar Menu Button (included with examples for Button Control)</a></li><li><a href='../button/btn_example10.html'>Calendar Menu Button (included with examples for Button Control)</a></li><li><a href='../layout/calrte_layout.html'>Simple Application (included with examples for Layout Manager (beta))</a></li><li><a href='../layout/adv_layout.html'>Complex Application (included with examples for Layout Manager (beta))</a></li><li><a href='../profilerviewer/pv-basic.html'>Simple Profiling (included with examples for ProfilerViewer Control (beta))</a></li> </ul>
</div>
</div>
<div id="module">
<h3>More Calendar Control Resources:</h3>
<ul>
<li><a href="http://developer.yahoo.com/yui/calendar/">User's Guide</a> (external)</li>
<li><a href="../../docs/module_calendar.html">API Documentation</a></li>
<li><a href="http://yuiblog.com/assets/pdf/cheatsheets/calendar.pdf">Cheat Sheet PDF</a> (external)</li></ul>
</div>
</div>
</div>
</div>
</div>
<div class="yui-b" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
<ul>
<li class="sect first">Yahoo! UI Library</li><li class="item"><a title="The Yahoo! User Interface Library (YUI)" href="http://developer.yahoo.com/yui/">Home (external)</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUIBlog (external)</a></li><li class="item"><a title="The Yahoo! Group YDN-JavaScript hosts the YUI community forum" href="http://tech.groups.yahoo.com/group/ydn-javascript/">YUI Discussion Forum (external)</a></li><li class="item"><a title="The YUI Library can be downloaded from SourceForge" href="http://sourceforge.net/projects/yui/">YUI on Sourceforge (external)</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../docs/index.html">API Documentation</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">Functional Examples</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License (external)</a></li><li class="sect">YUI Functional Examples</li><li class="item"><a title="The YUI Animation Utility - Functional Examples" href="../../examples/animation/index.html">Animation</a></li><li class="item"><a title="The YUI AutoComplete Control - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete</a></li><li class="item"><a title="The YUI Browser History Manager - Functional Examples" href="../../examples/history/index.html">Browser History Manager</a></li><li class="item"><a title="The YUI Button Control - Functional Examples" href="../../examples/button/index.html">Button</a></li><li class="selected "><a title="The YUI Calendar Control - Functional Examples" href="../../examples/calendar/index.html">Calendar</a></li><li class="item"><a title="The YUI Charts Control - Functional Examples" href="../../examples/charts/index.html">Charts (experimental)</a></li><li class="item"><a title="The YUI Color Picker Control - Functional Examples" href="../../examples/colorpicker/index.html">Color Picker</a></li><li class="item"><a title="The YUI Cookie Utility - Functional Examples" href="../../examples/cookie/index.html">Cookie (beta)</a></li><li class="item"><a title="The YUI Connection Manager (AJAX) - Functional Examples" href="../../examples/connection/index.html">Connection Manager</a></li><li class="item"><a title="The YUI Container Family (Module, Overlay, Tooltip, Panel, Dialog, SimpleDialog) - Functional Examples" href="../../examples/container/index.html">Container</a></li><li class="item"><a title="The YUI DataTable Control - Functional Examples" href="../../examples/datatable/index.html">DataTable (beta)</a></li><li class="item"><a title="The YUI Dom Collection - Functional Examples" href="../../examples/dom/index.html">Dom</a></li><li class="item"><a title="The YUI Drag &amp; Drop Utility - Functional Examples" href="../../examples/dragdrop/index.html">Drag &amp; Drop</a></li><li class="item"><a title="The YUI Event Utility - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="The YUI Get Utility - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="The YUI ImageCropper Control - Functional Examples" href="../../examples/imagecropper/index.html">ImageCropper (beta)</a></li><li class="item"><a title="The YUI ImageLoader Utility - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="The YUI JSON Utility - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="The YUI Layout Manager - Functional Examples" href="../../examples/layout/index.html">Layout Manager (beta)</a></li><li class="item"><a title="The YUI Logger Control - Functional Examples" href="../../examples/logger/index.html">Logger</a></li><li class="item"><a title="The YUI Menu Control - Functional Examples" href="../../examples/menu/index.html">Menu</a></li><li class="item"><a title="The YUI Profiler Utility - Functional Examples" href="../../examples/profiler/index.html">Profiler (beta)</a></li><li class="item"><a title="The YUI ProfileViewer Control - Functional Examples" href="../../examples/profilerviewer/index.html">ProfilerViewer (beta)</a></li><li class="item"><a title="The YUI Resize Utility - Functional Examples" href="../../examples/resize/index.html">Resize (beta)</a></li><li class="item"><a title="The YUI Rich Text Editor - Functional Examples" href="../../examples/editor/index.html">Rich Text Editor (beta)</a></li><li class="item"><a title="The YUI Selector Utility - Functional Examples" href="../../examples/selector/index.html">Selector (beta)</a></li><li class="item"><a title="The YUI Slider Control - Functional Examples" href="../../examples/slider/index.html">Slider</a></li><li class="item"><a title="The YUI TabView Control - Functional Examples" href="../../examples/tabview/index.html">TabView</a></li><li class="item"><a title="The YUI TreeView Control - Functional Examples" href="../../examples/treeview/index.html">TreeView</a></li><li class="item"><a title="The YUI Uploader Utility - Functional Examples" href="../../examples/uploader/index.html">Uploader (experimental)</a></li><li class="item"><a title="The YUI YAHOO Global Object - Functional Examples" href="../../examples/yahoo/index.html">YAHOO Global Object</a></li><li class="item"><a title="The YUI Loader Utility - Functional Examples" href="../../examples/yuiloader/index.html">YUI Loader (beta)</a></li><li class="item"><a title="The YUI Test Utility - Functional Examples" href="../../examples/yuitest/index.html">YUI Test</a></li><li class="item"><a title="YUI Reset CSS - Functional Examples" href="../../examples/reset/index.html">Reset CSS</a></li><li class="item"><a title="YUI Base CSS - Functional Examples" href="../../examples/base/index.html">Base CSS</a></li><li class="item"><a title="YUI Fonts CSS - Functional Examples" href="../../examples/fonts/index.html">Fonts CSS</a></li><li class="item"><a title="YUI Grids CSS - Functional Examples" href="../../examples/grids/index.html">Grids CSS</a></li><li class="sect">YUI Articles on the YUI Website</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Reporting Bugs and Making Feature Requests for YUI Components" href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests (external)</a></li><li class="item"><a title="Serve YUI source files from Yahoo! -- free, fast, and simple" href="http://developer.yahoo.com/yui/articles/hosting/">Serving YUI Files from Yahoo! (external)</a></li><li class="item"><a title="Best practices for working with web services while protecting user privacy" href="http://developer.yahoo.com/security/">Security Best Practices (external)</a></li></ul>
</div>
</div>
</div><!--closes bd-->
<div id="ft">
<p class="first">Copyright &copy; 2008 Yahoo! Inc. All rights reserved.</p>
<p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> -
<a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> -
<a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> -
<a href="http://careers.yahoo.com/">Job Openings</a></p>
</div>
</div>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>
<script src='../../assets/YUIexamples.js'></script>
</body>
</html>