Zapatec Calendar
Javascript Calendar Point arrow   Overview
Point arrow   Wizard
Point arrow   Demos
Point arrow   Quick Guide
Point arrow   Reference Manual
Javascript Calendar image
Zapatec Calendar Demos
The following demos show various ways that you can configure and use the Zapatec DHTML calendar. Read the Common Features section to learn about the features that you can try in any of the demos.
New View our new multiple months demos
bullet Basic Calendar, Single click
Shows a basic popup calendar, and demonstrates some of the common features.
bullet Double Click, With Time
Shows a basic popup calendar where you can choose time and closes on two clicks.
bullet Use an Icon, Disable Weekend Days
A calendar that pops up on clicking an icon and where the user cannot pick a weekend day. This is a specific example of the general purpose disabling dates mechanism.
bullet Different Alignment
Calendar pops up above the button rather than under it.
bullet Flat Calendar, Different Look for Certain Days
Shows a flat, in the page, calendar that is always visible. Specific days can be displayed differently.
bullet Flat Calendar Extra Information for Certain Days
Show a flat calendar with some dates containing extra information.
bullet Popup Calendar Choose Multiple Dates
A popup calendar where the user can choose more than one date.
bullet Online Reservation Date Picker
Two calendars for check-in and check-out with many features to make the process of reserving online intuitive.
bullet Highlight in online reservation date picker
Two calendars for check-in and check-out with the additional feature of highlighting the dates in between.
bullet Popup Calendar Update Drop-Downs
Instead of a text box, the dates are saved in drop-down menus.
bullet Saving Different Dates in Cookies
Save one or more dates in a cookie so that when the user comes back the date shows in the text box.
bullet Limit Time as Well as Day Choice
Limits the times the user can choose as well as the dates.
bullet Choose Multiple Dates in a Flat Calendar
Users can choose multiple dates in this flat calendar.
bullet Two Months Calendar New
The calendar displays two months. The current month and the next month.
bullet Six Months Calendar New
This calendar displays Six months in two rows of three months. The second month is the Control Month for the calendar. All the standard controls for next month, next year, etc are in the Control month.
bullet Time Interval Calendar New
The calendar is set up to let you choose times at 15 minutes intervals. You can set the time interval to other numbers, see timeInterval option.
bullet Special Days New
Show Special Days with multiple vertical months. When you click on a Special Day in the calendar a pop up window will show the Date and Special Day. The months are restricted to Jan 2005 to Dec 2006.
bullet Day of Week Selection New
Flat Calendar Date Range, Select Multipe Days and/or Week Day. Date Range is Today plus 30 days. Click on a Week Day to Select all days for that Week Day in the Date Range.
Common Features
Changing Months/Years
Use the navigation buttons ("<<", "<", ">", ">>") to move to the previous or next month or year. Keep the mouse button pressed over one of these buttons to get a drop-down menu with a list of months/years.
Today and History
Click on the today button and it will take you to today's date. Keep it pressed and it will show you your last ten choices. You can select one of these as your choice.
Changing the first day of the week
You can click on "Mo", "Su", etc. to make that day the first day of the week. This change is persistent and will apply to other Zapatec DHTML Calendars on your site.
Keyboard Navigation
Use the keyboard to select dates (does not work with Opera 7 or Konqueror/Safari). The following keys are available:
  • ← , → , ↑ , ↓ -- select date
  • CTRL + ← , → -- select month
  • CTRL + ↑ , ↓ -- select year
  • SPACE -- go to today date
  • ENTER -- accept the currently selected date
  • ESC -- cancel selection
Moving the DHTML Calendar
You can drag the "status bar" (where the tooltips show) or title bar (where the currently selected month/year show) to move the whole calendar.



Contact Us | Employment

© 2004 Zapatec, Inc.