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.
Basic Calendar, Single click
This is a basic popup calendar that demonstrates some of the common features.
Double Click, with Time
This shows a basic popup calendar in which you can choose a time. The calendar closes on two clicks.
Single Click, Use an Icon, Disable Weekend Days
This calendar pops up when you click an icon. The user cannot pick a weekend day. This is a specific example of the general-purpose disabling-date mechanism.
Flat Calendar, Different Look for Special Days
This is a flat, in-the-page calendar that is always visible. Special days can be displayed in different styles.
Flat Calendar, Extra Information for Certain Days
This is a flat calendar in which some dates display extra information.
Popup Calendar, Choose Multiple Days
This shows a popup calendar in which the user can choose more than one date.
Online Reservation Date Picker with Two Coordinated Dates
This shows two calendars used for check-in and check-out with many features that make the process of reserving online intuitive.
Highlight in Online Reservation Date Picker
This shows two calendars for check-in and check-out, highlighting the dates between the check-in and check-out dates.
Popup Calendar, Update Drop-down Menus from a Calendar
This calendar saves dates in drop-down menus instead of a text box.
Saving Different Dates in Cookies
This demo saves one or more dates in a cookie, so that when the user returns, the saved date is displayed in the text box.
Six Month Calendar
This calendar displays six months in two rows of three months. The second month is the control month for the calendar. The control month is the month in which the default date is highlighted.
Special Days
This calendar shows special days with multiple months arranged vertically. When you click a special day in the calendar, a popup window displays the date and the special day. The months are restricted to the period from Jan 2005 through Dec 2006.
Day of Week Selection
This flat calendar demonstrates the date-range and multiple-days-selection features.
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 the today button to go to today's date. Keep it pressed down to see
your last ten clicks. You can designate one of these as
your final selection.
Changing the first day of the week
You can click "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 on most browsers. 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 and year show) to move the whole calendar.