1. Introduction

Thank you for choosing Sprigst Javascript Calendar PRO. Our component is cross browser.

2. First steps

It is simply to maintain and adjust Sprigst Javascript Calendar PRO control. To make familiarity process quick and comfort we had prepared several demos you can find in Sprigst Javascript Calendar PRO download package. If you are not JavaScript guru we recommend to start your project on the base of sample you'll find more adequate for your task.

2.1. Getting starting

Use your favourite text editor to edit demo.html file from any of numerous 'demos' folders in your download package. Note how easy is HTML code required for calendar initialization. We cut all unrelated and useless tags so you can focus at calendar related code.

At <head> section of the document you can find following code to link required files:

Sprigst Javascript Calendar PRO core script:

<script language=JavaScript src="SprigstCalendar.js"></script>

Visual and localization settings for Sprigst Javascript Calendar PRO elements:

<script language=JavaScript src="SprigstCalendarAppearance.js"></script>

Sprigst Javascript Calendar PRO template structure

<script language=JavaScript src="SprigstCalendarTemplates.js"></script>

and CSS file with style classes

<link href="SprigstCalendar.css" rel=stylesheet>

Note: All files are located in the same folder. Try to rename them or move to other folder, making corresponding changes in the <head> section

2.1. Changing settings

Doing your first steps in configuring Sprigst Javascript Calendar PRO copy one demo directory and edit demo.html. Try to modify any setting in sCalendarGfg structure (find description of the setting in this documentation or read comments near every setting), then save demo.html and browse it to see changes.

2.3. Important notes

Using Sprigst Javascript Calendar PRO you anyhow will deal with javascript arrays. Few words about arrays just for ease first steps.

There are two kinds of arrays.

First type is auto indexed array, where indexes are successive numbers:

//0        1         2              N-1      - array indexes
[<value>, <value1>, <value2>, ..., <valueN>]
//ordinary array

If you want to get some value from the array you should refer by it's numeric index, e.g.:

var aArray= [
 'Hello', 
 'World', 
 '!!!!'];

alert(aArray[2]);

//will alert string !!!!

Second type is array indexed with custom keys, also known as associative array:

//associative array
{
<key1> : <value1>,
<key2> : <value2>,
<key3> : <value3>,
...
//Important: skip comma sign after the last pair
<keyN> : <valueN>
}

If you want to get some value from the array you should refer by it's custom index, e.g.:

var aArray = {
 1    : 'Hello', 
 k2   : 'World', 
 //Important: skip comma sign after the last pair
 'k3' : '!!!!'
};
alert(aArray['k2']);//will alert string World
alert(aArray.k3);//will alert string !!!!
alert(aArray[1]);//will alert string Hello

3. Calendar config settings

Calendar config settings is a structure Sprigst Calendar PRO consructor accepts as argument

//Calendar config settings structure definition
var sCalendarGfg = {
 //Required localization setting.
 CalendarLocalization : GCL,
 //Required template setting structure.
 CalendarTemplates: GCT,
 //Required visual settings structure.
 CalendarAppearance: GCA
};

//The only argument for Sprigst Javascript Calendar PRO 
//constructor is calendar config settings structure 
new sCalendar(sCalendarGfg);

Note:The Calendar's config must have three required setting CalendarLocalization, CalendarTemplates, CalendarAppearance. Other settings are optional.

CalendarLocalization

description	Defines language related setting. See Localization settings for details.
value	Structure name. By default it is GCL defined in SprigstCalendarAppearance.js.
samples	CalendarLocalization : GCL

CalendarTemplates

description	Defines face of calendar. See Active elements and templates for details.
value	Structure name. By default it's GCT, defined in SprigstCalendarTemplates.js.
samples	CalendarTemplates : GCT

CalendarAppearance

description	Defines calendar elements appearance. See Active elements and templates for details.
value	Structure name. By default it's GCA, defined in SprigstCalendarAppearance.js.
samples	CalendarAppearance : GCA

