[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      <style type="text/css">
  22        .special { background-color: #000; color: #fff; }
  23      </style>
  24  
  25  </head>
  26  
  27  <body>
  28  
  29  <h2>DHTML Calendar &mdash; for the impatient</h2>
  30  
  31        <blockquote>
  32          <p>
  33            This page demonstrates how to setup a flat calendar.  Examples of
  34            <em>popup</em> calendars are available in <a
  35            href="simple-1.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  <div style="float: right; margin-left: 1em; margin-bottom: 1em;"
  51  id="calendar-container"></div>
  52  
  53  <script type="text/javascript">
  54    var SPECIAL_DAYS = {
  55      0 : [ 13, 24 ],        // special days in January
  56      2 : [ 1, 6, 8, 12, 18 ],    // special days in March
  57      8 : [ 21, 11 ]        // special days in September
  58    };
  59  
  60    function dateIsSpecial(year, month, day) {
  61      var m = SPECIAL_DAYS[month];
  62      if (!m) return false;
  63      for (var i in m) if (m[i] == day) return true;
  64      return false;
  65    };
  66  
  67    function dateChanged(calendar) {
  68      // Beware that this function is called even if the end-user only
  69      // changed the month/year.  In order to determine if a date was
  70      // clicked you can use the dateClicked property of the calendar:
  71      if (calendar.dateClicked) {
  72        // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
  73        var y = calendar.date.getFullYear();
  74        var m = calendar.date.getMonth();     // integer, 0..11
  75        var d = calendar.date.getDate();      // integer, 1..31
  76        // redirect...
  77        window.location = "/" + y + "/" + m + "/" + d + "/index.php";
  78      }
  79    };
  80  
  81    Calendar.setup(
  82      {
  83        flat         : "calendar-container", // ID of the parent element
  84        flatCallback : dateChanged,          // our callback function
  85        dateStatusFunc : function(date, y, m, d) {
  86                           if (dateIsSpecial(y, m, d)) return "special";
  87                           else return false; // other dates are enabled
  88                           // return true if you want to disable other dates
  89                         }
  90      }
  91    );
  92  </script>
  93  
  94  <p>The positioning of the DIV that contains the calendar is entirely your
  95  job.  For instance, the "calendar-container" DIV from this page has the
  96  following style: "float: right; margin-left: 1em; margin-bottom: 1em".</p>
  97  
  98  <p>Following there is the code that has been used to create this calendar.
  99  You can find the full description of the <tt>Calendar.setup()</tt> function
 100  in the <a href="doc/html/reference.html">calendar documenation</a>.</p>
 101  
 102  <pre
 103  >&lt;div style="float: right; margin-left: 1em; margin-bottom: 1em;"
 104  id="calendar-container"&gt;&lt;/div&gt;
 105  
 106  &lt;script type="text/javascript"&gt;
 107    function dateChanged(calendar) {
 108      // Beware that this function is called even if the end-user only
 109      // changed the month/year.  In order to determine if a date was
 110      // clicked you can use the dateClicked property of the calendar:
 111      if (calendar.dateClicked) {
 112        // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
 113        var y = calendar.date.getFullYear();
 114        var m = calendar.date.getMonth();     // integer, 0..11
 115        var d = calendar.date.getDate();      // integer, 1..31
 116        // redirect...
 117        window.location = "/" + y + "/" + m + "/" + d + "/index.php";
 118      }
 119    };
 120  
 121    Calendar.setup(
 122      {
 123        flat         : "calendar-container", // ID of the parent element
 124        flatCallback : dateChanged           // our callback function
 125      }
 126    );
 127  &lt;/script&gt;</pre>
 128  
 129  </body>
 130  </html>