[Sommaire] [Imprimer]

   1  <html style="background-color: buttonface; color: buttontext;">
   2  
   3  <head>
   4  <meta http-equiv="content-type" content="text/xml; charset=utf-8" />
   5  
   6  <title>Simple calendar setups [popup calendar]</title>
   7  
   8    <!-- calendar stylesheet -->
   9    <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
  10  
  11    <!-- main calendar program -->
  12    <script type="text/javascript" src="calendar.js"></script>
  13  
  14    <!-- language for the calendar -->
  15    <script type="text/javascript" src="lang/calendar-en.js"></script>
  16  
  17    <!-- the following script defines the Calendar.setup helper function, which makes
  18         adding a calendar a matter of 1 or 2 lines of code. -->
  19    <script type="text/javascript" src="calendar-setup.js"></script>
  20  
  21  </head>
  22  
  23  <body>
  24  
  25  <h2>DHTML Calendar &mdash; for the impatient</h2>
  26  
  27        <blockquote>
  28          <p>
  29            This page lists some common setups for the popup calendar.  In
  30            order to see how to do any of them please see the source of this
  31            page.  For each example it's structured like this: there's the
  32            &lt;form&gt; that contains the input field, and following there is
  33            the JavaScript snippet that setups that form.  An example of
  34            <em>flat</em> calendar is available in <a
  35              href="simple-2.html">another page</a>.
  36          </p>
  37          <p>
  38            The code in this page uses a helper function defined in
  39            "calendar-setup.js".  With it you can setup the calendar in
  40            minutes.  If you're not <em>that</em> impatient, ;-) <a
  41            href="doc/html/reference.html">complete documenation</a> is
  42            available.
  43          </p>
  44        </blockquote>
  45  
  46  
  47  
  48  <hr />
  49  
  50  <p><b>Basic setup: one input per calendar.</b> Clicking in the input field
  51  activates the calendar.  The date format is "%m/%d/%Y %I:%M %p".  The
  52  calendar defaults to "single-click mode".</p>
  53  
  54  <p>The example below has been updated to show you how to create "linked"
  55  fields.  Basically, when some field is filled with a date, the other
  56  is updated so that the difference between them remains one week.  The
  57  property useful here is "onUpdate".</p>
  58  
  59  <form action="#" method="get">
  60  <input type="text" name="date" id="f_date_a" />
  61  <input type="text" name="date" id="f_calcdate" />
  62  </form>
  63  
  64  <script type="text/javascript">
  65      function catcalc(cal) {
  66          var date = cal.date;
  67          var time = date.getTime()
  68          // use the _other_ field
  69          var field = document.getElementById("f_calcdate");
  70          if (field == cal.params.inputField) {
  71              field = document.getElementById("f_date_a");
  72              time -= Date.WEEK; // substract one week
  73          } else {
  74              time += Date.WEEK; // add one week
  75          }
  76          var date2 = new Date(time);
  77          field.value = date2.print("%Y-%m-%d %H:%M");
  78      }
  79      Calendar.setup({
  80          inputField     :    "f_date_a",   // id of the input field
  81          ifFormat       :    "%Y-%m-%d %H:%M",       // format of the input field
  82          showsTime      :    true,
  83          timeFormat     :    "24",
  84          onUpdate       :    catcalc
  85      });
  86      Calendar.setup({
  87          inputField     :    "f_calcdate",
  88          ifFormat       :    "%Y-%m-%d %H:%M",
  89          showsTime      :    true,
  90          timeFormat     :    "24",
  91          onUpdate       :    catcalc
  92      });
  93  </script>
  94  
  95  
  96  
  97  <hr />
  98  
  99  <p><b>Input field with a trigger button.</b> Clicking the button activates
 100  the calendar.  Note that this one needs double-click (singleClick parameter
 101  is explicitely set to false).  Also demonstrates the "step" parameter
 102  introduced in 0.9.6 (show all years in drop-down boxes, instead of every
 103  other year as default).</p>
 104  
 105  <form action="#" method="get">
 106  <input type="text" name="date" id="f_date_b" /><button type="reset" id="f_trigger_b">...</button>
 107  </form>
 108  
 109  <script type="text/javascript">
 110      Calendar.setup({
 111          inputField     :    "f_date_b",      // id of the input field
 112          ifFormat       :    "%m/%d/%Y %I:%M %p",       // format of the input field
 113          showsTime      :    true,            // will display a time selector
 114          button         :    "f_trigger_b",   // trigger for the calendar (button ID)
 115          singleClick    :    false,           // double-click mode
 116          step           :    1                // show all years in drop-down boxes (instead of every other year as default)
 117      });
 118  </script>
 119  
 120  
 121  
 122  <hr />
 123  
 124  <p><b>Input field with a trigger image.</b> Note that the Calendar.setup
 125  function doesn't care if the trigger is a button, image, or anything else.
 126  Also in this example we setup a different alignment, just to show how it's
 127  done.  The input field is read-only (that is set from HTML).</p>
 128  
 129  <form action="#" method="get">
 130  <table cellspacing="0" cellpadding="0" style="border-collapse: collapse"><tr>
 131   <td><input type="text" name="date" id="f_date_c" readonly="1" /></td>
 132   <td><img src="img.gif" id="f_trigger_c" style="cursor: pointer; border: 1px solid red;" title="Date selector"
 133        onmouseover="this.style.background='red';" onmouseout="this.style.background=''" /></td>
 134  </table>
 135  </form>
 136  
 137  <script type="text/javascript">
 138      Calendar.setup({
 139          inputField     :    "f_date_c",     // id of the input field
 140          ifFormat       :    "%B %e, %Y",      // format of the input field
 141          button         :    "f_trigger_c",  // trigger for the calendar (button ID)
 142          align          :    "Tl",           // alignment (defaults to "Bl")
 143          singleClick    :    true
 144      });
 145  </script>
 146  
 147  
 148  
 149  <hr />
 150  
 151  <p><b>Hidden field, display area.</b> The calendar now puts the date into 2
 152  elements: one is an input field of type "hidden"&mdash;so that the user
 153  can't directly see or modify it&mdash; and one is a &lt;span&gt; element in
 154  which the date is displayed.  Note that if the trigger is not specified the
 155  calendar will use the displayArea (or inputField as in the first example).
 156  The display area can have it's own format.  This is useful if, for instance,
 157  we need to store one format in the database (thus pass it in the input
 158  field) but we wanna show a friendlier format to the end-user.</p>
 159  
 160  <form action="#" method="get" style="visibility: hidden">
 161  <input type="hidden" name="date" id="f_date_d" />
 162  </form>
 163  
 164  <p>Your birthday:
 165     <span style="background-color: #ff8; cursor: default;"
 166           onmouseover="this.style.backgroundColor='#ff0';"
 167           onmouseout="this.style.backgroundColor='#ff8';"
 168           id="show_d"
 169     >Click to open date selector</span>.</p>
 170  
 171  <script type="text/javascript">
 172      Calendar.setup({
 173          inputField     :    "f_date_d",     // id of the input field
 174          ifFormat       :    "%Y/%d/%m",     // format of the input field (even if hidden, this format will be honored)
 175          displayArea    :    "show_d",       // ID of the span where the date is to be shown
 176          daFormat       :    "%A, %B %d, %Y",// format of the displayed date
 177          align          :    "Tl",           // alignment (defaults to "Bl")
 178          singleClick    :    true
 179      });
 180  </script>
 181  
 182  
 183  
 184  <hr />
 185  
 186  <p><b>Hidden field, display area, trigger image.</b> Very similar to the
 187  previous example.  The difference is that we also have a trigger image.</p>
 188  
 189  <form action="#" method="get" style="visibility: hidden">
 190  <input type="hidden" name="date" id="f_date_e" />
 191  </form>
 192  
 193  <p>Your birthday: <span id="show_e">-- not entered --</span> <img
 194  src="img.gif" id="f_trigger_e" style="cursor: pointer; border: 1px solid
 195  red;" title="Date selector" onmouseover="this.style.background='red';"
 196  onmouseout="this.style.background=''" />.</p>
 197  
 198  <script type="text/javascript">
 199      Calendar.setup({
 200          inputField     :    "f_date_e",     // id of the input field
 201          ifFormat       :    "%Y/%d/%m",     // format of the input field (even if hidden, this format will be honored)
 202          displayArea    :    "show_e",       // ID of the span where the date is to be shown
 203          daFormat       :    "%A, %B %d, %Y",// format of the displayed date
 204          button         :    "f_trigger_e",  // trigger button (well, IMG in our case)
 205          align          :    "Tl",           // alignment (defaults to "Bl")
 206          singleClick    :    true
 207      });
 208  </script>
 209  
 210  
 211  
 212  <hr />
 213  
 214  <p><b>Hidden field, display area.</b> Very much like the previous examples,
 215  but we now disable some dates (all weekends, that is, Saturdays and
 216  Sundays).</p>
 217  
 218  <form action="#" method="get" style="visibility: hidden">
 219  <input type="hidden" name="date" id="f_date_f" />
 220  </form>
 221  
 222  <p>Your birthday:
 223     <span style="background-color: #ff8; cursor: default;"
 224           onmouseover="this.style.backgroundColor='#ff0';"
 225           onmouseout="this.style.backgroundColor='#ff8';"
 226           id="show_f"
 227     >Click to open date selector</span>.</p>
 228  
 229  <script type="text/javascript">
 230      Calendar.setup({
 231          inputField     :    "f_date_f",     // id of the input field
 232          ifFormat       :    "%Y/%d/%m",     // format of the input field (even if hidden, this format will be honored)
 233          displayArea    :    "show_f",       // ID of the span where the date is to be shown
 234          daFormat       :    "%A, %B %d, %Y",// format of the displayed date
 235          align          :    "Tl",           // alignment (defaults to "Bl")
 236          dateStatusFunc :    function (date) { // disable weekend days (Saturdays == 6 and Subdays == 0)
 237                                return (date.getDay() == 6 || date.getDay() == 0) ? true : false;
 238                              }
 239      });
 240  </script>
 241  
 242  
 243  </body>
 244  </html>