DataArea

description	Any field name for edit and display date.
value	String. If omitted, DataArea value will be generated according the rule: 'DataArea_'+calendar zero-based index on a page.
samples	DataArea : 'DataArea2'

ShowHideControl

description	Name of control used to show and hide calendar. Only for modal mode.
value	String. If omitted, ShowHideControl value will be generated according the rule: : 'shc_'+calendar zero-based index on a page.
samples	ShowHideControl : 'ShowHideControl2'

OnlyOne

description	Defines single opened calendar mode. Only modal mode.
value	Boolean. If true - only one calendar on the page could stay opened. If false - calendars states does not effect each other. Default value - false.
samples	OnlyOne : true

HideAll

description	Defines the calendar's action after clicking at some place in the web page. Only for modal mode.
value	Boolean. If it is true, the calendar will be hidden by clicking in any place of the user's page. Otherwise, it will be hidden with "show/hide" calendar's icon (default behaviour). Default value - false.
samples	HideAll : true

OnPage

description	Defines calendar display mode.
value	Boolean. If true - dislplay calendar in on-page mode. If false - dislplay calendar in modal. Default value - false. See Calendar display modes for details.
samples	OnPage : true

NoClickCollapsed

description	Defines the calendar's action after click on some day at date-grid. Only for modal mode.
value	Booolean. If true - after user clicks on a date calendar does not close. If false - calendar reduces automatically.
samples	NoClickCollapsed : true

ShowDateAtOnce

description	Defines ability to show date at once in the DataArea. Only for modal mode.
value	Booolean. It is ability to show date at once in the calendar's text field. Just Sprigst calendar is generated and flag's value is true - the date is in the text field already. Default value - false.
samples	ShowDateAtOnce : true

Archor

description	Defines page element which will be uses as calendar's positioning origin point. Only for modal mode. See Calendar positioning for details.
value	String. If undefined or element is not located then input text control is used as the anchor. Default value - undefined.
samples	Archor : 'Archor6'

Offsets

description	Defines pixel offset of a calendar on X/Y axes relatively to the left top corner of the anchor element. Only modal mode. See Calendar positioning for details.
value	Structure. Default X offset is 0, by default Y offset is 21.
samples	Offsets:{ X : 0, Y: -162 }

GeneralFormat

description	Defines general date format for calendar. See Date formatting for details.
value	String. Date pattern. Default pattern %m-%d-%Y.
samples	GeneralFormat : '%m/%d/%Y'

StartWeekDay

description	Defines what day starts a week.
value	String. Abbreviated form of week day name. Can take following values : 'Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'. Default value is 'Su'
samples	StartWeekDay : 'Mo'

TodayDate

description	Defines today date for calendar. Calendar set the date on click at "Today" control.
value	String. Date in GeneralFormat. If undefined then current date is used.
samples	TodayDate : '01/01/2006'

ChiefDate

description

Defines calendar start date.

value

String or number. ChiefDate could be defined directly using GeneralFormat. Also ChiefDate could be defined via offset in days from TodayDate.

samples

ChiefDate : '02/21/2006'

ChiefDate : 14

MinDate

description

Defines minimum allowed date. Specified date inclusive.

value

String or number. MinDate could be defined directly using GeneralFormat. Also MinDate could be defined via offset in days from ChiefDate.

samples

MinDate : '03/11/2006'

MinDate : 14

MaxDate

description

Defines maximum allowed date. Specified date inclusive.

value

String or number. MaxDate could be defined directly using GeneralFormat. Also MaxDate could be defined via offset in days from ChiefDate.

samples

MaxDate : '04/15/2006'

MaxDate : 7

ExcludedDates

description	Defines Excluded Dates list. See Special dates for details.
value	Structure.
samples	ExcludedDates :{ Format:'%m/%d/%Y', Dates : [ { List : ['03/01/2006','03/02/2006','03/17/2006'], Interval : ['07/10/2006 AND 07/15/2006'], Period : ['Su Fr','Mar Apr May Dec','2006 2007'] } ] }

