| About Us | Services | Download | Order | Support | |

Tigra Calendar PRO v2.1 - Documentation

Table of Contents

• Tigra Calendar PRO Documentation
• Table of Contents
• Features
• Compatibility Table
• Distribution Package Files
• Modes
• What is in Calendar Inside
• Modal Calendar with default generated controls
• Onpage Calendar with default generated controls
• Popup Calendar with default generated controls
• Redefinition of the Modal Calendar controls
• Redefinition of the Onpage Calendar controls
• Redefinition of the Popup Calendar controls
• General note for redefined elements
• TODO List of Calendar Implementation
• Document Setup
• Adding Calendar to HTML Page
• Modal Calendar Creation
• Binding a Calendar to User-Defined Controls
• Calendar Initial Setting Structure
• Types of Dates
• Date/Time Format
• Calendar Step Control Appearance
• Calendar Scope Settings Structure. Appearance Setup
• Control Set
• Control Set Appearance
• Localization
• Code Examples
• Calendar Alignment and Call Controlling Keys Examples
• Control Set Appearance Example
• Example of a Page with Multiple Calendars
• Onclick and Onclickdayall Handling Function Example
• Onclickdayall and Onclickcontrol Handling Function Example
• Forbidden, Allowed and Marked Example
• Terms and Conditions
• Regular License
• Developer License
• Discounts
• Usage
• Technical Support
• Violations of Terms and Conditions
• Links and References

Description

Tigra Calendar PRO is highly configurable JavaScript Calendar offering high reliability and wide browsers support.
This script allows your visitors to pick any allowed date or timestamp from a nice looking calendar without typing. Result is returned in a single text field in any format that you require. No more messing with date formats conversion. Tigra Calendar PRO is ideal for web application with database back end such as hotel reservation, ticket booking and others. Script is intuitive to use and easy to maintain.

Features

• Ideally fits into your new or existing site:
• Any number of calendars on single page
• Supports ANY date or timestamp format
• Comes in three versions (in form, pop-up and modal mode) to best suit the layout of your form
• Flexible template allows to change any aspect of calendar's appearance (colors, fonts, distances, sizes etc.) You can even hook calendar to existing stylesheets
• Quick and easy date or timestamp selection
• Any date in the past or future can be picked in few clicks without text typing
• Months and Years can be either scrolled or picked from the listbox
• Date reset button
• Initial date can be set by either client side or server side script
• Easily localized:
• Configurable months and weekdays titles
• Configurable start of the week day
• List of holidays or other specially highlighted days can be specified
• Dates selection can be limited in different ways:
• Date limits (max date, min date or both) are supported as either absolute date or relatively
• Forbidden dates list
• Allowed dates list
• Configurable behavior on out of range date selection (return to last selection or set closest allowed date, show error message or not)
• Opportunity to use periodical dates and list of fixed dates together for following settings (allowed, forbidden, marked etc.)
• Extra day selection handling features:
• A JavaScript function can be called
• Any URL can be assigned to browse
• Best choice ever available:
• Reasonable price (from only $29) saves your money and time
• Comes with free setup support
• All popular browsers supported (compatibility table)
• Future browser's versions ready
• Low weight and high performance
• Overlaps select-box form elements if in modal mode
• Free updates and discounts for other products are offered

Compatibility Table

Tigra Calendar PRO works with any browser that capable of generic DHTML.
Here is a table of the application compatibility:

Distribution Package Files

Base Tigra Calendar PRO distribution package includes all three calendar modes. Each mode is stored in separate folder and is independent from other ones. Distribution package contains the following directory structure:

• modal_mode - directory contains the modal mode calendar files
• img - A directory contains images for a calendar
• calendar.js - Calendar script core file for the modal mode calendar
• calendar.css - Calendar style setting file
• cal_tpl1.js - Calendar settings file
• cal_tpl2.js - Calendar settings file
• cal_strings.js - Calendar user defined messages and strings file
• onpage_mode - directory contains the onpage mode calendar files
• img - A directory contains images for a calendar
• calendar.js - Calendar script core file for the modal mode calendar
• calendar.css - Calendar style setting file
• cal_tpl.js - Calendar settings file
• cal_strings.js- Calendar user defined messages and strings file
• popup_mode - directory contains the popup mode calendar files
• img - A directory contains images for a calendar
• calendar.js - Calendar script core file
• calendar.css - Calendar style setting file
• calendar.html - Calendar pop-up window file - is needed for pop-up mode only
• cal_tpl.js - Calendar settings file
• cal_strings.js - Calendar user defined messages and strings file

Legend:
bold text - a directory
bold italic text - calendar files

Note that core calendar.js file is presented in all modes but it is not the same for all of them. So, pop-up functionality can not be expected from calendar.js file of modal or on-page modes and vice versa. All other same named files can be used with any mode each instead of other.

Modess

If on browsed HTML page Tigra Calendar PRO is normally either hidden with control icon to open, or always visible - depending on application mode chosen.

General concept of calendar work is the following:

1. Page visitor opens calendar if it is not visible.
2. The visitor selects the date (and time) desired.
3. Date is passed to certain HTML form input field.

There are 3 Tigra Calendar PRO modes:

• on-page - calendar is always visible on the page, selected value is passed to hidden input form field;
• modal - initially calendar is not visible, appears below opening icon in HTML layer, can not be moved run-time, selected value is passed to text input form field;
• pop-up - initially calendar is not visible, appears in a center of the screen in a separate window, can be moved hence, selected value is passed to text input form field

What is in a calendar inside

This section helps to understand how the calendar is built inside and what are differences between various calendar modes.

Visually all calendars modes consist of the tree basic element:

• TEXT INPUT is used for date entering and/or displaying of date selected by the calendar;
• CALENDAR ICON is a control element that serves to show (or/and hide) calendar pane or calendar window;
• POSITIONING ELEMENT is an anchor element to allocate calendar pane;
• CALENDAR PANE contains date select controls and step control elements.

In general, a call of calendar constructor generates a HTML table that contains certain set of the above basic visual elements. The most common relocation map of those elements is represented bellow:

The CALENDAR ICON cell takes two rows in hight and is located righthand from TEXT INPUT and POSITION ELEMENT cells. POSITION ELEMENT cell lies under TEXT INPUT cell.

