98 lines
No EOL
3.9 KiB
HTML
98 lines
No EOL
3.9 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 - Tutorials (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: Tutorials</h1>
|
|
</div>
|
|
|
|
<div id="bd">
|
|
|
|
<div id="toc" class="yui-b">
|
|
<ul>
|
|
<li class="sect"><a href="#">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"><a href="dual/1.html">Dual Calendars</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">YUI Calendar Interactive Tutorials</h1>
|
|
|
|
|
|
<p>The YUI Calendar Tutorials provide you with working examples of several common uses of the Calendar component. Each tutorial contains a working functional example, plus documentation describing how it works.</p>
|
|
|
|
|
|
<div id="landing">
|
|
<h3><a href="quickstart/1.html">Quickstart Tutorial</a></h3>
|
|
<p>Quickly get up and running with the most basic Calendar.</p>
|
|
|
|
<h3><a href="multi/1.html">Multi-Select Calendar</a></h3>
|
|
<p>Set up a Calendar that allows for the selection of one or more dates, rather than the single-select default.</p>
|
|
|
|
<h3><a href="dual/1.html">Dual Calendars</a></h3>
|
|
<p>Learn how to instantiate a Calendar with more than one month shown at a time.</p>
|
|
|
|
<h3><a href="minmax/1.html">Minimum / Maximum Dates</a></h3>
|
|
<p>Configure the Calendar to disallow selection before or beyond specified date limits.</p>
|
|
|
|
<h3><a href="events/1.html">Handling Events</a></h3>
|
|
<p>Use Calendar's events to react to various interesting moments, such as the selection or deselection of dates.</p>
|
|
|
|
<h3><a href="formtxt/1.html">Calendar & Text Fields</a></h3>
|
|
<p>Populate a form text input field using the Calendar's selected date and vice versa.</p>
|
|
|
|
<h3><a href="formsel/1.html">Calendar & Select Fields</a></h3>
|
|
<p>Populate a series of form select input fields using the Calendar's selected date and vice versa.</p>
|
|
|
|
<h3><a href="render/1.html">Using the Render Stack</a></h3>
|
|
<p>Configure custom functions that can be used to perform special rendering for specific dates or ranges of dates.</p>
|
|
|
|
<h3><a href="germany/1.html">Localization: Germany</a></h3>
|
|
<p>Use localization features to customize the Calendar for use in Germany.</p>
|
|
|
|
<h3><a href="japan/1.html">Localization: Japan</a></h3>
|
|
<p>Use localization features to customize the CalendarGroup for use in Japan.</p>
|
|
|
|
<h3><a href="popup/1.html">Popup Calendar</a></h3>
|
|
<p>Configure and Calendar and CalendarGroup for use as a popup layer that is displayed above the document.</p>
|
|
|
|
</div>
|
|
<div id="stepnav">
|
|
</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> |