IncludedDates

description	Defines Included Dates list. See Special dates for details.
value	Structure.
samples	IncludedDates :{ Format:'%m/%d/%Y', Dates : [ { Interval : ['07/10/2006 AND 07/15/2006'], Period : ['','Mar Apr May Dec','2006 2007'] } ] }

MarkedDates

description	Defines Marked Dates list. See Special dates for details
value	Structure.
samples	MarkedDates :{ Dates : [ { Interval : ['07/10/2006 AND 07/15/2006'], Period : ['Su Fr'] Appearance : 'RedMarked', Event : 'RedEvent(nCalendar,oCalendar,oDate,fDate)' } ] }

MessageStatus

description	Defines what calendar messages to show. See Calendar messages for details.
value	Number. Default is 0 - all messages disabled.
samples	MessageStatus : 30

CalendarEvents

description	Defines external functions evoked by certain calendar events. See External handlers for details
value	Structure.
samples	CalendarEvents:{ onOpen:'onOpenEvent(nCalendar,oCalendar,oDate,fDate)', onClose:'onCloseEvent(nCalendar,oCalendar,oDate,fDate)', onChange:'onChangeEvent(nCalendar,oCalendar,oDate,fDate)' }

4. Localization settings

For convenience of multilingual support, language settings of calendar are placed in a separate structure - GCL. This structure is required in the configuration structure of the calendar. Calendar will generate some error message if localization setting is omitted. By default GCL defined in SprigstCalendarAppearance.js file. But it can be defined in any other place within the scope of the document.

//Calendar config settings structure definition
var sCalendarGfg = {
 ...
 //Required localization setting.
 CalendarLocalization : GCL,
 ...
};
...
new sCalendar(sCalendarGfg);

Below sample illustrates applying GCL to the calendar configuration structure.
GCL has following structure :

var GCL = {
	//calendar error messages
	'ConfigError' : ' ... error message ...',
	'MinDateError' : '... error message ...',
	'MaxDateError' : '... error message ...',
	'ActiveDateError':'... error message ...',
	'FormatDateError': '... error message ...',
	'ParseDateError': '... error message ...',
	

	//days, month, time titles
	'AbbreviatedMonthName':['Jan' ... 'Dec'],
	'MonthName' : ['January' ... 'December'],
	'AbbreviatedDayName':['Sun' ...  'Sat'],
	'DayName':['Sunday' ... 'Saturday'],
	'AP':['AM' ... 'pm'],
	'WeekDays':  ['Su' ... 'Sa']

}

You could easily adjust language settings and apply them to the calenar with minimum efforts.

5. Calendar build process

5.1. Calendar build stages

Construction of the calendar is carried out in two stages. Let's call them primary and secondary builds.

Primary build

The stage occurs on calendar constructor call.
At this stage input control and calendar icon are created.

Secondary build

The stage occurs on displaying the calendar at first time.
At this stage creation of calendar itself is happen.

5.2 Active elements and templates

Template of the Sprigst Calendar PRO constists of active elements of a calendar and HTML code that compose calendar's appearance.
Sprigst Calendar PRO component parts:

Generated active elements
Stucture that describes position of active elements in HTML output code.

Each active element has corresponding token in the calendar template (see GCT structure in SprigstCalendarTemplates.js), and corresponding description in appearance setting structure (see GCA structure in SprigstCalendarAppearance.js).

Calendar has two groups of active elements:

1. Elements of primary build.

They serve for control of displaying of calendar, and for input/output dates.
The primary build group is described in UserControl property of GCT structure.
Following elements are concern to primary build group:

Calendar displaying icon
- Pattern in the template
- Property in the calendar appearance settings:
```
ShowHideControl : 'ShowHideControl2'
```
Textbox for input/output dates
- Pattern in the template
- Property in the calenadar appearance settings:
```
'DataArea':'gDataArea',
```