Basic visual elements of the calendar are represented by the following HTML code:

• TEXT INPUT - is a form element described by HTML tag <input> but more detailed <input type="text" ...>
• CALENDAR ICON - is an anchored image represented by anchor HTML tag <a ...><img src="..."></a ...>
• POSITION ELEMENT- is an anchored image represented by anchor HTML tag <a ...><img src="..."></a ...>. Usually, it's a 1x1 pixel transparent image

Depending on calendar mode and chosen method of control generation the relocation map of the basic element is slightly vary.
First of all consider all calendar mode with automatically (default) generated controls. This mean that any control(basic element) doesn't redefine by keys 'controlname', 'pictname' or 'positionname'

Modal Calendar with default generated controls

This mode of a calendar is most complex at the point of view customization because all three basic element are present and may be redefined.

Onpage Calendar with default generated controls

This mode doesn't generate any POSITION ELEMENT because CALENDAR PANE appears in a HTML form at position where calendar's constructor was called. On the other hand the mode doesn't require to generate any CALENDAR ICON because CALENDAR PANE is always visible.

Popup Calendar with default generated controls

The mode doesn't generate a POSITION ELEMENT because a CALENDAR PANE is displayed in new pop-up window.

Redefinition of the Modal Calendar controls

There are seven possible variants of the basic elements redefinition for the Modal Calendar mode. Each variant has a head which tell that element has been redefined. Also each variant contain a basic elements relocation map, code that generate this condition and part of Initial Setting Structure if it's need.

   
<form name="a_form">
	...
<input  type="Text" name="control1" id="control1">
	...
<script language="JavaScript">
var CAL_INIT = {
...
	'controlname': 'control1',
	'formname':    'a_form',
...
	}
	new calendar(CAL_INIT, CAL_TPL1);
</script>
   ...
   	</form>

Generated controls map

CALENDAR ICON

  
	... 
<img src="cal.gif" name="an_img" onclick="A_CALENDARS[0].showcal()">
	...
<form name="a_form">
...
<script language="JavaScript">
var CAL_INIT = {
...
	'picttype': 'img', 
	'pictname': 'an_img',
	'formname': 'a_form',
...
	}
	new calendar(CAL_INIT, CAL_TPL1);
</script>
   ...
   	</form>

Generated controls map

Note that the image to call the calendar is defined outside the form but before the calendar constructor.

POSITION ELEMENT

   
	... 
<img src="pixel.gif" name="a_pos" >
	...
<form name="a_form">
	...
<script language="JavaScript">
var CAL_INIT = {
...
	'positionname': 'a_pos',
	'formname':     'a_form',
...
	}
	new calendar(CAL_INIT2, CAL_TPL1);
</script>
   ...
   	</form>

Generated controls map

TEXT INPUT & CALENDAR ICON

  
...
<img src="cal.gif" name="an_img" onclick="A_CALENDARS[0].showcal()">
... 
<form name="a_form">
...
<input  type="Text" name="control1" id="control1">
	...
<script language="JavaScript">
var CAL_INIT = {
...
	'controlname': 'control1',
	'picttype':    'img', 
	'pictname':    'an_img',
	'formname':    'a_form',
...
	}
	new calendar(CAL_INIT, CAL_TPL1);
</script>
   ...
   	</form>

Generated controls map

TEXT INPUT & POSITION ELEMENT

   
...
<img src="pixel.gif" name="a_pos">
<img src="cal.gif" name="an_img" onclick="A_CALENDARS[0].showcal()">
...
<form>
	...
<input  type="Text" name="control1" id="control1">
	...
<script language="JavaScript">
var CAL_INIT = {
...
	'controlname':  'control1',
	'positionname': 'a_pos',
	'formname':     'a_form',
...
	}
	new calendar(CAL_INIT, CAL_TPL1);
</script>
   ...
   	</form>

Generated controls map

CALENDAR ICON & POSITION ELEMENT

 
...
<img src="pixel.gif" name="a_pos">
...
<img src="cal.gif" name="an_img" onclick="A_CALENDARS[0].showcal()">
...  
<form>
var CAL_INIT = {
...
	'picttype':     'img', 
	'pictname':     'an_img',
	'positionname': 'a_pos',
	'formname':     'a_form',
...
	}
...
<script language="JavaScript">
	new calendar(CAL_INIT, CAL_TPL1);
</script>
   ...
   	</form>

Generated controls map

TEXT INPUT & CALENDAR ICON & POSITION ELEMENT

 
...
<img src="pixel.gif" name="a_pos">
<img src="cal.gif" name="an_img" onclick="A_CALENDARS[0].showcal()">
...   
<form>
	...
<input  type="Text" name="control1" id="control1">
	...
<script language="JavaScript">
var CAL_INIT = {
...
	'controlname':  'control1',
	'picttype':     'img', 
	'pictname':     'an_img',
	'positionname': 'a_pos',
	'formname':     'a_form',
...
	}
	new calendar(CAL_INIT, CAL_TPL1);
</script>
   ...
   	</form>

Generated controls map

There is no map. All controls are directly defined.

Redefinition of the Onpage Calendar controls

The mode hasn't any position and calendar icon. Text input element is generated as hidden control. This mode has only one ability to redefine text input element, but only for reading a selected date form the calendar pane. Any entered date in text input will not affects on calendar pane. By the way redefinition of the text input element has no affect to Generated controls map.

TEXT INPUT

...
<input  type="Text" name="control1" id="control1">
...
<form>
...
<script language="JavaScript">
var CAL_INIT = {
...
	'controlname': 'control1',
	'formname':    'a_form',
...
	}
	new calendar(CAL_INIT, CAL_TPL1);
</script>
   ...
   	</form>

Generated controls map

Redefinition of the Popup Calendar controls

TEXT INPUT

...
<input  type="Text" name="control1" id="control1">
...
<form>
...
<script language="JavaScript">
var CAL_INIT = {
...
	'controlname': 'control1',
	'formname':    'a_form',
...
	}
	new calendar(CAL_INIT, CAL_TPL1);
</script>
   ...
   	</form>

Generated controls map

