-
Notifications
You must be signed in to change notification settings - Fork 9
/
Copy pathsimple-3.html
130 lines (105 loc) · 4.38 KB
/
simple-3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<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>