2. Elements of secondary build.

These are elements that provide calendar's functionality itself.
The secondary build group is described in Calendar property of GCT structure.
Following elements are concern to secondary build group:

Year dropdown list
- Pattern in the template
- Property in the calenadar appearance settings:
```
'YearList' : 'gYearList'
```
Month dropdown list
- Pattern in the template
- Property in the calenadar appearance settings:
```
'MonthList' : 'gMonthList'
```
Icon for switching to next year
- Pattern in the template
- Property in the calenadar appearance settings:
```
'IcoNextYear':{
 'src':'img/yearnext.gif',
 'html':'border="0" alt="To next year"' 
},
```
Icon for switching to previous year
- Pattern in the template
- Property in the calenadar appearance settings:
```
'IcoPrevYear':{
 'src':'img/yearprevios.gif',
 'html':'border="0" alt="To previos year"' 
}
```
Icon for switching to next month
- Pattern in the template
- Property in the calenadar appearance settings:
```
'IcoNextMonth':{
 'src':'img/monthnext.gif',
 'html':'border="0" alt="To next month"'
},
```
Icon for switching to previous month
- Pattern in the template
- Property in the calenadar appearance settings:
```
'IcoPrevMonth':{
 'src':'img/monthprevios.gif',
 'html':'border="0" alt="To previos month"' 
}
```
Icon for switching to today's date
- Pattern in the template
- Property in the calenadar appearance settings:
```
'IcoToday':{
'html':'src="img/today.gif"border="0"alt="Reset date"' 
},
```
Textbox for time input/output
- Pattern in the template
- Property in the calenadar appearance settings:
```
'TimeArea':'gTimeArea',
```
Calendar date grid
- Pattern in the template
- Property in the calenadar appearance settings:
```
'DataArea':'gDataArea',
```

5.3. Calendar appearance changing orde

In the user hands there is a tool which gives to him the broadest abilities in setting up calendar's appearance.
To change calendar's appearance:

Select what generated elements should be present in calendar.
Define generated elements positions in calendar's template.
Define appearance of each of the generated elements in CalendarAppereans.
Define any HTML in calendar's template to modify it's look as required.

6. Using custom HTML elements with calendar

In primary generation stage (see Calendar build process for details) it's possible to use external HTML objects that exist at the page already before calendar's constructor call.
To use custom textbox for input/output date define its name/id in the configuration structure of the calendar.

<input type="Text" name="DataArea1" id="DataArea1">
...
<script language="JavaScript">
//Calendar config settings structure definition
var sCalendarGfg = {
 ...
 DataArea : 'DataArea1'
 ...
};
...
new sCalendar(sCalendarGfg);
</script>

Important: external element should be defined before calendar declaration.

To use custom textbox with predefine date value follow the example:

//gVerifyDataArea - function that validate input date value.
//The function is called automatically if textbox is generated.
//If custom textbox is used and it's required to handle input date 
//the function should be declared directly in the control's tag.
//The function accepts calendar's serial number as a parameter. 

<input type="Text" name="DataArea3" id="DataArea3" 
value="Select Date" onchange="gVerifyDataArea(2);">
...
<script language="JavaScript">
//Calendar config settings structure definition
var sCalendarGfg = {
 ...
 DataArea : 'DataArea1'
 ...
};
...
new sCalendar(sCalendarGfg);
</script>

To use custom control for show/hide calendar define its name/id in the configuration structure of the calendar.

//gDisplayCalendar function that shows/hides calendar.
//The function is called automatically if display icon is generated.
//If custom elemnet is used, the function should be 
//declared directly in the control's tag.
//The function accepts calendar's serial number as a parameter. 

<a href="javascript:gDisplayCalendar(2);" id="ShowHideControl3" 
name="ShowHideControl3">CLICK HERE</a>
...
<script language="JavaScript">
//Calendar config settings structure definition
var sCalendarGfg = {
 ...
ShowHideControl : 'ShowHideControl3',
 ...
};
...
new sCalendar(sCalendarGfg);
</script>

