1 <html style=
"background-color: buttonface; color: buttontext;">
4 <meta http-equiv=
"content-type" content=
"text/xml; charset=utf-8" />
6 <title>Simple calendar setup [flat calendar]
</title>
8 <!-- calendar stylesheet -->
9 <link rel=
"stylesheet" type=
"text/css" media=
"all" href=
"calendar-win2k-cold-1.css" title=
"win2k-cold-1" />
11 <!-- main calendar program -->
12 <script type=
"text/javascript" src=
"calendar.js"></script>
14 <!-- language for the calendar -->
15 <script type=
"text/javascript" src=
"lang/calendar-en.js"></script>
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>
21 <style type=
"text/css">
22 .special { background-color: #
000; color: #fff; }
29 <h2>DHTML Calendar
— for the impatient
</h2>
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>.
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
50 <div style=
"float: right; margin-left: 1em; margin-bottom: 1em;"
51 id=
"calendar-container"></div>
53 <script type=
"text/javascript">
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
60 function dateIsSpecial(year, month, day) {
61 var m = SPECIAL_DAYS[month];
63 for (var i in m) if (m[i] == day) return true;
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
77 window.location =
"/" + y +
"/" + m +
"/" + d +
"/index.php";
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
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>
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>
103 ><div
style=
"float: right; margin-left: 1em; margin-bottom: 1em;"
104 id=
"calendar-container"></div
>
106 <script
type=
"text/javascript">
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
117 window.location =
"/" + y +
"/" + m +
"/" + d +
"/index.php";
123 flat :
"calendar-container", // ID of the parent element
124 flatCallback : dateChanged // our callback function
127 </script
></pre>