skins/jscalendar/simple-3.html

   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>