Important: external element should be defined before calendar declaration.

7. Calendar display modes

Calendar could have two display modes - modal and on-page.

In modal mode input date textbox is generated by default. Date selected by user is displayed in the textbox. Show/hide control is also genereated automatically - a small icon by default. Calendar either collapses or shows on click on the icon.
Note: Build of calendar itself is performed on first show event.

In on-page mode The calendar shows on the page at once, at the place where it is initialized. Date selected be user is placecd in the hidden field, calendar generates the field automatically. The hidden control's name is set via DataArea property of calendar configuration structure, just like textbox name for modal mode (see Calendar config settings).

Modal is default calendar mode. To set on-page mode set OnPage property. (see. Calendar config settings)

8. Calendar positioning

Calendar's positioning has sense only for modal mode. (see Calendar display modes for details about modal mode)
By default input textbox control is used as calendar's positioning element.
Position is set via X-Y offset from top-left corner of the positioning element.

//Calendar config settings structure definition
var sCalendarGfg = {
 ...
 Offsets:{
   X : 24, // X axis offset
   Y: -162 // Y axis offset
 }
 ...
};
...
new sCalendar(sCalendarGfg);

It's not required to set offset directly. If offset undefined then default valuse are used, 0 for X axis and 21 for Y axis.

It's possible to set any exist HTML element as positioning element of Sprigst Calendar PRO. To set external positioning element use Archor property of calendar configuration structure. (see. Calendar config settings)

//Calendar config settings structure definition
var sCalendarGfg = {
 ...
  Archor : 'archor3',// name/id of calendar positioning element
 ...
};
...
new sCalendar(sCalendarGfg);

9. Date formatting

Date value formats according to the format string. The following specifiers may be used in the format string:

%Y		Year, numeric, 4 digits
%y		Year, numeric, 2 digits
%M		Month name (January..December)
%m		Month, (01..12)
%c		Month, (1..12)
%d		Day of the month, (00..31)
%e		Day of the month, (0..31)
%b		Abbreviated month name (Jan..Dec)
%H		Hour (00..23)
%k		Hour (0..23)
%h		Hour (01..12)
%l		Hour (1..12)
%I		Minutes (00..59)
%i		Minutes (0..59)
%S		Seconds (00..59)
%s		Seconds (0..59)
%P		AM or PM
%p		am or pm
%g		Day Name
%D		Abbreviated Day Name

//Calendar config settings structure definition
var sCalendarGfg = {
 ...
  GeneralFormat : '%m-%d-%Y',
 ...
};
...
new sCalendar(sCalendarGfg);

10. Special dates

Calendar could contain three types of special dates:

Exluded Dates - these dates are inactive for calendar.
Included Dates - these dates are active for calendar. If active dates list is set, dates not listed becomes inactive automatically.
Marked Dates - marked dates.

Important: custom event function could be set for Included Dates and Marked Dates.

10.1. Special dates appearance

Appearance settings of special dates are located in SprigstCalendarAppearance.js file.

//SprigstCalendarAppearance.js
var GCA  = {
 ...
 //Cell:Marked date settings 
 'RedMarked':'gDayRedMarkedCell',
 'BlueMarked':'gDayBlueMarkedCell' ,
 'YellowMarked':'gDayYellowMarkedCell' 
};

Also for any special dates group it's possible to set custom appearance.

Important: If appearance settings are omitted - no outward appearance changes occurs. There are no default appearance settings for special dates. The feature could be used to set up external functions for special dates without changing appearance.