CALENDAR ICON

 
...
<img src="cal.gif" name="an_img" onclick="A_CALENDARS[0].showcal()">
...   
<form>
...
<script language="JavaScript">
var CAL_INIT = {
...
	'picttype': 'img', 
	'pictname': 'an_img',
	'formname': 'a_form',
...
	}
	new calendar(CAL_INIT, CAL_TPL1);
</script>
   ...
   	</form>

Generated controls map

TEXT INPUT & CALENDAR ICON

 
...
<img src="cal.gif" name="an_img" onclick="A_CALENDARS[0].showcal()">
...   
<form>
	...
<input  type="Text" name="control1" id="control1">
	...
<script language="JavaScript">
var CAL_INIT = {
...
	'controlname': 'control1',
	'picttype':    'img', 
	'pictname':    'an_img',
	'formname':    'a_form',
...
	}
	new calendar(CAL_INIT, CAL_TPL1);
</script>
   ...
   	</form>

Generated controls map

There is no map. All controls are directly defined.

General note for redefined elements

Any redefined element (TEXT INPUT, POSITION ELEMENT, CALENDAR ICON) MUST be declared or described before appropriate calendar constructor call where the element will be used.

TODO list of a calendar implementation

This section provide the steps to calendar implementation. In fact, it's aimed to designers who is not familiar with Tigra Calendar products or may be used as cross-reference to find a reference to information about a particular task for more experienced developers.

These steps helps you to orientate in the tasks those should be performed in a new calendar setup process. Each step contains descriptive part and part with links to the corresponding sections in the documentation.

1. Choose a calendar mode that will be used on your HTML page.
   See sections: mode
2. Create a calendar directory structure under your web-site directory and copy neccessary files to the directory according chosen calendar mode.
   
3. Initialize(setup) a HTML document where the calendar will be used.
   See sections: Document Setup,Adding Calendar to HTML Page
4. Write a HTML form where calendar will exists.
   See sections: Adding Calendar to HTML Page, What is in Calendar Inside
5. Choose a method to generate calendar controls.
   See sections: What is in Calendar Inside, Adding Calendar to HTML Page
6. Write(describe) control elements(text fields, images, button and etc.) for the calendar if need from previous step.
   See sections: Modal Calendar with default generated controls, Onpage Calendar with default generated controls, Popup Calendar with default generated controls, Redefinition of the Modal Calendar controls, Redefinition of the Onpage Calendar controls, Redefinition of the Popup Calendar controls
7. Form and fill Initial Setting Structure for the calendar. Pay attention to control elements those are used in the calendar
   See sections: Calendar Initial Setting Structure, What is in Calendar Inside

The following steps are optional but help you to gathering information about a calendar appearance customization and calendar functionality improvement.

1. Set specific dates such as forbidden days, minimal date, maximal day and etc.
   See sections: Types of Dates, Calendar Scope Settings Structure. Appearance Setup,Lists of outstanding dates
2. Setting of the displayed date format.
   See sections: Date/Time Format
3. Setting an error handling functions.
   See sections: Error handling, Localization
4. Setting an appearance of the step controls.
   See sections:Calendar Step Control Appearance, Control Set Appearance Example
5. Setting a color of the calendar
   See sections: modes
6. Setting an icon for a step controls
   See sections: modes
7. Localization
   See sections: Localization

Document Setup

Before using Tigra Calendar PRO on your HTML page you should link your Tigra Calendar PRO files to that page first. All files of desired mode should be linked to the page except of calendar.html file if in pop-up mode. In case when your Tigra Calendar PRO files and your HTML page are located in different directories you should set correct path to the Tigra Calendar PRO files. The code sample below is independent from chosen package

<head>
  <!-- some header data here -->
  <script language="JavaScript" src="cal_strings.js"></script>
  <script language="JavaScript" src="cal_tpl.js"></script>
  <script language="JavaScript" src="calendar.js"></script>
  <link rel="stylesheet" href="calendar.css">
  <!-- some header data here -->
</head>

How to run your Tigra Calendar PRO see the Adding Calendar to HTML Page section

Adding Calendar to HTML Page

After necessary application files have been linked to the page constructor lines (initialization block) for each calendar instance has to be added to the page. Constructor is a JavaScript function call which will create calendar element instance if executed. For all calendar modes calendar element will appear on the page exactly in a place where its construction line is placed in the code.

Since calendar returns selected date to an input form field it has to be initialized in a HTML form, even if the form is not needed for any other purposes.

Here is common Tigra Calendar PRO constructor call:

<form name="test_form" >
<!-- some inner HTML code of the form -->
<script language="JavaScript">
<!-- Here is a call for your Tigra Calendar PRO -->
  new calendar(CAL_INIT, CAL_TPL);
</script>
</form>

The constructor accepts 2 parameters customizing calendar instance:

1. Calendar Initial Setting structure and
2. Calendar Scope Setting structure (template)

Notes:

• You can have as many calendar instances on your page as you wish. Each calendar should be initialized separately
• Several calendar instances can share the same structure(s), i.e. different initial settings but same template

Common initialization part has been done.

Modal Calendar Creation

Modal calendar mode requires also creation block to be present on the page. Creation block is JavaScript code fragment creating the calendar - a call of create() method of calendar object instance. Since for the modal mode position of each calendar instance has to be calculated, each calendar has to be created only after whole page has been loaded, so the best place for calendar creation block is before closing tag of the HTML's body. All references to calendar instances on a page are collected in A_CALENDARS JavaScript array allowing to code all calendars on the page creation with two JavaScript lines:

<script language="JavaScript">
for (var i = 0; i < A_CALENDARS.length; i++)
  A_CALENDARS[i].create();
</script>
</body>

Note: in both pop-up and onpage modes calendar instances are created automatically with initialization block hence creation block is not required for them.

Binding a Calendar to User-Defined Controls

You can bind your calendar to any HTML element. In other words you can handle calendar call on any event in a document as well as calendar data displaying. There are several Initial Settings Structure keys to be used to control the handling:

• picttype
• pictname
• positionname

More detailed syntax is shown in the Calendar Initial Setting Structure. Also, please, see below examples.

Modal mode

By default calendar in Modal mode generates the following:

• A button to call the calendar. Its name is calicon_<Index of calendar created>
• A text field to receive a date from calendar. Its name is datetime_<Index of calendar created>
• A pixel picture to position a calendar instance. Its name is calpos_<Index of calendar created >

