155 lines
No EOL
5.6 KiB
HTML
155 lines
No EOL
5.6 KiB
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
<title>Calendar inside a Container</title>
|
|
|
|
<style type="text/css">
|
|
/*margin and padding on body element
|
|
can introduce errors in determining
|
|
element position and are not recommended;
|
|
we turn them off as a foundation for YUI
|
|
CSS treatments. */
|
|
body {
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../build/fonts/fonts-min.css" />
|
|
<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-dom-event/yahoo-dom-event.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 class=" yui-skin-sam">
|
|
|
|
<h1>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>
|
|
|
|
<!--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 =============================== -->
|
|
|
|
</body>
|
|
</html> |