The Zapatec Calendar acts as a date picker , letting your
users easily choose dates on your web site. Using this wizard you
can easily configure the different calendar options. Click on next
and Back to move forward and backwards in the panes. Notice that
some panes have a button to show advanced options.
?
A javascript date picker lets your users choose a date using
a calendar that is displayed on the web site. This date
picker lets the users croll back and forth between months and
even years, and doesn't require popping a new window which modern
browsers block. The date picker is writen in javascript which means
that it will work for the vast majority of users on the Internet.
Choose between a popup and a flat calendar. A popup calendar
usually applies to an input field and pops up whenever needed.
A flat calendar is always visible in the page.
Choose calendar type:
?
To see an example of either calendar, choose the
type, click on the Test your Calendar tab on the
left, and click on the Test button
in the tab.
?
Enter the ID of the input field that you
want to link the calendar to.
?
Clicking on the element with this ID often a button
containing "..." opens the calendar.
?
The "display area" is an element where the
calendar displays the date.
?
Select the event that triggers the display of the
calendar. The display is triggered by this action on the following items
"button", "display area" or "field" in this
order.
Â
?
In "double click mode", a popup calendar will
close when an end-user clicks on a date that is
already selected.
?
In electric mode, the calendar will call the "date
selected handler" for each month/year change.
The ID of an element that the calendar will appear into.
The name of the callback function.
Â
A flat calendar is useless without a
"callback" A callback is a function supplied
by you that can do anything you want. This
function executes when an end user clicks on a
date in the flat calendar. The most common
need is to redirect the browser to a new
location, based on the clicked date. Our
default callback (generated when you reach the
"Get Your Code" tab) will show you how to do this.
Lang. and theme
Language and theme
Chose the language that you wish to present your
calendar in, as well as your favorite theme, below.
Â
Basic setup
Basic javascript date picker/calendar setup.
?
Select the first day of the week in the calendar/date picker.
Note that your users can also customize this for their own
use by clicking the day name in the actual date picker/calendar.
?
The calendar can display week numbers
according to the algorithm defined by ISO 8601. Uncheck
this if you do not want week numbers in your calendar.
?
Check "Show adjacent months" if you want the calendar to display
days from adjacent months. Note that calendars that display
days from other months are fixed size - they always display
six weeks. Calendars that do not display days from other
months will sometimes display five weeks and other times
six.
?
Check this box if you want the calendar to display
and allow selection of time.
?
Select time format. Chosing 12h format
also allows the selection of am/pm.
?
Limits the times your users can choose. They can only choose
in the increments you specify. For instance if you choose 15, they will
only be able to choose times at :00, :15, :30, :45.
?
In the drop-down year menus, the years can be displayed with
a certain step after the next or previous year. The next or
previous year is always the first one displayed, no matter
how many steps you choose between years.
Â
/
→
/
Please note that this option will not affect the wizard's calendar -- the limit
will not be imposed in the calendar on the left. It will work
in "test your calendar" and with the generated code.
?
Limit the range of dates your users can select in the date picker/Calendar.
Formats
Date and time formats
Use the form below to define how the calendar should
display or submit date/time.
?
Here you define the date and time formats as they are sent to your
server and displayed to the user. Start by choosing from the sample
format drop down menu.
You can then customize by clicking on the buttons with the
different dates and time format. Finally, you can edit and add
spaces or brackets by typing directly into the input field.
As you make these changes you can see today's date formatted with your
choices in the Sample Output in the
date picker wizard.
Â
Sample Output:
Â
?
You can see the date picker format that is inserted in the input field.
This is usually what the server gets from your calendar.
Â
Sample Output:
Â
?
The "display area" date format. You may wish to
use a display area if your input field is hidden.
Multiple Months
Test your code
You can choose to display more than one month in your calendar.
?
You can choose to display between one and 12 months in your
calendar.
?
Choose the control month. The control month is the month in which
the default date, usually today's date, is displayed.
For example when
the default date is 8/15/2005, the calendar is set to display two months,
and the default month is 1, the calendar will display August and September
of 2005. If the default month is 2, the calendar will display July and August.
?
Number of months in a horizontal row. For instance you can have
twelve months displayed either three rows of four months or four
rows of three months
This also controls the layout of months in vertical mode. You can have
six months as two rows of three months or three rows of tow months. Notice
that in vertical mode the months progress from top to bottom.
As a rule, if you have more than one column you should probably use
horizontal mode.
?
When checked, months are incremented vertically. Otherwise they are incremented
horizontally. This only matters when you have more than one row and more than one column
of months. Notice that Months In a Row affects the orientation of the
months too.
Test your calendar
Test your code
Click on the "Test" button to test your Javascript Calendar.
This opens a new window so please make sure popups are for this
web site are allowed in your browser.
If you are happy with the results, click on next to got to the
last step and have the code generated. The following is the
path that will be used for the calendar files. This will
usually be correct if you are running the wizard on your web
server. Otherwise, edit the path to point to the correct location.
Get your code
Copy/paste your code
Your code is below. Select it all, copy and paste it
into your favorite editor to save it locally.