You can combinate default elements with user defined

...
<form name="test_form" >
<table border=1>
<tr><td colspan=2>Modal Calendar</td></tr>
<tr><td>Just a cell</td>
<!-- Now handle calendar displaying on table cell click -->
 <td onclick="A_CALENDARS[0].showcal()">Click on me!</td>
</tr>
<tr>
 <td colspan=2>
 <!-- Below control element will receive calendar date. 
 'name' and 'id' modifiers are required for different browsers. 
 The better choice is to set both -->
 <input type="text" name="abc" id="abc">
 </td>
</tr>
</table>
<script language="JavaScript">
var CAL_INIT = {
  'picttype':    'others', // a type of control element
  'controlname': 'abc', // assigns 'abc' control to receive date from calendar
  'formname':    'test_form',
  'dataformat':  'm/d/Y h:i a'
};
<!-- Here is a call for your Tigra Calendar PRO see code sample below -->	
new calendar(CAL_INIT, CAL_TPL);
</script>	
</form>
<script language="JavaScript">

In example above there is no reassignment of an anchor element, so the calendar will be shown just below the table.

Pop-up mode

Implementation technique and features for the mode are identical to ones of Modal mode except positionname. This element in not taken into account because a calendar is opened in a new window.

OnPage mode

The mode does not require control element to show calendar instance. You can use the same technique to pass a calendar date to text control element.

Calendar Initial Setting Structure

Calendar initial setting structure is a JavaScript structure supplying to calendar instance certain initial parameters and lists of outstanding dates as well. Below is a table of keys supported by the structure:

How to format appearance of today, selected, allowed, forbidden and marked days, please see Appearance Setup section.

Types of Dates

Often appears a need to highlight several dates in a calendar or to disallow them to be selected by a user. Tigra Calendar PRO supports several date (day) types:

• Today: one day is usually considered to be of current date; the calendar can be set to it by clicking on today button
• Selected: a date to be contained within a value returned by a calendar; can be defined by clicking on any calendar day or date control
• Marked: set of days connected to similar outlook on calendar; do not influence calendar functionality in any way
• Allowed: set of days allowed for selection
• Forbidden: set of days disallowed for selection

Days of each type can be formatted in unique way.

A figure below shows how above described days are located on first demo of the product distribution package:

Period Format

Format of period settings witch used in "allowed", "forbidden", "marked", "onclickday" and "linkday" structures.

Date/time Format

Tigra Calendar PRO allows date and time to be supplied and received in almost any format. Input and output date/time format is the same and has to be specified as a value of dataformat key of Calendar Initial Setting Structure.

A date/time format is an ordinary string that consists of accepted set of special format characters and delimiters. The format characters instruct the input or output routine to read or to display a number (set of numbers, strings) instead of the format character. The format characters in a date/time format string follow in any order and non-format characters are translated as delimiters.
The following table represents all available format characters and their descriptions.

Note: Format characters are case sensitive.

The following examples show format string usage:

• 31/12/2003 can be represented as 'd/m/Y'
• 02:50 AM 5-Wed-February'03 can be represented as "h:i A d-D-F'y" or 'h:i A d-D-F\'y'

Calendar Step Control Appearance

Discription of the nocontrol structure. See example in on-page mode example

Calendar Scope Settings Structure. Appearance Setup

Calendar Scope Settings Structure is a JavaScript structure allowing to specify Calendar element instance language and outlook settings. By default (in a distribution package) the structure is declared in CAL_TPL variable, cal_tpl.js files in every mode folder. Most of the keys are shortcuts to HTML tags making up the calendar element instance, so they have "flexible" subkeys, e.g. any their subkey will be treated as a modifier of the corresponding tag with a value equal to that subkey value. Since that only keys that do not have appropriate HTML notations are described in the table below.

Keys those are shortcuts to HTML tags are all declared in the following way:

  'key_name' : {
    // Now subkey definitions go
    // Each subkey will be treat as a modifier of appropriate HTML tag
    'subkey_name_1': 'subkey_value_1',
    'subkey_name_2': 'subkey_value_2',
		...
    'subkey_name_N': ''
  }

Assuming each key_name has certain corresponding_tag tag set to correspondence, when creating calendar element instance the above code will be interpreted as:

<corresponding_tag subkey_name_1="subkey_value_1" subkey_name_2="subkey_value_2"
... subkey_name_N="subkey_value_N">

Possible key names (what key_name is to be replaced with) and calendar instance elements linked to them are shown on a figure below:

Note: To know how to manipulate calendar control set, please, refer to Control Set section.

Subkeys added for above figured keys should correspond to tag type the key is linked to:

Example of customizing calendar elements outlook: all days of current month have to be of black color on a white background, no underlining is required for numbers, and day cell has to be of width of 20 pixels. Calendar Scope Setting structure fragment for the task will look like the following:

  // Other calendar scope setting here
  // Now customizing cell tag for each day of current month
  'daynormalcell': {
    // background has to be white
    'bgcolor': 'white',
    // width of the cell is 20
    'width':   20
  },
  // Now customizing text for each day of current month
  'daynormal' : {
    // text color has to be black, no underlining
    'style' : 'color: black; text-decoration: none'
  }
  // Other calendar scope setting here

Use of CSS classes and defining their names as values of class subkeys for certain keys of calendar scope setting structure can benefit in even more flexibility while customizing calendar outlook. If turning back to the above example, it is also possible to define font settings for current month days in a separate CSS class:

<style>
  .calCurMonthDay {
    /* text color has to be black */
    color: black;
    /* no underlining */
    text-decoration: none
  }
</style>

and then specify that class name to be applied to current month days in a calendar:

  // Other calendar scope setting here
  // Now customizing text for each day of current month
  'daynormal' : {
    // class name is calCurMonthDay
    'class' : 'calCurMonthDay'
  }
  // Other calendar scope setting here

Carrying CSS specifications to separate classes also helps to avoid Netscape 4.x misbehavior, because there is a crash probability for those browsers when rendering style modifiers of HTML tags.

Control Set

Calendar control set consists of select-boxes and images that allow user to change date and/or time calendar returns. Above figure shows how those controls are aligned on the within calendar area.

