skins/jscalendar/simple-2.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 </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>