//Calendar config settings structure definition
var sCalendarGfg = {
 ...
  MarkedDates:{
  //Appearance setting for Marked Dates special dates group
  Appearance:'YellowMarked',
  Dates:[
    {
     Interval : ['07/10/2006 AND 07/15/2006']
    }
  ]
 },
 ...
 ExcludedDates:{
 //Appearance setting for Excluded Dates special dates group
 Appearance:'RedMarked',
  Dates:[
    {
     Interval : ['07/10/2005 AND 07/15/2005']
    }
  ]
 },
 ...
 IncludedDates:{
 //Appearance setting for Included Dates special dates group
Appearance:'BlueMarked',
  Dates:[
    {
     Interval : ['07/10/2004 AND 07/15/2004']
    }
  ]
 },
 ...
};
...
new sCalendar(sCalendarGfg);

Important: for every subgroup in special dates group it's possible to set custom appearance.

//Calendar config settings structure definition
var sCalendarGfg = {
 ...
  MarkedDates:{
   Dates:[
    {
     //There isn't subgroup appearnce setting
     Interval : ['07/10/2006 AND 07/15/2006']
    },
    {
     //Subgroup appearnce setting
     Appearance:'BlueMarked',
     List : ['07/10/2005','07/15/2005']
    }
  ]
 },
 ...
 };
...
new sCalendar(sCalendarGfg);

Subgroup appearnce setting override group appearnce setting, and direct group setting overide default setting.

//Calendar config settings structure definition
var sCalendarGfg = {
 ...
  MarkedDates:{
  //Redefinition of MarkedDate appearance settings.
  //Default appearance settings ignored.
  Appearance:'YellowMarked',
  Dates:[
    {
     //Redefinition of group setting.
     //Group appearance settings ignored.
     Appearance:'RedMarked',
     Interval : ['07/10/2006 AND 07/15/2006']
    },
    {
     //Subgroup appearance settings omitted.
     //Group appearance settings are used
     List : ['07/10/2005','07/15/2005']
    }
  ]
 },
 ...
};

...

new sCalendar(sCalendarGfg);

In the case when several group setting are applied to a date, Marked dates setting have higher priority.

//Calendar config settings structure definition
var sCalendarGfg = {
 ...
  MarkedDates:{
  Appearance:'YellowMarked',
  Dates:[
    {
     Interval : ['07/10/2006 AND 07/15/2006']
    }
  ]
 },
 ...
 ExcludedDates:{
 //Appearance setting for MarkedDates overide
 //setting for special dates group ExcludedDates
 Appearance:'RedMarked',
  Dates:[
    {
     Interval : ['07/10/2006 AND 07/15/2006']
    }
  ]
 },
 ...
};
...
new sCalendar(sCalendarGfg);

If setting superposition occurs in subgroups of single group then earlier setting will have higher priority.

//Calendar config settings structure definition
var sCalendarGfg = {
 ...
  MarkedDates:{
   Dates:[
    {
     Appearance:'RedMarked',
     Interval : ['07/10/2006 AND 07/15/2006']
    },
    {
     //Appearance setting for dates matching the condition specified 
     //in first subgroup will have RedMarked appearance setting
     Appearance:'BlueMarked',
     Interval : ['07/10/2006 AND 08/15/2006']
    }
  ]
 },
 ...
};
...

new sCalendar(sCalendarGfg);

10.2. Special dates functions.

For special dates groups Included Dates and Marked Dates it's possible to set functions to call on click event (mouse click on a date from the group range)
It's impossible to set event functions for Excluded Dates group.
Special dates does not have default external functions.
External function could be defined as for whole group as for each subgroup independently.
Subgroup function setting overide group setting.
If setting superposition occurs in subgroups of single group then earlier setting will have higher priority.

//SpecialDate`s functions
function BlueEvent () {
 alert('MarkedBlueEvent\n');
}