Calendar controls can not be moved within calendar area, only certain ones can be either displayed or not.

The control set can be divided into two control groups:

• Date Controls: today button, month select control, month step buttons, year select control and year step buttons
• Time Controls: hour select control, hour step buttons, minute select control, minute step buttons, second select control, second step buttons, am/pm select control and am/pm step buttons.

Date Controls are always displayed on the calendar. Time Controls are displayed only if calendar date/time format is specified as a value for dataformat key, Calendar Initial Setting Structure, requires a presence of hours, i.e. contains H or h chars.

Also H character in date/time format string edicts absence of am/pm select control and am/pm step buttons and presence of second select control and second step buttons on the calendar. h character in date/time format string switches am/pm select control and am/pm step buttons displaying on and prevents displaying of second select control and second step buttons.

Localization

Tigra Calendar PRO script is ready for localization. This means that if you want it to be adopted to some national specific then it will not be a problem. You can easily define:

Note: "date entered" does not include "date clicked".

Default ARR_STRINGS variable declaration looks in the following way:

var ARR_STRINGS ={
  'long_days' : ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
  'short_days' : ['Sun', 'Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat'],
  'long_month' : ['January', 'February', 'March', 'April', 'May', 'June', 'July',
    'August', 'September', 'October', 'November', 'December'],
  'short_month' : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
  'bad_month' : 'Parsing error: unknown month "%month_name"',
  'need_form_name' : 'Form name is required parameter of draw method',
  'form_not_found' : "Form with name '%form_name' can't be found in the document",
  'max_date' : 'Dates after %max_date are not allowed',
  'min_date' : 'Dates before %min_date are not allowed',
  'not_meet' : 'Warning: Input date does not meet input date format',
  'forbidden' : 'Date %forbidden_date is forbidden'
}

Code Examples

Calendar Alignment and Call Controlling Keys Examples

This series of the examples demonstrates an usage with Calendar Control Calls Handling Key described above. These examples are placed form ease to complex. Please, pay attention to comments in the examples and explanation after each one.

Example 1(On-page mode calendar). Redirect output date value form calendar to custom text box.

<html>
<head>
	<title>Calendar On-page simple example</title>
	<script language="JavaScript" src="cal_strings.js"></script>
	<!--Calendar Scope Settings Structure file. It should be exist.-->
	<script language="JavaScript" src="cal_acal.js"></script>
	<script language="JavaScript" src="calendar.js"></script>
</head>

<body>
<form name="a_form">
<table cellpadding="0" cellspacing="0" border="0" align="center" >
<tr><td bgcolor="#4682B4">
	<table cellspacing="1" border="0">
<tr>
	<td bgcolor="#FFFFFF" align="center">
<!--The text box with name 'abc' to receive a date value from the calendar control-->	
		<input type="text" name="abc" id="abc">
	</td>
</tr>	
<tr>
	<td bgcolor="#FFFFFF">	
	<script language="JavaScript">
	// Calendar Initial Setting Structure
	var CAL_INIT = {
		// Control Set Appearance structure. No meaning in this example.
		'nocontrols' : {
		'nohour'			: true,
		'nominute'			: true,
		'nosecond'			: true,
		'notoday'			: true,
		'noothermonthday'	: true,
		'noampm'			: true
		},	
		//There is no sense to define picttype for On-page mode calendar, because 
		//the calendar in the mode have no interactive element.
		//'picttype'		: 'others',
		//The 'controlname' key assign the 'abc' text box control to receive 
		//a date value.
		//Important! The receiving control must be defined "before" the 'new calendar(CAL_INIT,CAL_TPL)' call.
		'controlname'		: 'abc', // assigns 'abc' control to receive date from calendar
		// A form name where calendar should appears.
		'formname'			: 'a_form',
		'dataformat'		: 'm/d/Y h:i a' 
	};
	new calendar(CAL_INIT,CAL_TPL)
	</script>
	</td>
</tr>
</table>
<td><tr>
</table>
</form>
</body>
</html>

This example demonstrates how to show picked calendar date in a custom text box. The important notice are:

• Define a text box with desired name
• Defined text box must be described before calendar call
• Define 'controlname' key in Calendar Initial Setting Structure
• On-page mode calendar have no interactive elements to show a calendar panel and don't require to define any re-reposition or calling control keys('positionname', 'picttype', 'pictname')

Example 2(Modal mode calendar). Redefine an calling control

<html>
<head>
	<title>Calendar Modal Example</title>
	<script language="JavaScript" src="cal_strings.js"></script>
	<!--Calendar Scope Settings Structure file. It should be exist.-->
	<script language="JavaScript" src="cal_tpl1.js"></script>
	<script language="JavaScript" src="calendar.js"></script>
</head>
<body>

<form name="a_form">
<table cellpadding="0" cellspacing="0" border="0" align="center" >
<tr><td bgcolor="#4682B4">
	<table cellspacing="1" border="0">
	<tr>
		<td bgcolor="#FFFFFF">Modal Calendar</td>
	</tr>
<tr>
	<td bgcolor="#FFFFFF">
	<!--The image with name 'a_button' will be a calling control for a calendar.
	'onclick' method defines which calendar will be opened.
	It's important to define source of the image equal to value that defined in 
	'caliconshow' structure key 'src' in Calendar Scope Settings Structure file.
	-->		
		<img src="img/cal.gif" name="a_button" id="a_button" onclick="A_CALENDARS[0].showcal()">
	</td>
</tr>
<tr>
	<td bgcolor="#FFFFFF">
<script language="JavaScript">
var CAL_INIT = {
		// Control Set Appearance structure. No meaning in this example.
		'nocontrols': {
		'nohour':          true,
		'nominute':        true,
		'nosecond':        true,
		'notoday':         true,
		'noothermonthday': true,
		'noampm':          true
	},
	// The 'picttype' key defines that custom control 
	//to call a calendar will be image	
	'picttype':            'img', 
	//The 'pictname' key assign the 'a_button' image to be 
	//a calling control for calendar.
	//Important! The calling control must be defined "before" 
	//the 'new callender(CAL_INIT,CAL_TPL)' call.
	'pictname':            'a_button',
	'formname':            'a_form',
	'dataformat':          'm/d/Y h:i a'
};

