Zapatec Calendar
1 Get the Zapatec DHTML Calendar files
1.1 Download the Zip file
1.2 Unzip zpcal.zip
2 Create a Calendar with the Wizard
2.1 What does the Wizard do?
2.2 How to Start the Wizard
2.3 Using the Wizard
2.4 Theme and Language
2.5 Basic Setup
2.5.1 First day of week
2.5.2 Show week numbers
2.5.3 Show other months
2.5.4 Show Time
2.5.5 Time Format
2.5.6 Year Step
2.5.7 Date and time formats
2.6 Events
2.7 Generate
3 Quick Startup (Without Wizard)
3.1 Project files
3.1.1 The zpcal folder
3.1.2 The src folder
3.1.3 The demo folder
3.1.4 The doc folder
3.1.5 The lang folder
3.1.6 The themes folder
3.2 Set Up Your Calendar
3.2.1 insert the headers
3.2.2 Path Warning
3.3 Create the Calendar Form
3.3.1 Insert the form code
3.4 Insert the Calendar configuration code
3.5 Copy your files to your web server
3.6 Test the calendar application
3.7 Change Included Files
3.7.1 Use a Different Themes
3.7.2 Use a Different Language
3.8 Customize Setup Options
3.8.1 Change to Flat Calendar
3.8.2 Change date and time format
3.8.3 Show time
3.8.4 Time Format
4 Sample Calendar Configurations
4.1 Basic Single click
4.2 Double click, with time
5 Calendar Setup Detailed Parameters
The DHTML Calendar files are bundled in a zip file. Click on the download link in the Calendar section of Zapatec's web site, and follow the instructions to download the file.
Save the file (zpcal.zip) to your website's root folder on your computer or server.
On your computer, go to the folder where you saved the file zpcal.zip.
zpcal.zip contains a folder called zpcal that holds all of the files you will need to create your calendar.
Open or double-click zpcal.zip to unzip or unpack it.
The Wizard generates the code for exactly the kind of calendar you want! It's a Graphic User Interface (GUI) that allows you to visually select the Language, Theme, Size, Style, and more. Once you have made your selections, the Wizard will create the code you need to place in your HTML document, form, or application with the click of a button.
If you haven't done so follow the instructions in section 1.1. to download the Calendar files.
Navigate to your DHTML Calendar folder (zpcal)
Open the Wizard directory (folder)
Open index.html in your Web browser
The Wizard page displays the calendar you are creating as you make your selections. It will update as you choose the features you want so that you can see what the end result will be. This is a case of "What You See is What You Get" (WYSIWYG). Click on Next and Previous to move through the panes, or choose a specific pane from the menu on the left hand side.
Click Next to move to the Theme and Language page and start creating your calendar.
Choose the language in which you want to present your calendar.
Select the theme you want for your calendar.
If you want your calendar to display smaller, check the box that says "Use the small version." Keep in mind that later selections, such as show other months, will affect calendar size.
Watch the DHTML Calendar on the screen as it changes with your selections. You can change your selections to view different themes and languages. Keep in mind that later selections, such as show other months, will affect calendar size.
Select the first day of week by using the drop-down box.
Check if you want the Calendar to display week numbers. The Calendar can calculate and display week numbers using the ISO 8601 standard. This can be very handy for someone who needs to know which week of the year they are working with.
Check Show other 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 don't display days from other months will sometime display five weeks and other times six.
Check to have your users prompted to enter a time as well as a date.
If you checked "Show Time" you can choose from a 12-hour or 24-hour clock.
This is useful for 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.
To further customize your calendar, choose from a multitude of date and time formats. Some examples of date formats are:
January 1, 2007 01-01-07 1/1/2007 01-Jan-07
Events cause the calendar to do something specific based on the user's actions. For example, you can elect to have the calendar display a tip of the day tool tip when the user first clicks on it. In this case, the Event would be onClick
When you click "Generate" the code for your calendar will display in a window on this screen. You can copy this code and paste it into your HTML document for a quick-and-easy calendar setup!
If you have not done so follow the instructions in section 1.1. to download and unzip the Calendar files.
Here's a description of the project files, excluding documentation and example files.
The main directory containing all of the other directories and files
The src folder contains the JavaScript that makes the program work
the main program file (calendar.js). This defines all the logic behind the calendar widget.
helper functions for quick setup of the calendar (calendar-setup.js).
The demo folder holds examples of many of the types of calendars you can use. It is a great resource for examples of usage and the HTML code needed to make it happen.
Example1.html: a basic, single-click version of the Calendar
Example2.html: requires the user to double-click and displays the time
Example3.html: an example of the single-click calendar with icon and disabled weekends
Example4.html: an example of the single-click calendar with a different alignment
Example5.html: a flat calendar with special days highlighted
Example6.html: a flat calendar with notes and dates with special names
Example7.html: offers the end-user the opportunity to select multiple dates
Example8.html: simulates coordinated dates like check-in and check-out at a hotel
The doc folder contains all of the help and support files to assist you with the Calendar. Help is provided in HTML, and PDF formats with and without screenshots for ease of use and display.
The language folder contains up to twenty different languages - from English to French, Spanish, Italian and more - to provide you with the greatest possible versatility and ease of use for you and your end-users. Afrikaans, English, French, German, Spanish, Finnish, Croatian, Hungarian, Italian, Romanian, Slovenian, and Turkish are currently available.
The themes folder contains the CSS files that control the aesthetics of your calendar including special themes.
In your web editor (Dreamweaver, UltraEdit, etc.), open the web page where you want the calendar placed. Insert your cursor before the ending </head> tag. Paste the following style path and script paths before the ending </head> tag:
<link rel="stylesheet" type="text/css" href="themes/winxp.css"/> <script type="text/javascript" src="src/utils.js"/> <script type="text/javascript" src="src/calendar.js"/> <script type="text/javascript" src="lang/calendar-en.js"/> <script type="text/javascript" src="src/calendar-setup.js"/>
The five lines point to five different files located in the calendar folder. The files are:
winxp.css
Located in the themes folder.
Controls the theme (appearance) of the Calendar.
utils.js
Located in the src folder
Contains utility functions used by the calendar.
calendar.js
Located in the src folder
Contains the functions that control the functionality of the Calendar
calendar-en.js
Located in the lang folder
Controls the language in which the Calendar is displayed
calendar-setup.js
Located in the src folder
Allows for quick and easy set up and customization of the calendar.
If your web page containing the Calendar is saved in the calendar folder, the above lines will work without any changes. If, however, you save your web page in another location (like directly under your website's root folder), you will need to add the folder information to the front of the file path so that your web page can read these files. For instance if you keep the files in the zpcal folder you should include the following lines:
<link rel="stylesheet" type="text/css" href="zpcal/themes/winxp.css"/> <script type="text/javascript" src="zpcal/src/utils.js"/> <script type="text/javascript" src="zpcal/src/calendar.js"/> <script type="text/javascript" src="zpcal/lang/calendar-en.js"/> <script type="text/javascript" src="zpcal/src/calendar-setup.js"/>
Most web developers use the Zapatec HTML Calendar with forms. The most basic form of setup is to create a small form with a text box and a button.
Name the text box "data" and give the button an id of "trigger".
<form action="#" method="get"> <input type="text" name="date" id="f_date_b" /> <button type="reset" id="f_trigger_b">...</button> </form>
Quick Start: paste this code into the body of your document.
Now, insert the code that makes the calendar pop up when your form is used. The following code should be pasted directly after </form> and before </body>
<script type="text/javascript"> Zapatec.Calendar.setup( inputField : "data", // This is the ID of your form's text field ifFormat : "%m %d, %Y", // Format in which you want the date returned button : "trigger" // "trigger" is the ID of the form's button } </script> <noscript> <br/> This page uses a <a href='http://www.zapatec.com/products/prod1'> Javascript Calendar </a>, but your browser does not support Javascript. <br/> Either enable Javascript in your Browser or upgrade to a newer version. </noscript>
Quick Start: paste this code into the body of your document AFTER the </form> tag.
Using your editing or FTP program, copy or "put" your web page and the entire calendar folder to the root of your website.
Using your web browser, navigate to the web page that you created to include the Zapatec HTML Calendar. Click the "trigger" button to see if the calendar pops up. Click a date to select it and make sure that the date displays in the empty box. Congratulations! You have set up the most basic version of the Zapatec HTML Calendar! Now, on to the fun and exciting features you can change with this highly adaptable application!
You can change the theme or language of the calendar by choosing to include a different file in your header.
One of the lines you inserted in Section 3.2.1 includes the winxp.css file in the themes folder. Winxp is one of the themes that comes with the Zapatec DHTML Calendar. You can choose between several themes by changing the file called by the path. Look in the themes folder for more options.
1. Theme 1 - Windows XP Use this line:
<link rel="stylesheet" type="text/css" href="themes/winxp.css"/>
Get this result: Windows XP Theme:
2. Theme 2 - Green Use this line:
<link rel="stylesheet" type="text/css" href="themes/green.css"/>
Get this result: Green Theme
One of the lines you inserted in Section 3.2.1 was
<script type="text/javascript" src="lang/calendar-en.js"/>
This line controls the language in which your calendar is displayed. The file called here is calendar-en.js, the English file, and it is being called from the lang folder. To change the language, change the file name to one of those in the lang directory. Examples are:
English: <script type="text/javascript" src="lang/calendar-en.js"></script> French: <script type="text/javascript" src="lang/calendar-fr.js"></script> Italian: <script type="text/javascript" src="lang/calendar-it.js"></script>
In section 3.4 you saw how to create a calendar by inserting the Calendar.setup javascript code. You can customize the calendar by setting various options in the setup section. For readability the options are displayed one on a line. Javascript syntax requires that there be a comma after each option except for the last one.
The flat version of the Zapatec DHTML Calendar is simply one that displays on the page all the time instead of popping up when clicked. To make the Zapatec DHTML Calendar flat, you need to put it in a placeholder like a table or a div on your web page. Here is an example using a div to hold the calendar:
Paste this code into the body of your html file:
<div id="calendar-container"></div>
The div is the container that holds your calendar.
Now, we will use JavaScript to put the calendar inside the DIV. Important: the JavaScript code must be placed after the div code. Paste the following code after your div container code:
<script type="text/javascript">
Zapatec.Calendar.setup( {
flat : "calendar-container" // ID of the parent element
});
ifFormat": "%Y/%m/%d";
The "%Y/%m/%d" tells the calendar to display the date as year/month/day. You can change this in many ways. For example, "%B %d, %Y " tells the calendar to display the date as month day, year (capital B is for month, lower-case d for day, and capital Y for a four-digit year.
Some common abbreviations you can use are as follows. In the case of capital letters, you can often set an abbreviated version by using lower-case. For example, if you want January spelled out, use capital B. If you want January displayed as Jan, use lower-case b.
%A full weekday name (user lower-case for abbreviated)
%B full month name (user lower-case for abbreviated)
%d the day of the month ( 00 .. 31 )
%Y year including the century ( ex. 1979 ) (user lower-case for a two-digit year)
For a full list of the formatting abbreviations, see the Date Parameters section of the programmer's manual.
showsTime:true,
When true will prompt for time as well as date.
timeFormat: "24",
Changing the "24" to "12" will change the time display on your calendar from a 24-hour to a 12-hour clock.
The following are a few of the many different ways in which you can use and present the Calendar.
(example: 2004-11-02 [45] 15:11)
Zapatec.Calendar.setup({
inputField : "sel1", // id of the input field
ifFormat : "%Y-%m-%d [%W] %H:%M", // format of the input field
button : "button1", // What will trigger popup of the calendar
showsTime : false //don't show time, only date
});
Form elements: label, text box, and button
Display the calendar by clicking on the "..." button You can select the Year, Month, and Date using your mouse button or keyboard commands (listed above). Click the date you want with your mouse button or press the <Enter> key to select.
(example: Tue, Nov 2, 2004 [03:12 PM])
Zapatec.Calendar.setup({
inputField : "sel2", // id of the input field
singleClick : false, // require two clicks to submit
ifFormat : '%a, %b %e, %Y [%I:%M %p]', // format of input field
showsTime : true, // show time as well as date
button : "button2" // trigger button
});
Form elements: text box and button Set the showsTime parameter to true and singleClick to false.
Here is the complete list or properties that can be interpreted by calendar.setup. All of them have default values, so you can pass only those which you would like to customize.
You must pass at least one of the following: inputField, displayArea or button to set up a popup or flat DHTML calendar. If you do not, you will get a error message indicating that there's nothing to set up.