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 — 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 | ><div style="float: right; margin-left: 1em; margin-bottom: 1em;" |
---|
82 | id="calendar-container"></div> |
---|
83 | |
---|
84 | <script type="text/javascript"> |
---|
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 | </script></pre> |
---|
106 | |
---|
107 | </body> |
---|
108 | </html> |
---|