79 lines
No EOL
3.5 KiB
HTML
79 lines
No EOL
3.5 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>YUI Calendar - Dual Calendars (YUI Library)</title>
|
|
|
|
<link type="text/css" rel="stylesheet" href="../../../build/reset-fonts-grids/reset-fonts-grids.css">
|
|
|
|
<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
|
|
<link type="text/css" rel="stylesheet" href="../assets/style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div id="doc3" class="yui-t4">
|
|
<div id="hd">
|
|
<a href="http://developer.yahoo.com/yui" id="logo"><div></div></a>
|
|
<h1>YUI Calendar: Dual Calendars</h1>
|
|
</div>
|
|
|
|
<div id="bd">
|
|
|
|
<div id="toc" class="yui-b">
|
|
<ul>
|
|
<li class="sect"><a href="../index.html">YUI Calendar: Tutorials</a></li>
|
|
|
|
<li class="item"><a href="../quickstart/1.html">Quickstart Tutorial</a></li>
|
|
<li class="item"><a href="../multi/1.html">Multi-Select Calendar</a></li>
|
|
<li class="item selected"><a href="1.html">Dual Calendars</a></li>
|
|
<li class="child active"><a href="1.html">Setting up the Calendar</a></li>
|
|
<li class="child"><a href="2.html">Functional Example</a></li>
|
|
<li class="item"><a href="../minmax/1.html">Minimum / Maximum Dates</a></li>
|
|
<li class="item"><a href="../events/1.html">Handling Events</a></li>
|
|
<li class="item"><a href="../formtxt/1.html">Calendar & Text Fields</a></li>
|
|
<li class="item"><a href="../formsel/1.html">Calendar & Select Fields</a></li>
|
|
<li class="item"><a href="../render/1.html">Using the Render Stack</a></li>
|
|
<li class="item"><a href="../germany/1.html">Localization: Germany</a></li>
|
|
<li class="item"><a href="../japan/1.html">Localization: Japan</a></li>
|
|
<li class="item"><a href="../popup/1.html">Popup Calendar</a></li>
|
|
</ul>
|
|
</div>
|
|
<div id="yui-main">
|
|
<div class="yui-b">
|
|
<h1 class="first">Setting up the Calendar</h1>
|
|
<p>Calendar can be displayed in a two-page format by using the CalendarGroup class. The dependencies (the <a href="http://developer.yahoo.com/yui/yahoo/">YAHOO Global object</a>, the <a href="http://developer.yahoo.com/yui/event/">Event Utility</a>, and the <a href="http://developer.yahoo.com/yui/dom/">DOM Collection</a>) and markup structure are identical to the basic Calendar (outlined in the <a href="../quickstart/1.html">Quickstart Tutorial</a>).</p>
|
|
|
|
<p>Having included the necessary script files and placed the requisite markup on the page, we can easily invoke a Dual Calendar display by creating a CalendarGroup instance (see line 5 below); in our previous examples, we've instantiated Calendar to show a single calendar month. CalendarGroup allows us to specify a n-month display. By default, a CalendarGroup instance will show two months at a time.</p>
|
|
|
|
<p>The only notable difference, illustrated in the code block below, is the use of the CalendarGroup class when instantiating the Calendar:</p>
|
|
|
|
<textarea name="code" class="JScript" cols="60" rows="1">
|
|
<script>
|
|
YAHOO.namespace("example.calendar");
|
|
|
|
function init() {
|
|
YAHOO.example.calendar.cal1 = new YAHOO.widget.CalendarGroup("cal1","cal1Container");
|
|
YAHOO.example.calendar.cal1.render();
|
|
}
|
|
|
|
YAHOO.util.Event.addListener(window, "load", init);
|
|
</script>
|
|
</textarea>
|
|
|
|
<div id="stepnav">
|
|
<a class="next" href="2.html">Continue to <em>Functional Example</em> ></a> </div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="ft"> </div>
|
|
</div>
|
|
|
|
<script src="../../assets/dpSyntaxHighlighter.js"></script>
|
|
<script language="javascript">
|
|
dp.SyntaxHighlighter.HighlightAll('code');
|
|
</script>
|
|
|
|
</body>
|
|
</html> |