Sprigst Calendar v.1.0 - Documentation

Product Demos

Product Links


CALENDAR PRODUCTS

 Sprigst Calendar

SCROLLER PRODUCTS

 Sprigst Scroller

Table of contents

Step by step setup

1. Open your document for edition.
2. Copy calendar related files to your document folder. Link them do the document
3. Choose a place where you want the control to appear and place calendar constructor call there (see How to initialize the calendar)
4. Browse your page/document to check if calendar control works
5. Edit date format of calendar if needed (see How to set and change date format)
6. Edit SCappearance file and modify template structure to obtain desired calendar look if needed (see How to change calendar look and language)
7. Don't forget the calendar automatically generates input text field (see Notes)

Sprigst Calendar related files

A file of calendar CSS settings. The file is to be linked to a document containing a calendar.
<link rel="stylesheet" href="calendar.css">
Calendar layout settings are described in SCappearance.js file. The file contains a JavaScript structure named SC_APPEARANCE describing calendar layout and language settings. The file is to be linked to a document containing a calendar.
<script language="JavaScript" src="SCappearance.js"></script>
Application core script is located in SprigstCalendar.js file. The file is to be linked only once to a document containing a calendar, regardless a number of them.
<script language="JavaScript" src="SprigstCalendar.js"></script>
Calendar icons are located in img folder of an application distribution package

How to initialize the calendar

The code fragment to initialize a calendar will look like the following:
<script language="JavaScript">
<!--		
var SC_SET_3 = {
'appearance': SC_APPEARANCE
}
new sCalendar(SC_SET_3);
//-->
</script>
or
<script language="JavaScript">
<!--		
var SC_SET_3 = {
'appearance': SC_APPEARANCE,
'dataArea':'dataAreaTest'
}
new sCalendar(SC_SET_3);
//-->
</script>
where:
  • SC_APPEARANCE is a JavaScript structure describing calendar outlook and its language settings.
  • 'dataAreaTest' - name of generated input field.
If name is empty - name is generated automatically according to a convention: 'dataArea' + <calendar  zero-based index on a page>. So if you have only one calendar its input field name will be 'dataArea0', if two  they will be 'dataArea0' and 'dataArea1' respectively.

How to set and change date format

A date set to be set with a calendar can have any format within all possible combinations of reserved substrings standing for mm, dd, yyyy and delimiter chars or substrings. Here is a list of reserved substrings:
  • 'Y' - stands for 4-digit year notation (yyyy).
  • 'm' - stands for 2-digit month notation (mm).
  • 'd' - stands for 2-digit notation of day of month (dd).
Below there is a sample of a code to work with 'd-m-Y' date format:
<script language="JavaScript">
<!--		
var SC_SET_4 = {
'appearance': SC_APPEARANCE,
'dateFormat' : 'd-m-Y'
}
new sCalendar(SC_SET_4);
//-->
</script>
A calendar initialized to work with 'm/d/Y' date format:
<script language="JavaScript">
<!--		
var SC_SET_5 = {
'appearance': SC_APPEARANCE,
'dateFormat' : 'm/d/Y'
}
new sCalendar(SC_SET_5);
//-->
</script>
A calendar initialized to work with 'Hello m & Y # d all' date format:
<script language="JavaScript">
<!--		
var SC_SET_6 = {
'appearance': SC_APPEARANCE,
'dateFormat' : 'Hello  m & Y # d all'
}
new sCalendar(SC_SET_6);
//-->
</script>
Achtung! When composing date format don't use reserved substrings as delimiters for they will be replaced with a corresponding values.
Default date format is 'm/d/Y'

How to change calendar look and language

Danish language settings
<script language="JavaScript" src="SCappearance2.js"></script>
SC_APPEARANCE2 JavaScript structure
var SC_APPEARANCE2 = {

// week day abbrevations as they appear on the calendar
'weekdays':  ['Sø', 'Ma', 'Ti', 'On', 'To', 'Fr', 'Lø'], 

// Month names
'longmonth' : ['Januar','Februar','Marts','April','Maj','Juni','Juli',
'August','September','Oktober','November','December'],
// Calendar messages

'messages' : {
 'Warning' : 'Warning: the date entered does not meet preset date format',
 'AltPrevYear' : 'to previos year',
 'AltNextYear' : 'to next year',
 'AltPrevMonth' : 'to previos month',
 'AltNextMonth' : 'to next month'
},

// Calendar container style	
'CalDiv' : 'clsCalDiv2',

// Outer frame
'OuterFrame' : 'clsOuterFrame2',

// Inner frame
'InnerFrame' : 'clsInnerFrame2',

// Upper line of navigation pannel
'TopPartNavpanel' : 'clsTopPartNavpanel2',

// Bottom line of navigation pannel
'BottomPartNavpanel' : 'clsBottomPartNavpanel2',

// Date grid line
'MidRow' : 'clsMidRow2',

// Date grid
'DateGrid':'clsDateGrid2',

// Weekday abbrevations
'WeekDay':'clsWeekDay2',

// A weekday cell
'WorkDayCell': 'clsWorkDayCell2',

// A day-off cell
'HoliDayCell': 'clsHoliDayCell2',

// Another month day cell
'OtherMonthDayCell': 'clsOtherMonthDayCell2',

// Selected day cell
'SelectedDayCell': 'clsSelectedDayCell2',

// Current month day font
'CurrentMonthDay': 'clsCurrentMonthDay2',

// Another month day cell
'OtherMonthDay': 'clsOtherMonthDay2',

// Selected day font
'SelectedDay': 'clsSelectedDay2',

// Information line above the calendar
'InfoTitle':'clsInfoTitle2',

// Input field style
'DataArea':'clsDataArea2',

// Previous year icon
'PrevYear':'img/prev_year2.gif',

// Previous month icon
'PrevMonth':'img/prev_month2.gif',

// Next year icon
'NextYear':'img/next_year2.gif',

// Next month icon
'NextMonth':'img/next_month2.gif',

// Close calendar icon
'IcoCalUnVis': 'img/dpr_unvis2.gif',

// Open calendar icon
'IcoCalVis': 'img/dpr_vis2.gif'
};
The above defined structure or its reference is passed as a parameter for a function initializing each calendar instance:
<script language="JavaScript">
<!--		
var SC_SET_7 = {
 'appearance': SC_APPEARANCE2,
 'dateFormat' : 'm/d/Y'
}
new sCalendar(SC_SET_7);
//-->
</script>

Notes

  • Default date format for the calendar is 'm/d/Y'
  • Calendar initialization function (constructor) automatically inserts also input form field, opening and closing icons.
Copyright©2007 Sprigst.  All right reserved.