[Sommaire] [Imprimer]

   1  <html style="background-color: buttonface; color: buttontext;">
   2  
   3  <head>
   4  
   5  <title>Simple calendar setups [popup calendar]</title>
   6  
   7    <!-- calendar stylesheet -->
   8    <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
   9  
  10    <!-- main calendar program -->
  11    <script type="text/javascript" src="calendar.js"></script>
  12  
  13    <!-- language for the calendar -->
  14    <script type="text/javascript" src="lang/calendar-en.js"></script>
  15  
  16    <!-- the following script defines the Calendar.setup helper function, which makes
  17         adding a calendar a matter of 1 or 2 lines of code. -->
  18    <script type="text/javascript" src="calendar-setup.js"></script>
  19  
  20  <script language="JavaScript">
  21  function rightAlign(div,offset){
  22    if(typeof div=='string'){div=document.getElementById(div)}
  23    if(isNaN(offset)){offset=0}
  24      div.style.left=document.body.clientWidth-parseInt(div.offsetWidth)+offset;
  25  }
  26  function stretchRight(div,offset){
  27    if(typeof div=='string'){div=document.getElementById(div)}
  28    if(isNaN(offset)){offset=0}
  29    if(document.body.clientWidth-parseInt(div.offsetLeft)+offset>=0){
  30      div.style.width=document.body.clientWidth-parseInt(div.offsetLeft)+offset;
  31    }
  32  }
  33  function stretchBottom(div,offset){
  34    if(typeof div=='string'){div=document.getElementById(div)}
  35    if(isNaN(offset)){offset=0}
  36    if(document.body.clientHeight-parseInt(div.offsetTop)+offset>=0){
  37      div.style.height=document.body.clientHeight-parseInt(div.offsetTop)+offset;
  38    }
  39  }
  40  function toggleHelp(){
  41    dh=document.getElementById('divHelp');
  42    if(dh.style.visibility=='visible'){
  43      dh.style.visibility='hidden';
  44      stretchRight('divMenu');
  45      stretchRight('divContent');
  46    }else{
  47      rightAlign('divHelp');
  48      stretchRight('divMenu',-200);
  49      stretchRight('divContent',-200);
  50      dh.style.visibility='visible';
  51    }
  52    var txt = "<table>";
  53    var object = document.getElementById("divContent");
  54    for (var i in object) {
  55      switch (typeof object[i]) {
  56        case "string":
  57        case "number":
  58          if (i != "innerHTML")
  59            txt += "<tr><td>" + i + "</td><td>" + object[i] + "</td></tr>";
  60      break;
  61      }
  62    }
  63    dh.innerHTML = txt + "</table>";
  64  }
  65  function adjustDivs(){
  66    dh=document.getElementById('divHelp');
  67    if(dh.style.visibility=='visible'){
  68      rightAlign('divHelp');
  69      stretchRight('divMenu',-200);
  70      stretchRight('divContent',-200);
  71    }else{
  72      stretchRight('divMenu');
  73      stretchRight('divContent');
  74    }
  75    stretchBottom('divContent');
  76  }
  77  </script>
  78  
  79  <style>
  80  #divContent{
  81    position:absolute;
  82    width:100%;
  83    height:100%;
  84    overflow:auto;
  85    top: 30px;
  86  }
  87  #divMenu{
  88    position: absolute;
  89    left:0px;
  90    top:0px;
  91    text-align: right;
  92    background-color: #cccccc;
  93    width:100%;
  94    height:30px;
  95  }
  96  #divHelp{
  97    position:absolute;
  98    width:200px;
  99    height:100%;
 100    background-color:#ffffcc;
 101    visibility:hidden;
 102  }
 103  </style>
 104  
 105  </head>
 106  
 107  <body scroll=no leftmargin=0 topmargin=0 marginwidth=0 marginheight=0 onload="adjustDivs()" onresize="adjustDivs()">
 108    <div id="divMenu"><a href="javascript:void(0)" onclick="toggleHelp();return false">Toggle console</a></div>
 109    <div id="divContent">
 110  
 111  <h2>DHTML Calendar &mdash; for the impatient</h2>
 112  
 113        <blockquote>
 114          <p>
 115            This page lists some common setups for the popup calendar.  In
 116            order to see how to do any of them please see the source of this
 117            page.  For each example it's structured like this: there's the
 118            &lt;form&gt; that contains the input field, and following there is
 119            the JavaScript snippet that setups that form.  An example of
 120            <em>flat</em> calendar is available in <a
 121              href="simple-2.html">another page</a>.
 122          </p>
 123          <p>
 124            The code in this page uses a helper function defined in
 125            "calendar-setup.js".  With it you can setup the calendar in
 126            minutes.  If you're not <em>that</em> impatient, ;-) <a
 127            href="doc/html/reference.html">complete documenation</a> is
 128            available.
 129          </p>
 130        </blockquote>
 131  
 132  
 133  
 134  <hr />
 135  
 136  <p><b>Basic setup: one input per calendar.</b> Clicking in the input field
 137  activates the calendar.  The date format is "%m/%d/%Y %I:%M %p".  The
 138  calendar defaults to "single-click mode".</p>
 139  
 140  <p>The example below has been updated to show you how to create "linked"
 141  fields.  Basically, when some field is filled with a date, the other
 142  is updated so that the difference between them remains one week.  The
 143  property useful here is "onUpdate".</p>
 144  
 145  <form action="#" method="get">
 146  <input type="text" name="date" id="f_date_a" />
 147  <input type="text" name="date" id="f_calcdate" />
 148  </form>
 149  
 150  <script type="text/javascript">
 151      function catcalc(cal) {
 152          var date = cal.date;
 153          var time = date.getTime()
 154          // use the _other_ field
 155          var field = document.getElementById("f_calcdate");
 156          if (field == cal.params.inputField) {
 157              field = document.getElementById("f_date_a");
 158              time -= Date.WEEK; // substract one week
 159          } else {
 160              time += Date.WEEK; // add one week
 161          }
 162          var date2 = new Date(time);
 163          field.value = date2.print("%Y-%m-%d %H:%M");
 164      }
 165      Calendar.setup({
 166          inputField     :    "f_date_a",   // id of the input field
 167          ifFormat       :    "%Y-%m-%d %H:%M",       // format of the input field
 168          showsTime      :    true,
 169          timeFormat     :    "24",
 170          onUpdate       :    catcalc
 171      });
 172      Calendar.setup({
 173          inputField     :    "f_calcdate",
 174          ifFormat       :    "%Y-%m-%d %H:%M",
 175          showsTime      :    true,
 176          timeFormat     :    "24",
 177          onUpdate       :    catcalc
 178      });
 179  </script>
 180  
 181  
 182  
 183  <hr />
 184  
 185  <p><b>Input field with a trigger button.</b> Clicking the button activates
 186  the calendar.  Note that this one needs double-click (singleClick parameter
 187  is explicitely set to false).</p>
 188  
 189  <form action="#" method="get">
 190  <input type="text" name="date" id="f_date_b" /><button type="reset" id="f_trigger_b">...</button>
 191  </form>
 192  
 193  <script type="text/javascript">
 194      Calendar.setup({
 195          inputField     :    "f_date_b",      // id of the input field
 196          ifFormat       :    "%m/%d/%Y %I:%M %p",       // format of the input field
 197          showsTime      :    true,            // will display a time selector
 198          button         :    "f_trigger_b",   // trigger for the calendar (button ID)
 199          singleClick    :    false            // double-click mode
 200      });
 201  </script>
 202  
 203  
 204  
 205  <hr />
 206  
 207  <p><b>Input field with a trigger image.</b> Note that the Calendar.setup
 208  function doesn't care if the trigger is a button, image, or anything else.
 209  Also in this example we setup a different alignment, just to show how it's
 210  done.  The input field is read-only (that is set from HTML).</p>
 211  
 212  <form action="#" method="get">
 213  <table cellspacing="0" cellpadding="0" style="border-collapse: collapse"><tr>
 214   <td><input type="text" name="date" id="f_date_c" readonly="1" /></td>
 215   <td><img src="img.gif" id="f_trigger_c" style="cursor: pointer; border: 1px solid red;" title="Date selector"
 216        onmouseover="this.style.background='red';" onmouseout="this.style.background=''" /></td>
 217  </table>
 218  </form>
 219  
 220  <script type="text/javascript">
 221      Calendar.setup({
 222          inputField     :    "f_date_c",     // id of the input field
 223          ifFormat       :    "%B %e, %Y",      // format of the input field
 224          button         :    "f_trigger_c",  // trigger for the calendar (button ID)
 225          align          :    "Tl",           // alignment (defaults to "Bl")
 226          singleClick    :    true
 227      });
 228  </script>
 229  
 230  
 231  
 232  <hr />
 233  
 234  <p><b>Hidden field, display area.</b> The calendar now puts the date into 2
 235  elements: one is an input field of type "hidden"&mdash;so that the user
 236  can't directly see or modify it&mdash; and one is a &lt;span&gt; element in
 237  which the date is displayed.  Note that if the trigger is not specified the
 238  calendar will use the displayArea (or inputField as in the first example).
 239  The display area can have it's own format.  This is useful if, for instance,
 240  we need to store one format in the database (thus pass it in the input
 241  field) but we wanna show a friendlier format to the end-user.</p>
 242  
 243  <form action="#" method="get" style="visibility: hidden">
 244  <input type="hidden" name="date" id="f_date_d" />
 245  </form>
 246  
 247  <p>Your birthday:
 248     <span style="background-color: #ff8; cursor: default;"
 249           onmouseover="this.style.backgroundColor='#ff0';"
 250           onmouseout="this.style.backgroundColor='#ff8';"
 251           id="show_d"
 252     >Click to open date selector</span>.</p>
 253  
 254  <script type="text/javascript">
 255      Calendar.setup({
 256          inputField     :    "f_date_d",     // id of the input field
 257          ifFormat       :    "%Y/%d/%m",     // format of the input field (even if hidden, this format will be honored)
 258          displayArea    :    "show_d",       // ID of the span where the date is to be shown
 259          daFormat       :    "%A, %B %d, %Y",// format of the displayed date
 260          align          :    "Tl",           // alignment (defaults to "Bl")
 261          singleClick    :    true
 262      });
 263  </script>
 264  
 265  
 266  
 267  <hr />
 268  
 269  <p><b>Hidden field, display area, trigger image.</b> Very similar to the
 270  previous example.  The difference is that we also have a trigger image.</p>
 271  
 272  <form action="#" method="get" style="visibility: hidden">
 273  <input type="hidden" name="date" id="f_date_e" />
 274  </form>
 275  
 276  <p>Your birthday: <span id="show_e">-- not entered --</span> <img
 277  src="img.gif" id="f_trigger_e" style="cursor: pointer; border: 1px solid
 278  red;" title="Date selector" onmouseover="this.style.background='red';"
 279  onmouseout="this.style.background=''" />.</p>
 280  
 281  <script type="text/javascript">
 282      Calendar.setup({
 283          inputField     :    "f_date_e",     // id of the input field
 284          ifFormat       :    "%Y/%d/%m",     // format of the input field (even if hidden, this format will be honored)
 285          displayArea    :    "show_e",       // ID of the span where the date is to be shown
 286          daFormat       :    "%A, %B %d, %Y",// format of the displayed date
 287          button         :    "f_trigger_e",  // trigger button (well, IMG in our case)
 288          align          :    "Tl",           // alignment (defaults to "Bl")
 289          singleClick    :    true
 290      });
 291  </script>
 292  
 293  
 294  
 295  <hr />
 296  
 297  <p><b>Hidden field, display area.</b> Very much like the previous examples,
 298  but we now disable some dates (all weekends, that is, Saturdays and
 299  Sundays).</p>
 300  
 301  <form action="#" method="get" style="visibility: hidden">
 302  <input type="hidden" name="date" id="f_date_f" />
 303  </form>
 304  
 305  <p>Your birthday:
 306     <span style="background-color: #ff8; cursor: default;"
 307           onmouseover="this.style.backgroundColor='#ff0';"
 308           onmouseout="this.style.backgroundColor='#ff8';"
 309           id="show_f"
 310     >Click to open date selector</span>.</p>
 311  
 312  <script type="text/javascript">
 313      Calendar.setup({
 314          inputField     :    "f_date_f",     // id of the input field
 315          ifFormat       :    "%Y/%d/%m",     // format of the input field (even if hidden, this format will be honored)
 316          displayArea    :    "show_f",       // ID of the span where the date is to be shown
 317          daFormat       :    "%A, %B %d, %Y",// format of the displayed date
 318          align          :    "Tl",           // alignment (defaults to "Bl")
 319          dateStatusFunc :    function (date) { // disable weekend days (Saturdays == 6 and Subdays == 0)
 320                                return (date.getDay() == 6 || date.getDay() == 0) ? true : false;
 321                              }
 322      });
 323  </script>
 324  </div>
 325  <div id="divHelp">
 326  
 327  </div>
 328  
 329  </body>
 330  </html>