Calendar Control - Mix/Max Implementation

Calendar Control - Mix/Max Implementation : Calendar : GUI Components JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » GUI Components » Calendar »

Calendar Control - Mix/Max Implementation




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

  <title>Yahoo! Calendar Control - Mix/Max Implementation</title>
  

  <link rel="stylesheet" href="./examples/calendar/css/examples.css" type="text/css">
  
  <script type="text/javascript" src="./build/yahoo/yahoo.js"></script>
  <script type="text/javascript" src="./build/event/event.js" ></script>
  <script type="text/javascript" src="./build/dom/dom.js" ></script>
  
  <link type="text/css" rel="stylesheet" href="./build/fonts/fonts.css">
  <link type="text/css" rel="stylesheet" href="./build/reset/reset.css">

  <link rel="stylesheet" type="text/css" href="./docs/assets/dpSyntaxHighlighter.css" />

  <script type="text/javascript" src="./build/calendar/calendar.js"></script>
  <link type="text/css" rel="stylesheet" href="./build/calendar/assets/calendar.css">  

  <script language="javascript">
    YAHOO.namespace("example.calendar");

    function init() {
      YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("YAHOO.example.calendar.cal1","cal1Container");
      YAHOO.example.calendar.cal1.minDate = YAHOO.widget.DateMath.add(new Date(), YAHOO.widget.DateMath.DAY, 1);
      YAHOO.example.calendar.cal1.render();
    }
  </script>

</head>

<body onload="init()">
  <div id="pageTitle">
    <h3>Calendar Control</h3>
  </div>

  <div class="column left">
    <h4>Future-Only Single-Select Implementation</h4>

    <p>To construct a calendar where the user can only select future dates, the code would read 
    as follows:</p>
<textarea name="code" class="JScript" cols="60" rows="1">
var cal1;
function init() {
   cal1 = new YAHOO.widget.Calendar("cal1", "cal1Container");
   cal1.minDate = YAHOO.widget.DateMath.add(new Date(), YAHOO.widget.DateMath.DAY, 1);
   cal1.render();
}
</textarea>
    <p>Notice that we're setting the minimum date to tomorrow's date by adding one day to a 
    newly instantiated date (using the DateMath helper class) and setting it into the calendar's 
    minDate property. cal1.maxDate remains null since there is no restriction on how far into 
    the future the user can make selections.</p>
  </div>



  

  <div class="column right">
    <div style="margin-left:auto;margin-right:auto;width:150px">
    <div id="cal1Container"></div>
    <div style="margin-left:auto;margin-right:auto;text-align:center;width:150px;clear:both">
      <a href="javascript:YAHOO.example.calendar.cal1.reset()" class="navLink" style="font-size:12px;text-decoration:underline">reset</a>|
      <a href="javascript:alert(YAHOO.example.calendar.cal1.getSelectedDates())" class="navLink" style="font-size:12px;text-decoration:underline">what's selected?</a>
    </div>

</div>

  </div>

<script src="./docs/assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>

</body>
</html>