new calendar(CAL_INIT, CAL_TPL1);
</script>		
	</td>
</tr>
</table>
<td><tr>
</table>
</form>
Required code for Modal mode calendar. See Modal Calendar Creation section
<script language="JavaScript">
for (var i = 0; i < A_CALENDARS.length; i++)
  A_CALENDARS[i].create();
</script>
</body>
</html>

This example demonstrates how to redefine an element that calling a calendar. The important notice are:

• Define a image with desired name.
• Defined image must be described before calendar call
• Check out Calendar Scope Settings Structure file to find 'caliconshow' structure and key 'src' within. Check image source file name and correct if needs.
• Define 'pictname' key in Calendar Initial Setting Structure and set a desired name of the image.
• Text box will be generated automatically.
• Calendar panel will be shown below text box.

Example 3(Modal mode calendar). Redefine an calling control type and position to show calendar

<html>
<head>
	<title>Calendar Modal Example 3</title>
	<script language="JavaScript" src="cal_strings.js"></script>
	<!--Calendar Scope Settings Structure file. It should be exist.-->
	<script language="JavaScript" src="cal_tpl1.js"></script>
	<script language="JavaScript" src="calendar.js"></script>
</head>
<body>

<form name="a_form">
<table cellpadding="0" cellspacing="0" border="0" align="center" >
<tr><td bgcolor="#4682B4">
	<table cellspacing="1" border="0">
	<tr>
		<td bgcolor="#FFFFFF">Modal Calendar</td>
	</tr>
<tr>
	<td bgcolor="#FFFFFF" align="center">
	<!--The button with name 'a_button' will be a calling control for a calendar.
	'onclick' method defines which calendar will be opened.
	-->		
		<input type="button" name="a_button" 
		id="a_button" onclick="A_CALENDARS[0].showcal()" value="Calendar" >
	</td>
</tr>
<tr>
	<td bgcolor="#FFFFFF" align="center">
	<!--The text box with name 'abc' to receive 
	a date value from the calendar control-->	
		<input type="text" name="abc" id="abc">
	</td>
</tr>
<tr>
	<td bgcolor="#FFFFFF" align="center">
	<!--The image with name 'cal_position' is 
	used to display a calendar panel-->		
		<img src="sun.gif" name="cal_position" id="cal_position">
	</td>
<tr>	
</table>
<td><tr>
</table>
// Calendar Initial Setting Structure
var CAL_INIT = {
	// Control Set Appearance structure. No meaning in this example.
		'nocontrols': {
		'nohour':          true,
		'nominute':        true,
		'nosecond':        true,
		'notoday':         true,
		'noothermonthday': true,
		'noampm':          true
	},
	//The 'controlname' key assign the 'abc' text box control to receive 
	//a date value.
	//Important! The receiving control must be defined "before" the 'new calender(CAL_INIT,CAL_TPL)' call.	
	'controlname':         'abc',
	// The 'picttype' key defines that custom control 
	//to call a calendar will be button	
	'picttype':            'button', 
	//The 'pictname' key assign the 'a_button' image to be 
	//a calling control for calendar.
	//Important! The calling control must be defined "before" 
	//the 'new calender(CAL_INIT,CAL_TPL)' call.
	'pictname':            'a_button',
	'positionname':        'cal_position',
	'formname':            'a_form',
	'dataformat':          'm/d/Y h:i a'
};

new calendar(CAL_INIT, CAL_TPL1);
</script>	
</form>
Required code for Modal mode calendar. See Modal Calendar Creation section
<script language="JavaScript">
for (var i = 0; i < A_CALENDARS.length; i++)
  A_CALENDARS[i].create();
</script>
</body>
</html>

This example demonstrates how to show picked calendar date in a custom text box. The important notice are:

• Define a image with desired name where your calendar plane will be appeared
• Define a button with desired name to calling your calendar
• Define a text box with desired name
• Defined image must be described before calendar call
• Defined button must be described before calendar call
• Defined text box must be described before calendar call
• Define 'controlname' key in Calendar Initial Setting Structure with text box name
• Define 'positionname' key in Calendar Initial Setting Structure with image name
• Define 'pictname' key in Calendar Initial Setting Structure with button name
• The button will be use to call a calendar
• Calendar panel will be shown at position 0,0(left-upper conner of the defined image)

Control Set Appearance Example

The example below shows how and where to define the 'nocontrol' structure:

<html>
<head>
  <script language="JavaScript" src="cal_strings.js"></script>
  <script language="JavaScript" src="cal_acal.js"></script>
  <script language="JavaScript" src="calendar.js"></script>
</head>
<body>
<form name="acal_form">
	<script language="JavaScript">
	// A new 'nocontrol' structure example demonstrates how to use
	// various 'nocontrol' keys. Specifically, the calendar will be
	// displayed without today button, hour select control, minute
	// select control, second select control and am/pm select control
	var CAL_INIT = {
		'nocontrols' : {
			'nomonth':         false,
			'noyear':          false,
			'nohour':          true,
			'nominute':        true,
			'nosecond':        true,
			'notoday':         true,
			'noothermonthday': false,
			'noampm':          true
		},	
		// a type of control element	
		'picttype':            'others', 
		// assigns 'abc' control to receive date from calendar
		'controlname':         'abc',
		'formname':            'acal_form',
		'dataformat':          'm/d/Y h:i a' 
	};
	//Call the calendar
	new calendar(CAL_INIT,CAL_TPL)
	</script>
</form>
</body>
</html>

Note:The example assumes that your have a cal_acal.js file with defined CAL_TPL structure and all required calendar files.

Example of a Page with Multiple Calendars

The example demonstrates how to display tree modal calendars on a same page.

<html>
<head>
	
	<script language="JavaScript" src="cal_tpl1.js"></script>
	<script language="JavaScript" src="cal_strings.js"></script>
	<script language="JavaScript" src="calendar.js"></script>
	<!-- define the view of calendar with css rules -->
	<link rel="stylesheet" href="calendar.css">