function RedEvent(var1,var2,var3,var4) {
 alert('MarkedRedEvent\n'+var1+'\n'+var2+'\n'+var3+'\n'+var4);
}
//Calendar config settings structure definition
var sCalendarGfg = {
 ...
  MarkedDates:{
  //External function setting BlueEvent for group 
  //of special dates MarkedDates
  Event : 'BlueEvent()',
  Dates:[
    {
     Interval : ['07/05/2006 AND 07/15/2006']
    },
    {
     //External function setting RedEvent for subgroup
     Event : 'RedEvent(nCalendar,oCalendar,oDate,fDate)',
     Interval : ['07/10/2006 AND 07/25/2006']
    }
  ]
 },
 ...
};
...
new sCalendar(sCalendarGfg);

If superposition of groups' setting occurs then functions of only one group will be triggered, using following priority list:

Marked Dates
Included Dates

External function definition format see in External handlers.

10.3. Special dates formatting.

By default general date format is used for spesial dates.
Also there is possibility to set date format for groups and for subgroups of special dates.
The setting is useful when general format is involved and big variety of special dates should be set. In the case set simplified format for special dates.
As usual special dates format overides default (general) format.

//Calendar config settings structure definition
var sCalendarGfg = {
 GeneralFormat : '%b-%e-%Y %H:%I:%s'
 ...
 IncludedDates:{
  //Date format setting for IncludedDates special group
  Format:'%m/%d/%Y',
  Dates:[
    {
     Interval : ['07/05/2006 AND 07/15/2006']
    },
    {
     //Date format setting for subgroup
     Format:'%d-%m-%Y',
     Interval : ['10-07-2005 AND 25-10-2005']
    }
  ]
 },
 ...
};
...
new sCalendar(sCalendarGfg);

You can find more info about date format specifiers in Date formatting.

10.4. Special dates assigning methods.

There are several ways to set special dates.

1. Date list

//Calendar config settings structure definition
var sCalendarGfg = {
 ...
 IncludedDates:{
  Dates:[
    {
     List : ['03/01/2006','03/02/2006']
    }
  ]
 },
 ...
};
...
new sCalendar(sCalendarGfg);

2. Date interval

//Calendar config settings structure definition
var sCalendarGfg = {
 ...
 IncludedDates:{
  Dates:[
    {
     Interval : ['03/01/2006 AND 03/25/2006']
    }
  ]
 },
 ...
};
...
new sCalendar(sCalendarGfg);

3. Date period

It's possible to set following periods:

years
month
weeks' days
monthes' days

Also there is possibility to use combinations of periods.

//Calendar config settings structure definition
var sCalendarGfg = {
 ...
 IncludedDates:{
  Dates:[
    {
     //years - 2006 and 2007
     //months - March, April
     //week days - Friday, Sunday
     //so each friday and sunday in march and april of 2006 
	 //and 2007 will be special date
     Period:['Su Fr','Mar Apr','2006 2007']
    },
    {
     //months - February
     //week day - Wednesday
     //so each wednesday in february every 
	 //year will be special date
     Period:['We','Feb']
    },
    {
     //years - 2008
     //months - August
     //so each day in august of 2008 will be special date
     Period:['','Aug','2008']
    },
    {
     //years -  2010
     //so every day in 2010 will be special date
     Period:['','','2010']
    }
  ]
 },
 ...
};
...
new sCalendar(sCalendarGfg);

It's possible to use the methods separately and in combinations.

11. Calendar messages

There are four types of dialog messages.

Configuration error messages
Error messages when input date is beyond predefined edges.
Error messages when setting calendar to inactive date.
Error messages when applying date in wrong format.

It's possible to turn of dialog messages. By default all error messages are on.
Use MessageStatus property to disable messages.
Use corresponding bitmask to disable combination of messages.

//Calendar config settings structure definition
var sCalendarGfg= {
 ...
 //Disable all messages
MessageStatus : 30
 //Disable configuration error messages
 //MessageStatus : 2
 //Disable error messages when input date is beyond predefined edges
 //MessageStatus : 4
 //Disable error messages when setting calendar to inactive date 
 //MessageStatus : 8
 //Disable error messages when applying date in wrong format
 //MessageStatus : 16
 ...
};
...
new sCalendar(sCalendarGfg);

