--- /dev/null
+<html style="background-color: buttonface; color: buttontext;">
+
+<head>
+<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
+
+<title>Simple calendar setup [flat calendar]</title>
+
+ <!-- calendar stylesheet -->
+ <link rel="stylesheet" type="text/css" media="all" href="calendar-win2k-cold-1.css" title="win2k-cold-1" />
+
+ <!-- main calendar program -->
+ <script type="text/javascript" src="calendar.js"></script>
+
+ <!-- language for the calendar -->
+ <script type="text/javascript" src="lang/calendar-en.js"></script>
+
+ <!-- the following script defines the Calendar.setup helper function, which makes
+ adding a calendar a matter of 1 or 2 lines of code. -->
+ <script type="text/javascript" src="calendar-setup.js"></script>
+
+ <style type="text/css">
+ .special { background-color: #000; color: #fff; }
+ </style>
+
+</head>
+
+<body>
+
+<h2>DHTML Calendar — for the impatient</h2>
+
+ <blockquote>
+ <p>
+ This page demonstrates how to setup a flat calendar. Examples of
+ <em>popup</em> calendars are available in <a
+ href="simple-1.html">another page</a>.
+ </p>
+ <p>
+ The code in this page uses a helper function defined in
+ "calendar-setup.js". With it you can setup the calendar in
+ minutes. If you're not <em>that</em> impatient, ;-) <a
+ href="doc/html/reference.html">complete documenation</a> is
+ available.
+ </p>
+ </blockquote>
+
+
+
+<hr />
+
+<div style="float: right; margin-left: 1em; margin-bottom: 1em;"
+id="calendar-container"></div>
+
+<script type="text/javascript">
+ var SPECIAL_DAYS = {
+ 0 : [ 13, 24 ], // special days in January
+ 2 : [ 1, 6, 8, 12, 18 ], // special days in March
+ 8 : [ 21, 11 ] // special days in September
+ };
+
+ function dateIsSpecial(year, month, day) {
+ var m = SPECIAL_DAYS[month];
+ if (!m) return false;
+ for (var i in m) if (m[i] == day) return true;
+ return false;
+ };
+
+ function dateChanged(calendar) {
+ // Beware that this function is called even if the end-user only
+ // changed the month/year. In order to determine if a date was
+ // clicked you can use the dateClicked property of the calendar:
+ if (calendar.dateClicked) {
+ // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
+ var y = calendar.date.getFullYear();
+ var m = calendar.date.getMonth(); // integer, 0..11
+ var d = calendar.date.getDate(); // integer, 1..31
+ // redirect...
+ window.location = "/" + y + "/" + m + "/" + d + "/index.php";
+ }
+ };
+
+ Calendar.setup(
+ {
+ flat : "calendar-container", // ID of the parent element
+ flatCallback : dateChanged, // our callback function
+ dateStatusFunc : function(date, y, m, d) {
+ if (dateIsSpecial(y, m, d)) return "special";
+ else return false; // other dates are enabled
+ // return true if you want to disable other dates
+ }
+ }
+ );
+</script>
+
+<p>The positioning of the DIV that contains the calendar is entirely your
+job. For instance, the "calendar-container" DIV from this page has the
+following style: "float: right; margin-left: 1em; margin-bottom: 1em".</p>
+
+<p>Following there is the code that has been used to create this calendar.
+You can find the full description of the <tt>Calendar.setup()</tt> function
+in the <a href="doc/html/reference.html">calendar documenation</a>.</p>
+
+<pre
+><div style="float: right; margin-left: 1em; margin-bottom: 1em;"
+id="calendar-container"></div>
+
+<script type="text/javascript">
+ function dateChanged(calendar) {
+ // Beware that this function is called even if the end-user only
+ // changed the month/year. In order to determine if a date was
+ // clicked you can use the dateClicked property of the calendar:
+ if (calendar.dateClicked) {
+ // OK, a date was clicked, redirect to /yyyy/mm/dd/index.php
+ var y = calendar.date.getFullYear();
+ var m = calendar.date.getMonth(); // integer, 0..11
+ var d = calendar.date.getDate(); // integer, 1..31
+ // redirect...
+ window.location = "/" + y + "/" + m + "/" + d + "/index.php";
+ }
+ };
+
+ Calendar.setup(
+ {
+ flat : "calendar-container", // ID of the parent element
+ flatCallback : dateChanged // our callback function
+ }
+ );
+</script></pre>
+
+</body>
+</html>
projects / Plinn.git / blobdiff