Calendar type

Date Picker/calendar type, event handling

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.
Click a token to include it in the active field
%a - Abbreviated weekday name %A - Full weekday name %b - Abbreviated month name %B - Full month name %C - Century number %d - The day of the month (00 .. 31) %e - The day of the month (0 .. 31) %H - Hour (00 .. 23) %I - Hour (01 .. 12) %j - The day of the year (000 .. 366) %k - Hour (0 .. 23) %l - Hour (1 .. 12) %m - Month (01 .. 12) %M - Minute (00 .. 59) %n - A newline character %p - PM or AM %P - pm or am %S - Second (00 .. 59) %s - Number of seconds since Epoch %t - A tab character %W - The week number (as per ISO 8601) %u - The day of week (1 .. 7, 1 = Monday) %w - The day of week (0 .. 6, 0 = Sunday) %y - Year without the century (00 .. 99) %Y - Year including the century (ex. 1979) %% - A literal % character
 
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.