[Sommaire] [Imprimer]

   1  <html xmlns="http://www.w3.org/1999/xhtml">
   2  <head>
   3    <title>Sample for the multiple dates feature</title>
   4    <!-- calendar stylesheet -->
   5    <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
   6  
   7    <!-- main calendar program -->
   8    <script type="text/javascript" src="calendar.js"></script>
   9  
  10    <!-- language for the calendar -->
  11    <script type="text/javascript" src="lang/calendar-en.js"></script>
  12  
  13    <!-- the following script defines the Calendar.setup helper function, which makes
  14         adding a calendar a matter of 1 or 2 lines of code. -->
  15    <script type="text/javascript" src="calendar-setup.js"></script>
  16  </head>
  17  
  18  <body>
  19    <h1>Sample for the multiple dates feature</h1>
  20  
  21    <p>
  22      Starting version 0.9.7,
  23      the calendar is able to handle multiple dates selection, in either
  24      flat or popup form.  For this to happen one needs to pass the
  25      "<tt>multiple:&nbsp;true</tt>" parameter to
  26      <tt>Calendar.setup</tt> and to install an <tt>onUpdate</tt>
  27      handler that watches for modifications.
  28    </p>
  29  
  30    <a id="trigger" href="#">[open calendar...]</a>
  31  
  32    <div id="output"></div>
  33  
  34    <script type="text/javascript">//<![CDATA[
  35      // the default multiple dates selected, first time the calendar is instantiated
  36      var MA = [];
  37  
  38      function closed(cal) {
  39  
  40        // here we'll write the output; this is only for example.  You
  41        // will normally fill an input field or something with the dates.
  42        var el = document.getElementById("output");
  43  
  44        // reset initial content.
  45        el.innerHTML = "";
  46  
  47        // Reset the "MA", in case one triggers the calendar again.
  48        // CAREFUL!  You don't want to do "MA = [];".  We need to modify
  49        // the value of the current array, instead of creating a new one.
  50        // Calendar.setup is called only once! :-)  So be careful.
  51        MA.length = 0;
  52  
  53        // walk the calendar's multiple dates selection hash
  54        for (var i in cal.multiple) {
  55          var d = cal.multiple[i];
  56          // sometimes the date is not actually selected, that's why we need to check.
  57          if (d) {
  58            // OK, selected.  Fill an input field.  Or something.  Just for example,
  59            // we will display all selected dates in the element having the id "output".
  60            el.innerHTML += d.print("%A, %Y %B %d") + "<br />";
  61  
  62            // and push it in the "MA", in case one triggers the calendar again.
  63            MA[MA.length] = d;
  64          }
  65        }
  66        cal.hide();
  67        return true;
  68      };
  69  
  70      Calendar.setup({
  71        align      : "BR",
  72        showOthers : true,
  73        multiple   : MA, // pass the initial or computed array of multiple dates to be initially selected
  74        onClose    : closed,
  75        button     : "trigger"
  76      });
  77    //]]></script>
  78  
  79  <hr />
  80  <address><a href="http://dynarch.com/mishoo/">mishoo</a></address>
  81  <!-- hhmts start --> Last modified: Thu Mar  3 20:17:42 EET 2005 <!-- hhmts end -->
  82  </body> </html>