<style>
	a
		{color: #0000aa; text-decoration: none; font-family: Tahoma, Verdana; font-size: 11px}
	A:hover
		{color: #ff0000;}
	p, tr, td,ul, li
		{color: #000000; font-family: Tahoma, Verdana; font-size: 11px}
	.header1, h1
		{color: #ffffff; background: #4682B4; font-weight: bold; font-family: Tahoma, Verdana; 
		font-size: 13px; margin: 0px; padding: 2px;}
	.header2, h2
		{color: #000000; background: #DBEAF5; font-weight: bold; font-family: Tahoma, Verdana; font-size: 12px;}
	.intd
		{color: #000000; font-family: Tahoma, Verdana; font-size: 11px; padding-left: 15px;}
</style>
</head>
<body>
<center>
<body bottommargin="15" topmargin="15" leftmargin="15" rightmargin="15" marginheight="15" marginwidth="15" 
bgcolor="white">
<form name="test_form">
			
<table cellspacing="0" cellpadding="0" width="100%" border="0">
	<tr>
	<td align="right"><font face="tahoma, verdana" size="2">Select date and time:  </font></td>
	<td>
	<script language="JavaScript">
		var CAL_INIT1 = {
			'formname':   'test_form',
			'dataformat': 'd.m.Y H:i',
			'replace':    true
		};
		//First calendar
		new calendar(CAL_INIT1, CAL_TPL1);
	</script>
	</td>
	</tr>
	<tr>
	<td align="right"><font face="tahoma, verdana" size="2">Select date and time:  </font></td>
	<td>
		<script language="JavaScript">
		// initial calendar settings structure
			var CAL_INIT2 = {
				'formname':   'test_form',
				'dataformat': 'd.m.Y H:i',
				'replace':    true
			};
			//Second calendar
			new calendar(CAL_INIT2, CAL_TPL1);

		</script>
	</td>
	</tr>
	<tr>
	<td align="right"><font face="tahoma, verdana" size="2">Select date and time:  </font></td>
	<td>
		<script language="JavaScript">
		// initial calendar settings structure
			var CAL_INIT2 = {
				'formname':   'test_form',
				'dataformat': 'd.m.Y H:i',
				'replace':     true
			};
			//Third calendar
			new calendar(CAL_INIT3, CAL_TPL1);

		</script>
	</td>
	</tr>
</table>

</form>


<script language="JavaScript">
for (var n = 0; n < A_CALENDARS.length; n++) {
	A_CALENDARS[n].create();
}
</script>
</body>
</html>

Note:The example assumes that your have a cal_acal.js file with defined CAL_TPL structure and all required calendar files.

Onclick and Onclickdayall Handling Function Example

<html>
<head>
	<title>JavaScript Calendar</title>
	<meta name="description" content="Javascript Calendar - cross browser date picker control">
	<script language="JavaScript" src="cal_tpl1.js"></script>
	<script language="JavaScript" src="cal_strings.js"></script>
	<script language="JavaScript" src="calendar.js"></script>
	<script language="JavaScript">
	/*
		This function is called every time when visitor has clicked on any calendar's date.
		The function is get three parameters:
			1st. Zero based calendar index;
			2nd. The clicked date in the following format:
				three letter weekday 
				tree letter month 
				day 
				hours:minutes:seconds 
				UTC time zone offset 
				four digit year 
				formed as whole string.
				For instance Wed Aug 18 00:00:00 UTC +300 2004
			3rd. The clicked date in amount milliseconds from 1 Jan 1970
	*/
	function myFunc2() {
		alert('arguments[0]
		'+arguments[0]+'\n
		arguments[1]
		'+arguments[1]+'\n
		arguments[2]
		'+arguments[2]);
	}
	
	/*
		The initial structure demonstrate how to handling onclick event on all dates in a calendar.
		Previously defined function myFunc2 will be used for handling click on any calendar date.
	*/
	var CAL_INIT1 = {
			'formname':      'test_form',
			'onclickday': {
				'func' : myFunc2
			},
			'dataformat':    'd-M-Y'
			 
		
	};
 
	*/
	/*
		The initial structure demonstrate how to handling onclick event on a specific date.
		Previously defined function myFunc2 will be used for handling click on 18 Aug 2004.
	*/
	var CAL_INIT2 = {
			'formname': 'test_form',
			'onclickday': {
				'date' : {
					'18-Aug-2004': myFunc2
				}
			},
			'dataformat': 'd-M-Y'
			
	};
	
	/*
		The initial structure demonstrate how to handling onclick event on a specific date.
		Previously defined function myFunc2 will be used for handling click on every 
		Saturday and Wednesday  in 2002 and 2005.
	*/
	var CAL_INIT3 = {
			'formname': 'test_form',
			'onclickday': {
				'func' : myFunc2,
				'year': ['2005','2002'],
				'weekday':['Sat','Wen']
			},
			'dataformat': 'd-M-Y'
			
	};
	
</script>
	<!-- define the view of calendar with css rules if needed -->
	<link rel="stylesheet" href="calendar.css">

</head>

<body bottommargin="15" topmargin="15" leftmargin="15" rightmargin="15" marginheight="15" marginwidth="15" 
bgcolor="white">
<!-- Header -->
<center>
	<form name="test_form">
			
		<script language="JavaScript">
			new calendar(CAL_INIT1, CAL_TPL1);
		</script>
		<br>
		<script language="JavaScript">
			new calendar(CAL_INIT2, CAL_TPL1);
		</script>
		<br>
		<script language="JavaScript">
			new calendar(CAL_INIT3, CAL_TPL1);
		</script>
			
	</form>
<script language="JavaScript">
for (var n = 0; n < A_CALENDARS.length; n++) {
	A_CALENDARS[n].create();
}
</script>
</center>
</body>
</html>

Onclickdayall and Onclickcontrol Handling Function Example

<html>
<head>
	<title>JavaScript Calendar</title>
	<meta name="description" content="Javascript Calendar - cross browser date picker control">
	<script language="JavaScript" src="cal_tpl1.js"></script>
	<script language="JavaScript" src="cal_strings.js"></script>
	<script language="JavaScript" src="calendar.js"></script>
	<script language="JavaScript">
	/*
		This function is called every time when visitor has clicked on any date and/or selector of the first calendar.
		This function sets calendar2 date to calendar1 date.

	*/
	function  cal_func(){
		document.forms['test_form'].elements['control_2'].value = 
		document.forms['test_form'].elements['control_1'].value;
	}
	
	
	var CAL_INIT1 = {
		'controlname' : 'control_1',
		'formname' : 'test_form',
		'onclickday': {
			'func' : cal_func
		},
		'onclickcontrol': {
			'year': cal_func,
			'month': cal_func,
			'hour': cal_func,
			'minute': cal_func,
			'ampm': cal_func
		},
		'dataformat' :  'd/m/Y h:i a',
		'watch': true
		
	};
 	
	var CAL_INIT2 = {
		'controlname' : 'control_2',
		'formname' : 'test_form',
		'dataformat' :  'd/m/Y h:i a',
		'watch': true
	};
	
	
	
</script>
	<!-- define the view of calendar with css rules if needed -->
	<link rel="stylesheet" href="calendar.css">

</head>

<body bottommargin="15" topmargin="15" leftmargin="15" rightmargin="15" marginheight="15" marginwidth="15" 
bgcolor="white">
<!-- Header -->
<center>
	<form name="test_form">
			
		<script language="JavaScript">
			new calendar(CAL_INIT1, CAL_TPL1);
		</script>
		<br>
		<script language="JavaScript">
			new calendar(CAL_INIT2, CAL_TPL1);
		</script>
		
			
	</form>
<script language="JavaScript">
for (var n = 0; n < A_CALENDARS.length; n++) {
	A_CALENDARS[n].create();
}
</script>
</center>
</body>
</html>

Forbidden, Allowed and Marked Example

<html>
<head>
	<title>JavaScript Calendar</title>
	<meta name="description" content="Javascript Calendar - cross browser date picker control">
	<script language="JavaScript" src="cal_tpl1.js"></script>
	<script language="JavaScript" src="cal_strings.js"></script>
	<script language="JavaScript" src="calendar.js"></script>
	<script language="JavaScript">
	

	/*
		The initial structure demonstrate how to set alowed date.
		Only 05 Aug 2004 and 06 Aug 2004 is allowed.
	*/
	var CAL_INIT1 = {
			'formname':      'test_form',
			'allowed': {
				'date' : ['05-Aug-2004','06-Aug-2004']
			},
			'dataformat':    'd-M-Y'
			 
		
	};
	
	/*
		The initial structure demonstrate how to set alowed period.
		Only Saturday and Wednesday  are allowed.
	*/
	var CAL_INIT2 = {
			'formname':      'test_form',
			'allowed': {
				'weekday':['Sat','Wen']
			},
			'dataformat':    'd-M-Y'
			 
		
	};
	
	/*
		The initial structure demonstrate how to set forbidden period.
		Every  Saturday and Wednesday in every February and October and 05-Aug-2004 and 06-Aug-2004 are forbidden.
	*/
	var CAL_INIT3 = {
			'formname':      'test_form',
			'forbidden': {
				'weekday':['Sat','Wen'],
				'month': ['Feb', 'Oct'],
				'date' : ['05-Aug-2004','06-Aug-2004']
			},
			'dataformat':    'd-M-Y'
	};
	
	/*
		The initial structure demonstrate how to set marked period.
		Only in 2005 and 2002 - every  Saturday and Wednesday in every February and October  are marked.
	*/
	var CAL_INIT4 = {
			'formname':      'test_form',
			'marked' : {
				'month': ['Feb', 'Oct'],
				'weekday':['Sat','Wen'],
				'year': ['2005','2002']
			},
			'dataformat':    'd-M-Y'
	};
 
	
	
	
</script>
	<!-- define the view of calendar with css rules if needed -->
	<link rel="stylesheet" href="calendar.css">

</head>

<body bottommargin="15" topmargin="15" leftmargin="15" rightmargin="15" marginheight="15" marginwidth="15" 
bgcolor="white">
<!-- Header -->
<center>
	<form name="test_form">
			
		<script language="JavaScript">
			new calendar(CAL_INIT1, CAL_TPL1);
		</script>
		<br>
		<script language="JavaScript">
			new calendar(CAL_INIT2, CAL_TPL1);
		</script>
		<br>
		<script language="JavaScript">
			new calendar(CAL_INIT3, CAL_TPL1);
		</script>
		<br>
		<script language="JavaScript">
			new calendar(CAL_INIT4, CAL_TPL1);
		</script>
			
	</form>
<script language="JavaScript">
for (var n = 0; n < A_CALENDARS.length; n++) {
	A_CALENDARS[n].create();
}
</script>
</center>
</body>
</html>

Terms and Conditions

Regular License

One Regular Tigra Calendar PRO script license gives the right to use one copy of the script file (calendar.js) within single domain boundaries.

Developer License

Developer license gives the right to include unlimited number of Tigra Calendar PRO instances in the products of license owner. Such kind of license is obtained automatically by those who has 9 or more regular licenses.

Discounts

We offer 50% discount for the script starting from second license. To take advantage of this discount use the link sent with every order confirmation message.
Same discount initially applies to educational and religious organizations.

Usage

As owner of the Tigra Calendar PRO license You are allowed to configure the script in any possible way for use in Internet (public), Intranet (corporate) or offline application, however You are strictly NOT allowed (unless specifically authorized by SoftComplex.com) to:

• Redistribute Tigra Calendar PRO as any kind of JavaScript date picker or calendar
• Decompile or modify the code or header block of script file (calendar.js)
• Reverse-engineer the code
• Claim authorship of the code

Technical Support

You are entitled to free product upgrades and technical support for at least one year from the date of purchase. Technical support includes answers to script related questions via e-mail and/or Internet instant messaging services. Full calendar customization services are provided on customer's request at additional charge.

Violations of Terms and Conditions

Should you violate these Terms and Conditions or any other rights of SoftComplex Inc., SoftComplex Inc. reserves the right to pursue any and all legal and equitable remedies against you without limitation.

Links and References

• Softcomplex Inc. site
• Product Page
• Live Demos
• Modal Calendars
• More Modal Calendars
• Date Range Selection
• Single Onpage Calendar
• Multiple Onpage Calendars
• Popup Calendar
• Documentation
• Documentation Page
• Change Log
• Technical Support
• Customer Care System
• Support Forum
• ORDER NOW!
• Add to Cart
• View Cart