Boutons de déroulement de l'arborescence en png24.
[Plinn.git] / 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>