## 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 documentation is available.

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 documentation.

    <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>