This page lists some common setups for the popup calendar. In order to see how to do any of them please see the source of this page. For each example it's structured like this: there's the <form> that contains the input field, and following there is the JavaScript snippet that setups that form. An example of flat calendar is 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.
Basic setup: one input per calendar. Clicking in the input field activates the calendar. The date format is "%m/%d/%Y %I:%M %p". The calendar defaults to "single-click mode".
The example below has been updated to show you how to create "linked" fields. Basically, when some field is filled with a date, the other is updated so that the difference between them remains one week. The property useful here is "onUpdate".
Input field with a trigger button. Clicking the button activates the calendar. Note that this one needs double-click (singleClick parameter is explicitely set to false).
Input field with a trigger image. Note that the Calendar.setup function doesn't care if the trigger is a button, image, or anything else. Also in this example we setup a different alignment, just to show how it's done. The input field is read-only (that is set from HTML).