This page demonstrates how to setup a flat calendar. Examples of popup calendars are available in another page.
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 that impatient, ;-) complete documenation is available.
? | December, 2024 | ||||||
« | ‹ | Today | › | » | |||
wk | Sun | Mon | Tue | Wed | Thu | Fri | Sat |
48 | 1 | 2 | 3 | 4 | 5 | 6 | 7 |
49 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
50 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
51 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |
52 | 29 | 30 | 31 | ||||
1 | |||||||
Select date |
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".
Following there is the code that has been used to create this calendar. You can find the full description of the Calendar.setup() function in the calendar documenation.
<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>