12. External handlers

Callendar supports ability to set external handlers for following events:

Calendar open

Handler called before calendar opens

//CalendarEvents functions
function onOpenEvent(var1,var2,var3,var4) {
 alert('OpenEvent\n'+var1+'\n'+var2+'\n'+var3+'\n'+var4);
}
//Calendar config settings structure definition
var sCalendarGfg = {
 ...
 CalendarEvents:{
  onOpen :  'onOpenEvent(nCalendar,oCalendar,oDate,fDate)'
 },
 ...
};
...
new sCalendar(sCalendarGfg);

Calendar close

Handler called after calendar closes

CalendarEvents functions
function onCloseEvent(var1,var2,var3) {
 alert('CloseEvent\n'+var1+'\n'+var2+'\n'+var3);
}
//Calendar config settings structure definition
var sCalendarGfg = {
 ...
 CalendarEvents:{
  onClose :  'onCloseEvent(nCalendar,oCalendar,sDate)'
 },
 ...
};
...
new sCalendar(sCalendarGfg);

Change date

Handler called when date is changed.
The event occur when clicking on date grid or switching other control that causes date modifications i.e. year switch, month selector etc.

CalendarEvents functions
function onChangeEvent() {
 alert('ChangeEvent');
}
//Calendar config settings structure definition
var sCalendarGfg = {
 ...
 CalendarEvents:{
  onChange : 'onChangeEvent()' 
 },
 ...
};
...
new sCalendar(sCalendarGfg);

12.1. External handlers function parameters

By default each handler function accepts four arguments.

nCalendar - Calendar's serial number
oCalendar - Reference to calendar object
oDate - object Date for current calendar's date
fDate - current date in format defined via GeneralFormat

To use the parameters in extrnal functions set their names within arguments list of external function definition.

CalendarEvents functions
function onChangeEvent(var1,var2,var3,var4) {
 alert('ChangeEvent\n'+var1+'\n'+var2+'\n'+var3+'\n'+var4);
}
//Calendar config settings structure definition
var sCalendarGfg = {
 ...
 CalendarEvents:{
  onChange : 'onChangeEvent(nCalendar,oCalendar,oDate,fDate)' 
 },
 ...
};
...
new sCalendar(sCalendarGfg);

13. Skins' engine

Sorry, this section is under construction

14. Date Range Selection Module

Sorry, this section is under construction

Sprigst Calendar Pro - Documentation

Product Demos

Product Links

CALENDAR PRODUCTS

Sprigst Calendar

Sprigst Calendar Pro

SCROLLER PRODUCTS

Sprigst Scroller

Sprigst Scroller Pro

SLIDER PRODUCTS

Sprigst Slider Pro

Table of contents

1. Introduction

2. First steps

2.1. Getting starting

2.1. Changing settings

2.3. Important notes

3. Calendar config settings

CalendarLocalization

CalendarTemplates

CalendarAppearance

DataArea

ShowHideControl

OnlyOne

HideAll

OnPage

NoClickCollapsed

ShowDateAtOnce

Archor

Offsets

GeneralFormat

StartWeekDay

TodayDate

ChiefDate

MinDate

MaxDate

ExcludedDates

IncludedDates

MarkedDates

MessageStatus

CalendarEvents

4. Localization settings

5. Calendar build process

5.1. Calendar build stages

Primary build

Secondary build

5.2 Active elements and templates

1. Elements of primary build.

2. Elements of secondary build.

5.3. Calendar appearance changing orde

6. Using custom HTML elements with calendar

7. Calendar display modes

8. Calendar positioning

9. Date formatting

10. Special dates

10.1. Special dates appearance

10.2. Special dates functions.

10.3. Special dates formatting.

10.4. Special dates assigning methods.

1. Date list

2. Date interval

3. Date period

11. Calendar messages

12. External handlers

12.1. External handlers function parameters

13. Skins' engine

14. Date Range Selection Module