[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 setup [flat 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 demonstrates how to setup a flat calendar.  Examples of
  30            <em>popup</em> calendars are available in <a
  31            href="simple-1.html">another page</a>.
  32          </p>
  33          <p>
  34            The code in this page uses a helper function defined in
  35            "calendar-setup.js".  With it you can setup the calendar in
  36            minutes.  If you're not <em>that</em> impatient, ;-) <a
  37            href="doc/html/reference.html">complete documenation</a> is
  38            available.
  39          </p>
  40        </blockquote>
  41  
  42  
  43  
  44  <hr />
  45  
  46  <div style="float: right; margin-left: 1em; margin-bottom: 1em;"
  47  id="calendar-container"></div>
  48  
  49  <script type="text/javascript">
  50    function dateChanged(calendar) {
  51      // Beware that this function is called even if the end-user only
  52      // changed the month/year.  In order to determine if a date was
  53      // clicked you can use the dateClicked property of the calendar:
  54      if (calendar.dateClicked) {
  55        // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
  56        var y = calendar.date.getFullYear();
  57        var m = calendar.date.getMonth();     // integer, 0..11
  58        var d = calendar.date.getDate();      // integer, 1..31
  59        // redirect...
  60        window.location = "/" + y + "/" + m + "/" + d + "/index.php";
  61      }
  62    };
  63  
  64    Calendar.setup(
  65      {
  66        flat         : "calendar-container", // ID of the parent element
  67        flatCallback : dateChanged           // our callback function
  68      }
  69    );
  70  </script>
  71  
  72  <p>The positioning of the DIV that contains the calendar is entirely your
  73  job.  For instance, the "calendar-container" DIV from this page has the
  74  following style: "float: right; margin-left: 1em; margin-bottom: 1em".</p>
  75  
  76  <p>Following there is the code that has been used to create this calendar.
  77  You can find the full description of the <tt>Calendar.setup()</tt> function
  78  in the <a href="doc/html/reference.html">calendar documenation</a>.</p>
  79  
  80  <pre
  81  >&lt;div style="float: right; margin-left: 1em; margin-bottom: 1em;"
  82  id="calendar-container"&gt;&lt;/div&gt;
  83  
  84  &lt;script type="text/javascript"&gt;
  85    function dateChanged(calendar) {
  86      // Beware that this function is called even if the end-user only
  87      // changed the month/year.  In order to determine if a date was
  88      // clicked you can use the dateClicked property of the calendar:
  89      if (calendar.dateClicked) {
  90        // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
  91        var y = calendar.date.getFullYear();
  92        var m = calendar.date.getMonth();     // integer, 0..11
  93        var d = calendar.date.getDate();      // integer, 1..31
  94        // redirect...
  95        window.location = "/" + y + "/" + m + "/" + d + "/index.php";
  96      }
  97    };
  98  
  99    Calendar.setup(
 100      {
 101        flat         : "calendar-container", // ID of the parent element
 102        flatCallback : dateChanged           // our callback function
 103      }
 104    );
 105  &lt;/script&gt;</pre>
 106  
 107  </body>
 108  </html>