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