DHTML Calendar — for the impatient

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.


?April, 2025
Today
wkSunMonTueWedThuFriSat
13  12345
146789101112
1513141516171819
1620212223242526
1727282930   
18       
Select date
Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec

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>