Teknologi 3D pada Halaman WEB: Januari 2026

Senin, 19 Januari 2026

Calculator year 2000

<tr>

<td>

<br>

</td>

</tr>

<tr>

<td>

<br>

<br>

<br>

<br>

</td>

</tr>

</table>

</form>

Minggu, 18 Januari 2026

Color Picker HTML Component (.htc) JScript

<html>

<head>

<title>SMA INFORMATIKA CIAMIS</title>

<style>

.colorpick {behavior: url(ColorPick.htc)}

H1 {

font: bold 18pt verdana;

color: navy

}

P {

font: 10pt verdana;

}

A:link { color:#003399; text-decoration:none; }

A:visited { color:#6699CC; text-decoration:none; }

A:hover { text-decoration:underline; }

</style>

</head>

<MARQUEE WIDTH="400"><h1 id=theHead>SMA INFORMATIKA

CIAMIS</h1></MARQUEE><BR>

<hr>

<p>Use the color picker to set color values visually.</p>

<br>

<input ID=cp type="text" class="colorpick" value="#fFFf00" onchange="fnColorChange()"

style="cp--grid-size:2">

<br>

function fnColorChange()

{

theHead.style.color = cp.value;

}

</script>

<p>

<hr>

TARGET=/misc/cpyright.htm" TARGET="_top">2000 Microsoft Corporation. All rights

reserved. Terms of use</a>.

</font>

<p>

</body>

</html>

================================

ColorPick.htc

<!-- ---------------------------------------------------------------------

// File: colorpick.htc

// Description: This behavior allows web authors add a visual control

// for assigning color values to elements to a web page.

//-------------------------------------------------------------------- -->

//+----------------------------------------------------------------------------

// Global Variables

//-----------------------------------------------------------------------------

var zColor = new Array();

var oCurr = null;

var bValueExists = false;

//+----------------------------------------------------------------------------

// Function: DoInit

// Description: Calls functions, set variables, and attaches events to

// initialize behavior

// Arguments: none

// Returns: nothing

//-----------------------------------------------------------------------------

function DoInit()

{

style.display = "none";

SetDefaults();

SetColor();

AddTable();

MakeGrid();

SetValue();

attachEvent("onpropertychange", DoPropChange);

}

//+----------------------------------------------------------------------------

// Function: AddTable

// Description:

// Arguments: none

// Returns: nothing

//-----------------------------------------------------------------------------

function AddTable()

{

var sTab = '<TABLE ID="' + uniqueID + 'tab" BORDER="1" '

+ 'STYLE="background:silver; cursor:default"></TABLE>';

insertAdjacentHTML("AfterEnd", sTab);

}

//+----------------------------------------------------------------------------

// Function: SetColor

// Description:

// Arguments: none

// Returns: nothing

//-----------------------------------------------------------------------------

function SetColor()

{

//var iFactor = parseInt(255/(parseInt(style.cpGridSize)-1));

var iFactor = 255/(parseInt(style.cpGridSize)-1);

var iColors = 0;

var iRed, iGreen, iBlue;

for(r=0; r<parseInt(style.cpGridSize); r++)

{

for(g=0; g<parseInt(style.cpGridSize); g++)

{

for(b=0; b<parseInt(style.cpGridSize); b++)

{

iRed = parseInt(iFactor*r);

iGreen = parseInt(iFactor*g);

iBlue = parseInt(iFactor*b);

iRed = iRed.toString(16);

iGreen = iGreen.toString(16);

iBlue = iBlue.toString(16);

if(iRed=="0") iRed = "00";

if(iGreen=="0") iGreen = "00";

if(iBlue=="0") iBlue = "00";

zColor[iColors] = iRed + iGreen + iBlue;

iColors++;

}

//+----------------------------------------------------------------------------

// Function: DeleteGrid

// Description:

// Arguments: none

// Returns: nothing

//+----------------------------------------------------------------------------

function DeleteGrid()

{

var oTab = eval(uniqueID + "tab");

while(oTab.rows.length>0)

{

oTab.deleteRow();

}

//+----------------------------------------------------------------------------

// Function: MakeGrid

// Description:

// Arguments: none

// Returns: nothing

//+----------------------------------------------------------------------------

function MakeGrid()

{

//the number of cells that will be created

var iNumCells = Math.pow(style.cpGridSize,3);

//track the number of color cells that have been created

var iNumCellsCreated = 0;

//what is grid width minimum? Depends on how many cells there are, and how wide

//each cell is. first, determine how many cells across we will have in our table

var iCellsAcross = parseInt(parseInt(style.cpGridWidth)/parseInt(style.cpCellWidth));

if(iCellsAcross==0) iCellsAcross = 1;

var iCellsDown = parseInt(Math.ceil(iNumCells/iCellsAcross));

if(iCellsDown==0) iCellsDown = 1;

//then, determine height. If the given height is too short, force a height that will

//contain all the cells

//ISSUE: Should the grid be forced into a fixed height, with a scrollbar, if the cells

//won't all fit?

if((iCellsDown*parseInt(style.cpCellHeight))>parseInt(style.cpGridHeight))

{

style.cpGridHeight = iCellsDown*parseInt(style.cpCellHeight);

}

var oTab = eval(uniqueID + "tab");

oTab.attachEvent("onclick", DoClick);

oTab.attachEvent("onmouseover", DoMouseOn);

oTab.attachEvent("onmouseout", DoMouseOff);

oTab.attachEvent("onselectstart", DoSelectStart);

oTab.height = style.cpGridHeight;

for(i=0; i<iCellsDown; i++)

{

var oRow = oTab.insertRow();

for(j=0; j<iCellsAcross; j++)

{

var oCell = oRow.insertCell();

oCell.style.width = style.cpCellWidth;

oCell.style.height = style.cpCellHeight;

oCell.style.border = style.cpGridStyle;

oCell.style.fontSize = 0;

iCellCount = (i*iCellsAcross) + j;

oCell.title = oCell.style.color = oCell.style.backgroundColor = zColor[iCellCount];

oCell.innerText = ".";

iNumCellsCreated++;

if(iNumCellsCreated==iNumCells) break;

}

//add one more row to keep from vertically stretching our color rows if

//grid is taller than all cells

var oRow = oTab.insertRow();

oRow.style.height = 0;

oRow.style.fontSize = "0";

}

//+----------------------------------------------------------------------------

// Function: DoPropChange

// Description: Handles property changes on CSS and regular property/

// attributes.

// Arguments: none

// Returns: nothing

//-----------------------------------------------------------------------------

function DoPropChange()

{

var propertyName = window.event.propertyName;

if (propertyName.substring(0,5) == "style")

{

switch (propertyName)

{

case "style.cpGridSize" :

DeleteGrid();

SetColor();

MakeGrid();

break;

case "style.cpGridStyle" :

DeleteGrid();

MakeGrid();

break;

case "style.cpSelectedStyle" :

DeleteGrid();

MakeGrid();

break;

case "style.cpHoverStyle" :

break;

case "style.cpGridWidth" :

DeleteGrid();

MakeGrid();

break;

case "style.cpGridHeight" :

DeleteGrid();

MakeGrid();

break;

case "style.cpCellWidth" :

DeleteGrid();

MakeGrid();

break;

case "style.cpCellHeight" :

DeleteGrid();

MakeGrid();

break;

}

else

{

detachEvent("onpropertychange", DoPropChange);

switch(propertyName)

{

case "name" :

break;

case "value" :

break;

default :

ReturnError(propertyName + " not a valid property");

break;

}

attachEvent("onpropertychange", DoPropChange);

}

//+----------------------------------------------------------------------------

// Function: SetValue

// Description:

// Arguments: none

// Returns: nothing

//-----------------------------------------------------------------------------

function SetValue()

{

var oTab = eval(uniqueID + "tab");

if (value == null)

{

value = oTab.rows(0).cells(0).style.backgroundColor;

}

for(i=0; i<oTab.rows.length; i++)

{

for(j=0; j<oTab.rows(i).cells.length; j++)

{

if(oTab.rows(i).cells(j).style.backgroundColor.toLowerCase() == value.toLowerCase())

{

bValueExists = true;

oCurr = oTab.rows(i).cells(j);

oCurr.style.border = style.cpSelectedStyle;

value = oCurr.style.backgroundColor;

}

if(bValueExists==false) value = oTab.rows(0).cells(0).style.backgroundColor;

}

//+----------------------------------------------------------------------------

// Function: SetDefaults

// Description: Called during the initialization of the behavior. Sets

// the defaults for custom CSS properties (calls the

// CustomDefault() function), regular CSS properties (the

// NormalDefault() function), and attribute/properties.

// Arguments: none

// Returns: nothing

//-----------------------------------------------------------------------------

function SetDefaults()

{

//store value to be passed for all three border styles

var sBorderDefault = style['cp--grid-style'];

if(sBorderDefault==null) sBorderDefault = '1px inset activeborder';

//store value to be passed for cpGridWidth

var iGridWidthDefault = '90px';

if(style['cp--cell-width']==null)

{

if(style['cp--grid-width']==null)

{

switch(style['cp--grid-size'])

{

case '2': iGridWidthDefault = '54px';

break;

case '3': iGridWidthDefault = '90px';

break;

case '4': iGridWidthDefault = '144px';

break;

}

// Custom CSS Property Defaults

CustomDefault('cp--grid-size', 'cpGridSize', '3');

CustomDefault('cp--grid-style', 'cpGridStyle', sBorderDefault);

CustomDefault('cp--selected-style', 'cpSelectedStyle', sBorderDefault);

CustomDefault('cp--hover-style', 'cpHoverStyle', sBorderDefault);

CustomDefault('cp--grid-width', 'cpGridWidth', iGridWidthDefault);

CustomDefault('cp--grid-height', 'cpGridHeight', '1px');

CustomDefault('cp--cell-width', 'cpCellWidth', '18px');

CustomDefault('cp--cell-height', 'cpCellHeight', '18px');

// Attribute | Property Defaults

if (value == null) value = "#000000";

}

//+----------------------------------------------------------------------------

// Function: CustomDefault

// Description: Sets the defaults for custom CSS properties and establishes

// a scriptable name for the property

// Arguments: sCSSName - the CSS name of the property

// sScriptName - the desired Scriptable name of the property

// sDefault - the desired default value

// Returns: nothing

//-----------------------------------------------------------------------------

function CustomDefault(sCSSName, sScriptName, sDefault)

{

if (currentStyle[sCSSName] == null)

{

style[sCSSName] = sDefault;

}

else style[sCSSName] = currentStyle[sCSSName];

style[sScriptName] = style[sCSSName];

}

//+----------------------------------------------------------------------------

// Function: NormalDefault

// Description: Sets the defaults for CSS properties by checking the

// currentStyle and style of the object against the IE

// default.

// Arguments: sCSSName - the CSS name of the property

// sIEDefault - the IE standard default of the property

// sDefault - the desired default of the property

// Returns: nothing

//-----------------------------------------------------------------------------

function NormalDefault(sCSSName, sIEDefault, sDefault)

{

if (currentStyle[sCSSName] == sIEDefault

&& (style[sCSSName] == "" || style[sCSSName] == null))

{

style[sCSSName] = sDefault;

}

//+----------------------------------------------------------------------------

// Function: DoMouseOn

// Description:

// Arguments: none

// Returns: false if the srcElement is not the slider piece.

//+----------------------------------------------------------------------------

function DoMouseOn()

{

var e = window.event.srcElement;

if(e.tagName.toLowerCase()=="td" && e != oCurr)

{

e.style.border = style.cpHoverStyle;

}

//+----------------------------------------------------------------------------

// Function: DoMouseOff

// Description:

// Arguments: none

// Returns: nothing

//+----------------------------------------------------------------------------

function DoMouseOff()

{

var e = window.event.srcElement;

if(e.tagName.toLowerCase()=="td" && e != oCurr)

{

e.style.border = style.cpGridStyle;

}

//+----------------------------------------------------------------------------

// Function: DoClick

// Description:

// Arguments: none

// Returns: nothing

//+----------------------------------------------------------------------------

function DoClick()

{

var e = window.event.srcElement;

if(e.tagName.toLowerCase()=="td" && e != oCurr)

{

oCurr.style.border = style.cpGridStyle;

oCurr = e;

e.style.border = style.cpSelectedStyle;

value = e.style.backgroundColor;

}

change.fire();

}

//+----------------------------------------------------------------------------

// Function: DoSelectStart

// Description: Cancels the onselectstart event to prevent user from

// selecting text in the slider.

// Arguments: none

// Returns: false (returnValue)

//+----------------------------------------------------------------------------

function DoSelectStart()

{

window.event.returnValue = false;

window.event.cancelBubble = true;

}

//+----------------------------------------------------------------------------

// Function: ReturnError

// Description: Fires the error event, along with a descriptive text

// message.

// Arguments: sMsg - descriptive text message

// Returns: nothing

//-----------------------------------------------------------------------------

function ReturnError(sMsg)

{

var oEvent = createEventObject();

oEvent.setAttribute("error", sMsg);

error.fire(oEvent);

}

</SCRIPT>

Program Kalender HTML Component (.htc) JavaScript HTML Code from year 2000

calendar.htc

<!-- ---------------------------------------------------------------------

// File: calendar.htc

// Description: The calendar behavior provides an easy, declarative way

// to add a standard calendar control to web pages and html

// based applications. It provides a variety of properties

// to customize the look and feel along with a strong set

// events and functionality.

//-------------------------------------------------------------------- -->

//------------------------------------------------------------------------

// Attach to element events

//------------------------------------------------------------------------

element.attachEvent("onselectstart", fnOnSelectStart)

element.attachEvent("onclick", fnOnClick)

element.attachEvent("onpropertychange", fnOnPropertyChange)

element.attachEvent("onreadystatechange", fnOnReadyStateChange)

//------------------------------------------------------------------------

// Create the arrays of days & months for different languages

//------------------------------------------------------------------------

var gaMonthNames = new Array(

new Array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',

'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'),

new Array('January', 'February', 'March', 'April', 'May', 'June', 'July',

'August', 'September', 'October', 'November', 'December')

);

var gaDayNames = new Array(

new Array('S', 'M', 'T', 'W', 'T', 'F', 'S'),

new Array('Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'),

new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday')

);

var gaMonthDays = new Array(

/* Jan */ 31, /* Feb */ 29, /* Mar */ 31, /* Apr */ 30,

/* May */ 31, /* Jun */ 30, /* Jul */ 31, /* Aug */ 31,

/* Sep */ 30, /* Oct */ 31, /* Nov */ 30, /* Dec */ 31 )

var StyleInfo = null // Style sheet with rules for this calendar

var goStyle = new Object() // A hash of style sheet rules that apply to this calendar

var gaDayCell = new Array() // an array of the table cells for days

var goDayTitleRow = null // The table row containing days of the week

var goYearSelect = null // The year select control

var goMonthSelect = null // The month select control

var goCurrentDayCell = null // The cell for the currently selected day

var giStartDayIndex = 0 // The index in gaDayCell for the first day of the month

var gbLoading = true // Flag for if the behavior is loading

var giDay // day of the month (1 to 31)

var giMonth // month of the year (1 to 12)

var giYear // year (1900 to 2099)

var giMonthLength = 1 // month length (0,1)

var giDayLength = 1 // day length (0 to 2)

var giFirstDay = 0 // first day of the week (0 to 6)

var gsGridCellEffect = 'raised' // Grid cell effect

var gsGridLinesColor = 'black' // Grid line color

var gbShowDateSelectors = true // Show date selectors (0,1)

var gbShowDays = true // Show the days of the week titles (0,1)

var gbShowTitle = true // Show the title (0,1)

var gbShowHorizontalGrid = true // Show the horizontal grid (0,1)

var gbShowVerticalGrid = true // Show the vertical grid (0,1)

var gbValueIsNull = false // There is no value selected (0,1)

var gbReadOnly = false // The user can not interact with the control

var giMinYear = 1900 // Minimum year (1 is the lowest possible value)

var giMaxYear = 2099 // Maximum year

// Load the property values defined on the element to replace defaults

fnGetPropertyDefaults()

// Create the style sheets needed for the calendar display

fnCreateStyleSheets()

// Insert the HTML elements needed for the calendar display

fnCreateCalendarHTML()

// Update the title with the month and year

fnUpdateTitle()

// Fill in the days of the week

fnUpdateDayTitles()

// Build the month select control

fnBuildMonthSelect()

// Build the year select control

fnBuildYearSelect()

// Fill in the cells with the days of the month and set style values

fnFillInCells()

// **********************************************************************

// PROPERTY GET/SET FUNCTIONS

// **********************************************************************

//------------------------------------------------------------------------

// Function: fnGetDay / fnPutDay

// Synopsis: The day property is used to set the day of the month. The

// valid range is from 1 to the maximum day of the selected

// month & year. If a number is given outside that range, it

// is set to the closest valid value. Invalid input will cause

// an exception.

// Arguments: The put method requires an integer value for the day

// Returns: The get method will return the selected day of the month

// If the valueIsNull property is set, null is returned

// Notes: none

//------------------------------------------------------------------------

function fnGetDay()

{

return (gbValueIsNull) ? null : giDay

}

function fnPutDay(iDay)

{

if (gbLoading) return // return if the behavior is loading

iDay = parseInt(iDay)

if (isNaN(iDay)) throw 450

fnSetDate(iDay, giMonth, giYear)

}

//------------------------------------------------------------------------

// Function: fnGetMonth / fnPutMonth

// Synopsis: The month property is used to set the month of the year.

// The valid range is from 1 to 12. If a value is given

// outside that range, it is set to the closest valid value.

// Invalid input will cause an exception.

// Arguments: The put method requires an integer value for the month

// Returns: The get method will return the selected month value

// If the valueIsNull property is set, null is returned

// Notes: Setting the year can cause the selected "day" value to be

// reduced to the highest day in the selected month if needed.

//------------------------------------------------------------------------

function fnGetMonth()

{

return (gbValueIsNull) ? null : giMonth

}

function fnPutMonth(iMonth)

{

if (gbLoading) return // return if the behavior is loading

iMonth = parseInt(iMonth)

if (isNaN(iMonth)) throw 450

fnSetDate(giDay, iMonth, giYear)

}

//------------------------------------------------------------------------

// Function: fnGetYear / fnPutYear

// Synopsis: The year property is used to set the current year.

// The valid range is from minYear to maxYear. If a value is given

// outside that range, it is set to the closest valid value.

// Invalid input will cause an exception.

// Arguments: The put method requires an integer value for the year

// Returns: The get method will return the selected year value

// If the valueIsNull property is set, null is returned.

// Notes: Setting the year can cause the selected "day" value to be

// reduced to the highest day in the selected month if needed.

//------------------------------------------------------------------------

function fnGetYear()

{

return (gbValueIsNull) ? null : giYear

}

function fnPutYear(iYear)

{

if (gbLoading) return // return if the behavior is loading

iYear = parseInt(iYear)

if (isNaN(iYear)) throw 450

fnSetDate(giDay, giMonth, iYear)

}

//------------------------------------------------------------------------

// Function: fnGetMonthLength / fnPutMonthLength

// Synopsis: The monthLength property is used to adjust the length of

// the month name used in the title and month selection control.

// Arguments: The put method requires a value of 'short' or 'long'

// Returns: The get method will return a value of 'short' or 'long'

// Notes: none

//------------------------------------------------------------------------

function fnGetMonthLength()

{

if (giMonthLength == 0) return "short"

if (giMonthLength == 1) return "long"

}

function fnPutMonthLength(sLength)

{

if (gbLoading) return // return if the behavior is loading

switch (sLength.toLowerCase())

{

case "short" :

if (giMonthLength == 0) return

giMonthLength = 0

break;

case "long" :

if (giMonthLength == 1) return

giMonthLength = 1

break;

default :

throw 450

return

}

fnUpdateTitle()

fnBuildMonthSelect()

}

//------------------------------------------------------------------------

// Function: fnGetDayLength / fnPutDayLength

// Synopsis: The dayLength property is used to adjust the length of

// the day names in the calendar grid.

// Arguments: The put method requires a value of 'short', 'medium',

// or 'long'

// Returns: The get method will return a value of 'short', 'medium',

// or 'long'

// Notes: none

//------------------------------------------------------------------------

function fnGetDayLength()

{

if (giDayLength == 0) return "short"

if (giDayLength == 1) return "medium"

if (giDayLength == 2) return "long"

}

function fnPutDayLength(sLength)

{

if (gbLoading) return // return if the behavior is loading

switch (sLength.toLowerCase())

{

case "short" :

if (giDayLength == 0) return

giDayLength = 0

break;

case "medium" :

if (giDayLength == 1) return

giDayLength = 1

break;

case "long" :

if (giDayLength == 2) return

giDayLength = 2

break;

default :

throw 450

return

}

fnUpdateDayTitles()

// Used to force a table resize if needed

goStyle['DaySelected'].borderStyle = 'solid'

}

//------------------------------------------------------------------------

// Function: fnGetFirstDay / fnPutFirstDay

// Synopsis: The firstDay property is used to adjust the first day of

// the week on the calendar grid. Valid values are 1 to 7

// where 1 is Sunday and 7 is Saturday. Setting to an invalid

// value will cause an exception.

// Arguments: The put method requires a value from 1 to 7

// Returns: The get method will return a value from 1 to 7

// Notes: none

//------------------------------------------------------------------------

function fnGetFirstDay()

{

return giFirstDay

}

function fnPutFirstDay(iFirstDay)

{

if (gbLoading) return // return if the behavior is loading

if ((iFirstDay < 0) || (iFirstDay > 6)) throw 450

if (giFirstDay == iFirstDay) return

giFirstDay = iFirstDay

fnUpdateDayTitles()

fnFillInCells()

}

//------------------------------------------------------------------------

// Function: fnGetGridCellEffect / fnPutGridCellEffect

// Synopsis: The gridCellEffect property is used to modify the 3D effect

// in the calendar grid (excluding day titles). It can take

// values of 'raised', 'flat', or 'sunken'. Other values will

// cause an exception.

// Arguments: The put method requires a value of 'raised', 'flat', or

// 'sunken'.

// Returns: The get method will return a value of 'raised', 'flat', or

// 'sunken'.

// Notes: none

//------------------------------------------------------------------------

function fnGetGridCellEffect()

{

return gsGridCellEffect

}

function fnPutGridCellEffect(sEffect)

{

if (gbLoading) return // return if the behavior is loading

switch (sEffect.toLowerCase())

{

case "raised" :

if (gsGridCellEffect == 'raised') return

gsGridCellEffect = 'raised'

fnUpdateGridColors()

break

case "flat" :

if (gsGridCellEffect == 'flat') return

gsGridCellEffect = 'flat'

fnUpdateGridColors()

break

case "sunken" :

if (gsGridCellEffect == 'sunken') return

gsGridCellEffect = 'sunken'

fnUpdateGridColors()

break

default :

throw 450

}

//------------------------------------------------------------------------

// Function: fnGetGridLinesColor / fnPutGridLinesColor

// Synopsis: The gridLinesColor property is used to change the color of

// the calendar grid when the gridCellEffect property is set

// to 'flat'. It can be any valid HTML color value.

// Arguments: The put method requires a HTML color value

// Returns: The get method will return a HTML color value

// Notes: No error checking is performed. Invalid values may result

// in unexpected rendering.

//------------------------------------------------------------------------

function fnGetGridLinesColor()

{

return gsGridLinesColor

}

function fnPutGridLinesColor(sGridLinesColor)

{

if (gbLoading) return // return if the behavior is loading

gsGridLinesColor = sGridLinesColor

fnUpdateGridColors()

}

//------------------------------------------------------------------------

// Function: fnGetShowVerticalGrid / fnPutShowVerticalGrid

// Synopsis: The showVerticalGrid property is used to toggle the

// visibility of vertical lines in the calendar grid.

// Arguments: The put method requires true or false value for visibility

// Returns: The get method will return a true or false value

// Notes: none

//------------------------------------------------------------------------

function fnGetShowVerticalGrid()

{

return gbShowVerticalGrid

}

function fnPutShowVerticalGrid(bShowVerticalGrid)

{

if (gbLoading) return // return if the behavior is loading

if ((bShowVerticalGrid) != gbShowVerticalGrid)

{

gbShowVerticalGrid = (bShowVerticalGrid) ? true : false

fnFireOnPropertyChange("propertyName", "showVerticalGrid")

fnUpdateGridColors()

}

//------------------------------------------------------------------------

// Function: fnGetShowHorizontalGrid / fnPutShowHorizontalGrid

// Synopsis: The showHorizontalGrid property is used to toggle the

// visibility of horizontal lines in the calendar grid.

// Arguments: The put method requires true or false value for visibility

// Returns: The get method will return a true or false value

// Notes: none

//------------------------------------------------------------------------

function fnGetShowHorizontalGrid()

{

return gbShowHorizontalGrid

}

function fnPutShowHorizontalGrid(bShowHorizontalGrid)

{

if (gbLoading) return // return if the behavior is loading

if ((bShowHorizontalGrid) != gbShowHorizontalGrid)

{

gbShowHorizontalGrid = (bShowHorizontalGrid) ? true : false

fnFireOnPropertyChange("propertyName", "showHorizontalGrid")

fnUpdateGridColors()

}

//------------------------------------------------------------------------

// Function: fnGetShowDateSelectors / fnPutShowDateSelectors

// Synopsis: The showDateSelectors property toggles the visibility of

// the month and year select controls.

// Arguments: The put method requires true or false value for visibility

// Returns: The get method will return a true or false value

// Notes: none

//------------------------------------------------------------------------

function fnGetShowDateSelectors()

{

return gbShowDateSelectors

}

function fnPutShowDateSelectors(bShowDateSelectors)

{

if (gbLoading) return // return if the behavior is loading

gbShowDateSelectors = (bShowDateSelectors) ? true : false

element.children[0].rows[0].cells[1].style.display = (gbShowDateSelectors) ? '' : 'none'

element.children[0].rows[0].style.display = (gbShowDateSelectors || gbShowTitle) ? '' : 'none'

}

//------------------------------------------------------------------------

// Function: fnGetShowDays / fnPutShowDays

// Synopsis: The showDays property toggles the visibility of

// the day of the week titles row in the calendar grid.

// Arguments: The put method requires true or false value for visibility

// Returns: The get method will return a true or false value

// Notes: none

//------------------------------------------------------------------------

function fnGetShowDays()

{

return gbShowDays

}

function fnPutShowDays(bShowDays)

{

if (gbLoading) return // return if the behavior is loading

gbShowDays = (bShowDays) ? true : false

goDayTitleRow.style.display = (gbShowDays) ? '' : 'none'

}

//------------------------------------------------------------------------

// Function: fnGetShowTitle / fnPutShowTitle

// Synopsis: the showTitle property toggles the visibility of the month

// and year title at the top of the calendar.

// Arguments: The put method requires true or false value for visibility

// Returns: The get method will return a true or false value

// Notes: none

//------------------------------------------------------------------------

function fnGetShowTitle()

{

return gbShowTitle

}

function fnPutShowTitle(bShowTitle)

{

if (gbLoading) return // return if the behavior is loading

gbShowTitle = (bShowTitle) ? true : false

element.children[0].rows[0].style.display = (gbShowDateSelectors || gbShowTitle) ? '' : 'none'

fnUpdateTitle()

}

//------------------------------------------------------------------------

// Function: fnGetValue / fnPutValue

// Synopsis: The value property returns the day, month, and year in the

// format: {day}/{month}/{year}

// example: 25/02/1998

// An invalid value will cause an exception.

// Arguments: The put method requires a string in the format described

// above

// Returns: The get method will return the current date value

// Notes: The day and month are returned in the two digit format.

// The year is returned in a four digit format.

//------------------------------------------------------------------------

function fnGetValue()

{

var sValue

if (gbValueIsNull) return null

sValue = ((giDay < 10) ? '0' + giDay : giDay) + '/' +

((giMonth < 10) ? '0' + giMonth : giMonth) + '/'

if (giYear < 10) return sValue + '000' + giYear

if (giYear < 100) return sValue + '00' + giYear

if (giYear < 1000) return sValue + '0' + giYear

return sValue + giYear

}

function fnPutValue(sValue)

{

if (gbLoading) return // return if the behavior is loading

var aValue = sValue.split('/')

// ensure valid valuse for month, day, and year

aValue[0]++ ; aValue[0]-- ; aValue[1]++ ; aValue[1]-- ; aValue[2]++ ; aValue[2]-- ;

if ( isNaN(aValue[0]) || isNaN(aValue[1]) || isNaN(aValue[2]) ) throw 450

fnSetDate(aValue[0], aValue[1], aValue[2])

}

//------------------------------------------------------------------------

// Function: fnGetValueIsNull / fnPutValueIsNull

// Synopsis: The valueIsNull property set the calendar so that no day

// is selected. Changing any date property, setting one of

// the date select controls, or clicking on a day will result

// in the valueIsNull property getting set to false.

// Arguments: The put method requires a string in the format described

// above

// Returns: The get method will return the current date value

// Notes: The day and month are returned in the two digit format.

// The year is returned in a four digit format.

//------------------------------------------------------------------------

function fnGetValueIsNull()

{

return gbValueIsNull

}

function fnPutValueIsNull(bValueIsNull)

{

if (gbLoading) return // return if the behavior is loading

if ((bValueIsNull) != gbValueIsNull)

{

gbValueIsNull = (bValueIsNull) ? true : false

fnFireOnPropertyChange("propertyName", "readOnly")

}

goCurrentDayCell.className = (bValueIsNull) ?

'Day_' + uniqueID : 'DaySelected_' + uniqueID

}

//------------------------------------------------------------------------

// Function: fnGetReadOnly / fnPutReadOnly

// Synopsis: The readOnly property can be set to true or false to

// disable user date selection by clicking on days or through

// the select controls

// Arguments: The put method requires a true/false value

// Returns: The get method will return true or false

// Notes: none

//------------------------------------------------------------------------

function fnGetReadOnly()

{

return (gbReadOnly) ? true : false

}

function fnPutReadOnly(bReadOnly)

{

if (gbLoading) return // return if the behavior is loading

if ((bReadOnly) != gbReadOnly)

{

gbReadOnly = (bReadOnly) ? true : false

fnFireOnPropertyChange("propertyName", "readOnly")

}

element.children[0].rows[0].cells[1].children[0].children[0].disabled = gbReadOnly

element.children[0].rows[0].cells[1].children[0].children[1].disabled = gbReadOnly

}

// **********************************************************************

// CALENDAR INITIALIZATION FUNCTIONS

// **********************************************************************

//------------------------------------------------------------------------

// Function: fnCreateCalendarHTML

// Synopsis: This function adds the HTML code to the main document that

// is required to display the calendar. It contains nested

// tables and all style information is inherited from the

// style sheet properties.

// Arguments: none

// Returns: none

// Notes: none

//------------------------------------------------------------------------

function fnCreateCalendarHTML()

{

var row, cell

element.innerHTML =

'<table border=0 class=WholeCalendar_' + uniqueID + '> ' +

' <tr> ' +

' <td class=Title_' + uniqueID + '></td> ' +

' <td class=DateControls_' + uniqueID + '> ' +

' <nobr> <select></select> ' +

' <select></select> </nobr> </td> ' +

' </tr> ' +

' <tr> <td colspan=3> ' +

' <table class=CalTable_' + uniqueID + ' cellspacing=0 border=0> ' +

' <tr><td class=DayTitle_' + uniqueID + '></td>' +

' <td class=DayTitle_' + uniqueID + '></td>' +

' <td class=DayTitle_' + uniqueID + '></td></tr>' +

' <tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>' +

' </table> ' +

' </tr> ' +

'</table> ';

goDayTitleRow = element.children[0].rows[1].cells[0].children[0].rows[0]

goMonthSelect = element.children[0].rows[0].cells[1].children[0].children[0]

goYearSelect = element.children[0].rows[0].cells[1].children[0].children[1]

for (row=1; row < 7; row++)

for (cell=0; cell < 7; cell++)

gaDayCell[((row-1)*7) + cell] = element.children[0].rows[1].cells[0].children[0].rows[row].cells[cell]

}

//------------------------------------------------------------------------

// Function: fnCreateStyleSheets

// Synopsis: The calendar uses a style sheet to control the rendering

// of the different calendar elements. This function creates

// the style sheet in the main document using a unique name.

// Arguments: none

// Returns:

// Notes:

//------------------------------------------------------------------------

function fnCreateStyleSheets()

{

var StyleInfo

if (! element.document.body.BehaviorStyleSheet)

{

element.document.body.BehaviorStyleSheet = element.document.createStyleSheet()

}

StyleInfo = element.document.body.BehaviorStyleSheet

StyleInfo.addRule( '.WholeCalendar_' + uniqueID,

'background-color : lightgrey ;'+

'border : 1px solid black ;'+

'cursor : default ;'+

'width : 100% ;'+

'height : 100% ;'

)

goStyle['WholeCalendar'] = StyleInfo.rules[StyleInfo.rules.length - 1].style

StyleInfo.addRule( '.Title_' + uniqueID,

'color : #00009F ;'+ // cal--title-color

'font-family : Arial ;'+ // cal--title-font-family

'font-size : 10pt ;'+ // cal--title-font-size

'font-weight : bold ;'+ // cal--title-font-weight

'text-align : center ;'+ // cal--title-text-align

'height : 1 ;'+

'width : 100% ;'+

'background-color : lightgrey;'

)

goStyle['Title'] = StyleInfo.rules[StyleInfo.rules.length - 1].style

fnLoadCSSDefault('cal--title-background-color', 'calTitleBackgroundColor', goStyle['Title'], 'backgroundColor')

fnLoadCSSDefault('cal--title-color', 'calTitleColor', goStyle['Title'], 'color')

fnLoadCSSDefault('cal--title-font-family', 'calTitleFontFamily', goStyle['Title'], 'fontFamily')

fnLoadCSSDefault('cal--title-font-size', 'calTitleFontSize', goStyle['Title'], 'fontSize')

fnLoadCSSDefault('cal--title-font-weight', 'calTitleFontWeight', goStyle['Title'], 'fontWeight')

fnLoadCSSDefault('cal--title-text-align', 'calTitleTextAlign', goStyle['Title'], 'textAlign')

StyleInfo.addRule( '.DateControls_' + uniqueID,

'text-align : right ;'

)

goStyle['DateControls'] = StyleInfo.rules[StyleInfo.rules.length - 1].style

StyleInfo.addRule( '.CalTable_' + uniqueID,

'border : 1 solid black ;'+

'width : 100% ;'+

'height : 100% ;'

)

goStyle['CalTable'] = StyleInfo.rules[StyleInfo.rules.length - 1].style

StyleInfo.addRule( '.DayTitle_' + uniqueID,

'background-color : lightgrey ;'+ // dayTitle-background-color

'color : black ;'+ // dayTitle-color

'font-family : Arial ;'+ // dayTitle-font-family

'font-size : 8pt ;'+ // dayTitle-font-size

'font-weight : bold ;'+ // dayTitle-font-weight

'text-align : center ;'+ // dayTitle-text-align

'border-width : 1px ;'+

'border-style : solid ;'+

'border-left-color : white ;'+

'border-top-color : white ;'+

'border-right-color : black ;'+

'border-bottom-color : black ;'+

'width : 14% ;'+

'height : 1 ;'

)

goStyle['DayTitle'] = StyleInfo.rules[StyleInfo.rules.length - 1].style

fnLoadCSSDefault('cal--dayTitle-background-color', 'calDayTitleBackgroundColor', goStyle['DayTitle'], 'backgroundColor')

fnLoadCSSDefault('cal--dayTitle-color', 'calDayTitleColor', goStyle['DayTitle'], 'color')

fnLoadCSSDefault('cal--dayTitle-font-family', 'calDayTitleFontFamily', goStyle['DayTitle'], 'fontFamily')

fnLoadCSSDefault('cal--dayTitle-font-size', 'calDayTitleFontSize', goStyle['DayTitle'], 'fontSize')

fnLoadCSSDefault('cal--dayTitle-font-weight', 'calDayTitleFontWeight', goStyle['DayTitle'], 'fontWeight')

fnLoadCSSDefault('cal--dayTitle-text-align', 'calDayTitleTextAlign', goStyle['DayTitle'], 'textAlign')

StyleInfo.addRule( '.OffDay_' + uniqueID,

'background-color : lightgrey ;'+ // cal--offMonth-background-color

'color : #7F7F7F ;'+ // cal--offMonth-color

'font-family : Arial ;'+ // cal--offMonth-font-family

'font-size : 8pt ;'+ // cal--offMonth-font-size

'font-weight : normal ;'+ // cal--offMonth-font-weight

'text-align : right ;'+ // cal--offMonth-text-align

'vertical-align : text-top ;'+ // cal--offMonth-vertical-align

'border-width : 1px ;'+

'border-style : solid ;'+

'border-left-color : white ;'+

'border-top-color : white ;'+

'border-right-color : black ;'+

'border-bottom-color : black ;'+

'width : 14% ;'+

'cursor : hand ;'

)

goStyle['OffDay'] = StyleInfo.rules[StyleInfo.rules.length - 1].style

fnLoadCSSDefault('cal--offMonth-background-color', 'calOffMonthBackgroundColor', goStyle['OffDay'], 'backgroundColor')

fnLoadCSSDefault('cal--offMonth-color', 'calOffMonthColor', goStyle['OffDay'], 'color')

fnLoadCSSDefault('cal--offMonth-font-family', 'calOffMonthFontFamily', goStyle['OffDay'], 'fontFamily')

fnLoadCSSDefault('cal--offMonth-font-size', 'calOffMonthFontSize', goStyle['OffDay'], 'fontSize')

fnLoadCSSDefault('cal--offMonth-font-weight', 'calOffMonthFontWeight', goStyle['OffDay'], 'fontWeight')

fnLoadCSSDefault('cal--offMonth-text-align', 'calOffMonthTextAlign', goStyle['OffDay'], 'textAlign')

fnLoadCSSDefault('cal--offMonth-vertical-align', 'calOffMonthVerticalAlign', goStyle['OffDay'], 'verticalAlign')

StyleInfo.addRule( '.Day_' + uniqueID,

'background-color : lightgrey ;'+ // cal--currentMonth-background-color

'color : #00009F ;'+ // cal--currentMonth-color

'font-family : Arial ;'+ // cal--currentMonth-font-family

'font-size : 8pt ;'+ // cal--currentMonth-font-size

'font-weight : normal ;'+ // cal--currentMonth-font-weight

'text-align : right ;'+ // cal--currentMonth-text-align

'vertical-align : text-top ;'+ // cal--currentMonth-vertical-align

'border-width : 1px ;'+

'border-style : solid ;'+

'border-left-color : white ;'+

'border-top-color : white ;'+

'border-right-color : black ;'+

'border-bottom-color : black ;'+

'width : 14% ;'+

'cursor : hand ;'

)

goStyle['Day'] = StyleInfo.rules[StyleInfo.rules.length - 1].style

fnLoadCSSDefault('cal--currentMonth-background-color', 'calCurrentMonthBackgroundColor', goStyle['Day'], 'backgroundColor')

fnLoadCSSDefault('cal--currentMonth-color', 'calCurrentMonthColor', goStyle['Day'], 'color')

fnLoadCSSDefault('cal--currentMonth-font-family', 'calCurrentMonthFontFamily', goStyle['Day'], 'fontFamily')

fnLoadCSSDefault('cal--currentMonth-font-size', 'calCurrentMonthFontSize', goStyle['Day'], 'fontSize')

fnLoadCSSDefault('cal--currentMonth-font-weight', 'calCurrentMonthFontWeight', goStyle['Day'], 'fontWeight')

fnLoadCSSDefault('cal--currentMonth-text-align', 'calCurrentMonthTextAlign', goStyle['Day'], 'textAlign')

fnLoadCSSDefault('cal--currentMonth-vertical-align', 'calCurrentMonthVerticalAlign', goStyle['Day'], 'verticalAlign')

StyleInfo.addRule( '.DaySelected_' + uniqueID,

'background-color : #7F7F7F ;'+ // cal--selectedDay-background-color

'color : yellow ;'+ // cal--selectedDay-color

'font-family : Arial ;'+ // cal--selectedDay-font-family

'font-size : 8pt ;'+ // cal--selectedDay-font-size

'font-weight : normal ;'+ // cal--selectedDay-font-weight

'text-align : right ;'+ // cal--selectedMonth-text-align

'vertical-align : text-top ;'+ // cal--selectedMonth-vertical-align

'border-width : 1px ;'+

'border-style : solid ;'+

'border-left-color : black ;'+

'border-top-color : black ;'+

'border-right-color : #BFBFBF ;'+

'border-bottom-color : #BFBFBF ;'+

'width : 14% ;'+

'cursor : hand ;'

)

goStyle['DaySelected'] = StyleInfo.rules[StyleInfo.rules.length - 1].style

fnLoadCSSDefault('cal--selectedDay-background-color', 'calSelectedDayBackgroundColor', goStyle['DaySelected'], 'backgroundColor')

fnLoadCSSDefault('cal--selectedDay-color', 'calSelectedDayColor', goStyle['DaySelected'], 'color')

fnLoadCSSDefault('cal--selectedDay-font-family', 'calSelectedDayFontFamily', goStyle['DaySelected'], 'fontFamily')

fnLoadCSSDefault('cal--selectedDay-font-size', 'calSelectedDayFontSize', goStyle['DaySelected'], 'fontSize')

fnLoadCSSDefault('cal--selectedDay-font-weight', 'calSelectedDayFontWeight', goStyle['DaySelected'], 'fontWeight')

fnLoadCSSDefault('cal--selectedDay-text-align', 'calSelectedDayTextAlign', goStyle['DaySelected'], 'textAlign')

fnLoadCSSDefault('cal--selectedDay-vertical-align', 'calSelectedDayVerticalAlign', goStyle['DaySelected'], 'verticalAlign')

}

//------------------------------------------------------------------------

// Function: fnLoadCSSDefault

// Synopsis: This helper function checks to see if a CSS property

// extension was used to specify a custom style for the

// calendar. If so, the style style object.

// Arguments: sCSSProp The CSS property extension used by the

// page author

// sScriptProp The scriptable property name to add to the

// style Name of the style rule

// sStyleRuleProp Name of the CSS property on the style rule

// Returns: none

// Notes: none

//------------------------------------------------------------------------

function fnLoadCSSDefault(sCSSProp, sScriptProp, oStyleRule, sStyleRuleProp)

{

if (element.currentStyle[sCSSProp])

{

oStyleRule[sStyleRuleProp] = element.currentStyle[sCSSProp]

}

element.style[sScriptProp] = oStyleRule[sStyleRuleProp]

}

//------------------------------------------------------------------------

// Function: fnGetPropertyDefaults

// Synopsis: When the for the properties.

// If so, error checking is performed and the state of the

// calendar is updated.

// Arguments: none

// Returns: none

// Notes: none

//------------------------------------------------------------------------

function fnGetPropertyDefaults()

{

var x

var oDate = new Date()

giDay = oDate.getDate()

giMonth = oDate.getMonth() + 1

giYear = oDate.getYear()

// The JavaScript Date.getYear function returns a 2 digit date representation

// for dates in the 1900's and a 4 digit date for 2000 and beyond.

if (giYear < 100) giYear += 1900

// BUGBUG : Need to fill in day/month/year loading and error checking

if (element.year)

{

if (! isNaN(parseInt(element.year))) giYear = parseInt(element.year)

if (giYear < giMinYear) giYear = giMinYear

if (giYear > giMaxYear) giYear = giMaxYear

}

fnCheckLeapYear(giYear)

if (element.month)

{

if (! isNaN(parseInt(element.month))) giMonth = parseInt(element.month)

if (giMonth < 1) giMonth = 1

if (giMonth > 12) giMonth = 12

}

if (element.day)

{

if (! isNaN(parseInt(element.day))) giDay = parseInt(element.day)

if (giDay < 1) giDay = 1

if (giDay > gaMonthDays[giMonth - 1]) giDay = gaMonthDays[giMonth - 1]

}

if (element.monthLength)

{

switch (element.monthLength.toLowerCase())

{

case 'short' :

giMonthLength = 0

break

case 'long' :

giMonthLength = 1

break

}

if (element.dayLength)

{

switch (element.dayLength.toLowerCase())

{

case 'short' :

giDayLength = 0

break

case 'medium' :

giDayLength = 1

break

case 'long' :

giDayLength = 1

break

}

if (element.firstDay)

{

if ((element.firstDay >= 0) && (element.firstDay <= 6))

giFirstDay = element.firstDay

}

if (element.gridCellEffect)

{

switch (element.gridCellEffect.toLowerCase())

{

case 'raised' :

giGridCellEffect = 'raised'

break

case 'flat' :

giGridCellEffect = 'flat'

break

case 'sunken' :

giGridCellEffect = 'sunken'

break

}

if (element.gridLinesColor)

gsGridLinesColor = element.gridLinesColor

if (element.showDateSelectors)

gbShowDateSelectors = (element.showDateSelectors) ? true : false

if (element.showDays)

gbShowDays = (element.showDays) ? true : false

if (element.showTitle)

gbShowTitle = (element.showTitle) ? true : false

if (element.showHorizontalGrid)

gbShowHorizontalGrid = (element.showHorizontalGrid) ? true : false

if (element.showVerticalGrid)

gbShowVerticalGrid = (element.showVerticalGrid) ? true : false

if (element.valueIsNull)

gbValueIsNull = (element.valueIsNull) ? true : false

if (element.name)

gsName = element.name

if (element.readOnly)

gbReadOnly = (element.readOnly) ? true : false

}

// **********************************************************************

// CALENDAR CONTROL FUNCTIONS

// **********************************************************************

//------------------------------------------------------------------------

// Function: fnSetDate

// Synopsis: The fnSetDate function is used internally to set the day,

// month, and year values.

// Arguments: iDay The new day

// iMonth The new month

// iYear The new year

// Returns: none

// Notes: It does some error checking and some minor performance

// optimizations if the month & year are not being changed.

//------------------------------------------------------------------------

function fnSetDate(iDay, iMonth, iYear)

{

var bValueChange = false

if (gbValueIsNull)

{

gbValueIsNull = false

fnFireOnPropertyChange("propertyName", "valueIsNull")

}

if (iYear < giMinYear) iYear = giMinYear

if (iYear > giMaxYear) iYear = giMaxYear

if (giYear != iYear)

{

fnCheckLeapYear(iYear)

}

if (iMonth < 1) iMonth = 1

if (iMonth > 12) iMonth = 12

if (iDay < 1) iDay = 1

if (iDay > gaMonthDays[giMonth - 1]) iDay = gaMonthDays[giMonth - 1]

if ((giDay == iDay) && (giMonth == iMonth) && (giYear == iYear))

return

else

bValueChange = true

if (giDay != iDay)

{

giDay = iDay

fnFireOnPropertyChange("propertyName", "day")

}

if ((giYear == iYear) && (giMonth == iMonth))

{

goCurrentDayCell.className = 'Day_' + uniqueID

goCurrentDayCell = gaDayCell[giStartDayIndex + iDay - 1]

goCurrentDayCell.className = 'DaySelected_' + uniqueID

giDay = iDay

}

else

{

if (giYear != iYear)

{

giYear = iYear

fnFireOnPropertyChange("propertyName", "year")

fnUpdateYearSelect()

}

if (giMonth != iMonth)

{

giMonth = iMonth

fnFireOnPropertyChange("propertyName", "month")

fnUpdateMonthSelect()

}

fnUpdateTitle()

fnFillInCells()

}

if (bValueChange) fnFireOnPropertyChange("propertyName", "value")

}

//------------------------------------------------------------------------

// Function: fnUpdateTitle

// Synopsis: This function updates the title with the currently selected

// month and year. The month is displayed in the format

// specified by the monthLength option

// Arguments: none

// Returns: none

// Notes: none

//------------------------------------------------------------------------

function fnUpdateTitle()

{

var oTitleCell = element.children[0].rows[0].cells[0]

if (gbShowTitle)

oTitleCell.innerHTML = gaMonthNames[giMonthLength][giMonth - 1] + " " + giYear

else

oTitleCell.innerText = ' '

}

//------------------------------------------------------------------------

// Function: fnUpdateDayTitles

// Synopsis: This function updates the titles for the days of the week.

// They are displayed in the format specified by the dayLength

// option beginning with the day of the week specified by the

// firstDay option.

// Arguments: none

// Returns: none

// Notes: none

//------------------------------------------------------------------------

function fnUpdateDayTitles()

{

var dayTitleRow = element.children[0].rows[1].cells[0].children[0].rows[0]

var iCell = 0

for (i=giFirstDay ; i < 7 ; i++)

{

goDayTitleRow.cells[iCell++].innerText = gaDayNames[giDayLength][i]

}

for (i=0; i < giFirstDay; i++)

{

goDayTitleRow.cells[iCell++].innerText = gaDayNames[giDayLength][i]

}

//------------------------------------------------------------------------

// Function: fnUpdateMonthSelect

// Synopsis: When the month changes, this function is called to select

// the correct month in the month select control.

// Arguments: none

// Returns: none

// Notes: none

//------------------------------------------------------------------------

function fnUpdateMonthSelect()

{

goMonthSelect.options[ giMonth - 1 ].selected = true

}

//------------------------------------------------------------------------

// Function: fnBuildMonthSelect

// Synopsis: When the calendar is created, this function inserts the

// month values into the select control and selects the

// current month.

// Arguments: none

// Returns: none

// Notes: none

//------------------------------------------------------------------------

function fnBuildMonthSelect()

{

var newMonthSelect

newMonthSelect = element.document.createElement("SELECT")

goMonthSelect.parentElement.replaceChild(newMonthSelect, goMonthSelect)

goMonthSelect = newMonthSelect

for (i=0 ; i < 12; i++)

{

e = element.document.createElement("OPTION")

e.text = gaMonthNames[giMonthLength][i]

goMonthSelect.options.add(e)

}

goMonthSelect.options[ giMonth - 1 ].selected = true

goMonthSelect.attachEvent("onchange", fnMonthSelectOnChange)

}

//------------------------------------------------------------------------

// Function: fnMonthSelectOnChange

// Synopsis: When the user changes the month using the month select

// control, this function handles the onSelectChange event

// to update the date.

// Arguments: none

// Returns: none

// Notes: none

//------------------------------------------------------------------------

function fnMonthSelectOnChange()

{

iMonth = goMonthSelect.selectedIndex + 1

fnSetDate(giDay, iMonth, giYear)

}

//------------------------------------------------------------------------

// Function: fnUpdateYearSelect

// Synopsis: When the year changes, this function is called to select

// the correct year in the year select control.

// Arguments: none

// Returns: none

// Notes: none

//------------------------------------------------------------------------

function fnUpdateYearSelect()

{

goYearSelect.options[ giYear - giMinYear ].selected = true

}

//------------------------------------------------------------------------

// Function: fnBuildYearSelect

// Synopsis: When the calendar is created, this function inserts the

// year values into the select control and selects the

// current year.

// Arguments: none

// Returns: none

// Notes: none

//------------------------------------------------------------------------

function fnBuildYearSelect()

{

var newYearSelect

newYearSelect = element.document.createElement("SELECT")

goYearSelect.parentElement.replaceChild(newYearSelect, goYearSelect)

goYearSelect = newYearSelect

for (i=giMinYear; i <= giMaxYear; i++)

{

e = element.document.createElement("OPTION")

e.text = i

goYearSelect.options.add(e)

}

goYearSelect.options[ giYear - giMinYear ].selected = true

goYearSelect.attachEvent("onchange", fnYearSelectOnChange)

}

//------------------------------------------------------------------------

// Function: fnYearSelectOnChange

// Synopsis: When the user changes the year using the year select

// control, this function handles the onSelectChange event

// to update the date.

// Arguments: none

// Returns: none

// Notes: none

//------------------------------------------------------------------------

function fnYearSelectOnChange()

{

iYear = goYearSelect.selectedIndex + giMinYear

fnSetDate(giDay, giMonth, iYear)

}

//------------------------------------------------------------------------

// Function: fnCheckLeapYear

// Synopsis: When the year changes, this function must be called to

// ensure that February has the correct count for the number

// of days.

// Arguments: year

// Returns: none

// Notes: none

//------------------------------------------------------------------------

function fnCheckLeapYear(iYear)

{

gaMonthDays[1] = (((!(iYear % 4)) && (iYear % 100) ) || !(iYear % 400)) ? 29 : 28

}

//------------------------------------------------------------------------

// Function: fnFillInCells

// Synopsis: This method works through the table and sets the day and

// style needed.

// Arguments: none

// Returns: none

// Notes: none

//------------------------------------------------------------------------

function fnFillInCells()

{

var iDayCell = 0

var iLastMonthIndex, iNextMonthIndex

var iLastMonthTotalDays

var iStartDay

fnCheckLeapYear(giYear)

iLastMonthDays = gaMonthDays[ ((giMonth - 1 == 0) ? 12 : giMonth - 1) - 1]

iNextMonthDays = gaMonthDays[ ((giMonth + 1 == 13) ? 1 : giMonth + 1) - 1]

iLastMonthYear = (giMonth == 1) ? giYear - 1 : giYear

iLastMonth = (giMonth == 1) ? 12 : giMonth - 1

iNextMonthYear = (giMonth == 12) ? giYear + 1 : giYear

iNextMonth = (giMonth == 12) ? 1 : giMonth + 1

var oDate = new Date(giYear, (giMonth - 1), 1)

iStartDay = oDate.getDay() - giFirstDay

if (iStartDay < 1) iStartDay += 7

iStartDay = iLastMonthDays - iStartDay + 1

for (i = iStartDay ; i <= iLastMonthDays ; i++ , iDayCell++)

{

gaDayCell[iDayCell].innerText = i

if (gaDayCell[iDayCell].className != 'OffDay_' + uniqueID)

gaDayCell[iDayCell].className = 'OffDay_' + uniqueID

gaDayCell[iDayCell].day = i

gaDayCell[iDayCell].month = iLastMonth

gaDayCell[iDayCell].year = iLastMonthYear

}

giStartDayIndex = iDayCell

for (i = 1 ; i <= gaMonthDays[giMonth - 1] ; i++, iDayCell++)

{

gaDayCell[iDayCell].innerText = i

if (giDay == i)

{

goCurrentDayCell = gaDayCell[iDayCell]

gaDayCell[iDayCell].className = 'DaySelected_' + uniqueID

}

else

{

if (gaDayCell[iDayCell].className != 'Day_' + uniqueID)

gaDayCell[iDayCell].className = 'Day_' + uniqueID

}

gaDayCell[iDayCell].day = i

gaDayCell[iDayCell].month = giMonth

gaDayCell[iDayCell].year = giYear

}

for (i = 1 ; iDayCell < 42 ; i++, iDayCell++)

{

gaDayCell[iDayCell].innerText = i

if (gaDayCell[iDayCell].className != 'OffDay_' + uniqueID)

gaDayCell[iDayCell].className = 'OffDay_' + uniqueID

gaDayCell[iDayCell].day = i

gaDayCell[iDayCell].month = iNextMonth

gaDayCell[iDayCell].year = iNextMonthYear

}

// **********************************************************************

// EVENT HANDLERS

// **********************************************************************

//------------------------------------------------------------------------

// Function: fnOnClick

// Synopsis: When the user clicks on the calendar, change the date if

// needed

// Arguments: none

// Returns: none

// Notes: none

//------------------------------------------------------------------------

function fnOnClick()

{

var e = window.event.srcElement

if (e.tagName == "TD")

{

if (gbReadOnly || (!e.day)) return // The calendar is read only

if ((e.year < giMinYear) || (e.year > giMaxYear)) return

fnSetDate(e.day, e.month, e.year)

}

//------------------------------------------------------------------------

// Function: fnOnSelectStart

// Synopsis: This cancels selection when the user clicks and drags the

// mouse on the calendar. It can still be selected if the

// the SelectStart begins outside this element.

// Arguments: none

// Returns: none

// Notes: none

//------------------------------------------------------------------------

function fnOnSelectStart()

{

window.event.returnValue = false

window.event.cancelBubble = true

}

//------------------------------------------------------------------------

// Function: fnOnReadyStateChange

// Synopsis: When the behavior is completely loaded, set the global

// loading flag to false.

// Arguments: none

// Returns: none

// Notes: To improve load time, we do not want the put methods on

// properties to be called. We also need to keep events from

// getting fired while the behavior is loading.

//------------------------------------------------------------------------

function fnOnReadyStateChange()

{

gbLoading = (readyState != "complete")

}

//------------------------------------------------------------------------

// Function: fnOnPropertyChange

// Synopsis: When a property changes on the element, this function will

// check it to see if part of the calendar needs to be changed

// as a result.

// Arguments: none

// Returns: none

// Notes: This is currently only checking extended style

// properties to alter the calendar style sheet rules.

//------------------------------------------------------------------------

function fnOnPropertyChange()

{

if (window.event.propertyName.substring(0, 5) == 'style')

{

switch (window.event.propertyName)

{

case 'style.calTitleBackgroundColor' :

goStyle['WholeCalendar'].backgroundColor = style.calTitleBackgroundColor

goStyle['Title'].backgroundColor = style.calTitleBackgroundColor

break

case 'style.calTitleColor' :

goStyle['Title'].color = style.calTitleColor

break

case 'style.calTitleFontFamily' :

goStyle['Title'].fontFamily = style.calTitleFontFamily

break

case 'style.calTitleFontSize' :

goStyle['Title'].fontSize = style.calTitleFontSize

break

case 'style.calTitleFontWeight' :

goStyle['Title'].fontWeight = style.calTitleFontWeight

break

case 'style.calTitleTextAlign' :

goStyle['Title'].textAlign = style.calTitleTextAlign

break

case 'style.calDayTitleBackgroundColor' :

goStyle['DayTitle'].backgroundColor = style.calDayTitleBackgroundColor

break

case 'style.calDayTitleColor' :

goStyle['DayTitle'].color = style.calDayTitleColor

break

case 'style.calDayTitleFontFamily' :

goStyle['DayTitle'].fontFamily = style.calDayTitleFontFamily

break

case 'style.calDayTitleFontSize' :

goStyle['DayTitle'].fontSize = style.calDayTitleFontSize

break

case 'style.calDayTitleFontWeight' :

goStyle['DayTitle'].fontWeight = style.calDayTitleFontWeight

break

case 'style.calDayTitleTextAlign' :

goStyle['DayTitle'].textAlign = style.calDayTitleTextAlign

break

case 'style.calOffMonthBackgroundColor' :

goStyle['OffDay'].backgroundColor = style.calOffMonthBackgroundColor

break

case 'style.calOffMonthColor' :

goStyle['OffDay'].color = style.calOffMonthColor

break

case 'style.calOffMonthFontFamily' :

goStyle['OffDay'].fontFamily = style.calOffMonthFontFamily

break

case 'style.calOffMonthFontSize' :

goStyle['OffDay'].fontSize = style.calOffMonthFontSize

break

case 'style.calOffMonthFontWeight' :

goStyle['OffDay'].fontWeight = style.calOffMonthFontWeight

break

case 'style.calOffMonthTextAlign' :

goStyle['OffDay'].textAlign = style.calOffMonthTextAlign

break

case 'style.calOffMonthVerticalAlign' :

goStyle['OffDay'].verticalAlign = style.calOffMonthVerticalAlign

break

case 'style.calCurrentMonthBackgroundColor' :

goStyle['Day'].backgroundColor = style.calCurrentMonthBackgroundColor

break

case 'style.calCurrentMonthColor' :

goStyle['Day'].color = style.calCurrentMonthColor

break

case 'style.calCurrentMonthFontFamily' :

goStyle['Day'].fontFamily = style.calCurrentMonthFontFamily

break

case 'style.calCurrentMonthFontSize' :

goStyle['Day'].fontSize = style.calCurrentMonthFontSize

break

case 'style.calCurrentMonthFontWeight' :

goStyle['Day'].fontWeight = style.calCurrentMonthFontWeight

break

case 'style.calCurrentMonthTextAlign' :

goStyle['Day'].textAlign = style.calCurrentMonthTextAlign

break

case 'style.calCurrentMonthVerticalAlign' :

goStyle['Day'].verticalAlign = style.calCurrentMonthVerticalAlign

break

case 'style.calSelectedDayBackgroundColor' :

goStyle['DaySelected'].backgroundColor = style.calSelectedDayBackgroundColor

break

case 'style.calSelectedDayColor' :

goStyle['DaySelected'].color = style.calSelectedDayColor

break

case 'style.calSelectedDayFontFamily' :

goStyle['DaySelected'].fontFamily = style.calSelectedDayFontFamily

break

case 'style.calSelectedDayFontSize' :

goStyle['DaySelected'].fontSize = style.calSelectedDayFontSize

break

case 'style.calSelectedDayFontWeight' :

goStyle['DaySelected'].fontWeight = style.calSelectedDayFontWeight

break

case 'style.calSelectedDayTextAlign' :

goStyle['DaySelected'].textAlign = style.calSelectedDayTextAlign

break

case 'style.calSelectedDayVerticalAlign' :

goStyle['DaySelected'].verticalAlign = style.calSelectedDayVerticalAlign

break

}

// **********************************************************************

// HELPER FUNCTIONS

// **********************************************************************

//------------------------------------------------------------------------

// Function: fnFireOnPropertyChange

// Synopsis:

// Arguments:

// Returns:

// Notes:

//------------------------------------------------------------------------

function fnFireOnPropertyChange(name1, value1)

{

var evObj = createEventObject()

evObj.setAttribute(name1, value1)

onPropertyChange.fire(evObj)

}

//------------------------------------------------------------------------

// Function: fnUpdateGridColors

// Synopsis: This is a helper function for the calendar grid rendering

// properties. It handles setting the style rules to create

// the desired effects.

// Arguments: none

// Returns: none

// Notes: none

//------------------------------------------------------------------------

function fnUpdateGridColors()

{

switch (gsGridCellEffect)

{

case "raised" :

goStyle['OffDay'].borderLeftColor = 'white'

goStyle['OffDay'].borderTopColor = 'white'

goStyle['OffDay'].borderRightColor = 'black'

goStyle['OffDay'].borderBottomColor = 'black'

goStyle['Day'].borderLeftColor = 'white'

goStyle['Day'].borderTopColor = 'white'

goStyle['Day'].borderRightColor = 'black'

goStyle['Day'].borderBottomColor = 'black'

goStyle['DaySelected'].borderLeftColor = 'white'

goStyle['DaySelected'].borderTopColor = 'white'

goStyle['DaySelected'].borderRightColor = 'black'

goStyle['DaySelected'].borderBottomColor = 'black'

break

case "flat" :

goStyle['OffDay'].borderLeftColor = goStyle['OffDay'].backgroundColor

goStyle['OffDay'].borderTopColor = goStyle['OffDay'].backgroundColor

goStyle['OffDay'].borderRightColor = (gbShowVerticalGrid) ? gsGridLinesColor : goStyle['Day'].backgroundColor

goStyle['OffDay'].borderBottomColor = (gbShowHorizontalGrid) ? gsGridLinesColor : goStyle['Day'].backgroundColor

goStyle['Day'].borderLeftColor = goStyle['Day'].backgroundColor

goStyle['Day'].borderTopColor = goStyle['Day'].backgroundColor

goStyle['Day'].borderRightColor = (gbShowVerticalGrid) ? gsGridLinesColor : goStyle['Day'].backgroundColor

goStyle['Day'].borderBottomColor = (gbShowHorizontalGrid) ? gsGridLinesColor : goStyle['Day'].backgroundColor

goStyle['DaySelected'].borderLeftColor = goStyle['DaySelected'].backgroundColor

goStyle['DaySelected'].borderTopColor = goStyle['DaySelected'].backgroundColor

goStyle['DaySelected'].borderRightColor = (gbShowVerticalGrid) ? gsGridLinesColor : goStyle['Day'].backgroundColor

goStyle['DaySelected'].borderBottomColor = (gbShowHorizontalGrid) ? gsGridLinesColor : goStyle['Day'].backgroundColor

break

case "sunken" :

goStyle['OffDay'].borderLeftColor = 'black'

goStyle['OffDay'].borderTopColor = 'black'

goStyle['OffDay'].borderRightColor = 'white'

goStyle['OffDay'].borderBottomColor = 'white'

goStyle['Day'].borderLeftColor = 'black'

goStyle['Day'].borderTopColor = 'black'

goStyle['Day'].borderRightColor = 'white'

goStyle['Day'].borderBottomColor = 'white'

goStyle['DaySelected'].borderLeftColor = 'black'

goStyle['DaySelected'].borderTopColor = 'black'

goStyle['DaySelected'].borderRightColor = 'white'

goStyle['DaySelected'].borderBottomColor = 'white'

break

default :

throw 450

}

</script>

<public:property put=fnPutDay get=fnGetDay name="day">

<public:property put=fnPutMonth get=fnGetMonth name="month">

<public:property put=fnPutYear get=fnGetYear name="year">

<public:property put=fnPutMonthLength get=fnGetMonthLength name="monthLength">

<public:property put=fnPutDayLength get=fnGetDayLength name="dayLength">

<public:property put=fnPutFirstDay get=fnGetFirstDay name="firstDay">

<public:property put=fnPutGridCellEffect get=fnGetGridCellEffect name="gridCellEffect">

<public:property put=fnPutGridLinesColor get=fnGetGridLinesColor name="gridLinesColor">

<public:property put=fnPutShowDateSelectors get=fnGetShowDateSelectors name="showDateSelectors">

<public:property put=fnPutShowDays get=fnGetShowDays name="showDays">

<public:property put=fnPutShowTitle get=fnGetShowTitle name="showTitle">

<public:property put=fnPutShowVerticalGrid get=fnGetShowVerticalGrid name="showVerticalGrid">

<public:property put=fnPutShowHorizontalGrid get=fnGetShowHorizontalGrid name="showHorizontalGrid">

<public:property put=fnPutValue get=fnGetValue name="value">

<public:property put=fnPutValueIsNull get=fnGetValueIsNull name="valueIsNull">

<public:property put=fnPutReadOnly get=fnGetReadOnly name="readOnly">

<public:event id="onChange" name="onchange">

<public:event id="onPropertyChange" name="onpropertychange">

<public:event id="onError" name="onerror">

============================================

calendar.html

<TITLE>Behavior Library: Calendar</TITLE>

<STYLE>

@media all

{

IE\:Calendar

{

behavior: url(calendar.htc) ;

width : 33%;

}

A:link { color:#003399; text-decoration:none; }

A:visited { color:#6699CC; text-decoration:none; }

A:hover { text-decoration:underline; }

</STYLE>

</HEAD>

<H2>Calendar</H2>

<P>

 <A href="#" onclick=self.close()>Close This Sample</A>

</FONT>

<HR>

<IE:Calendar id="cal" style="width : 300; height : 275; border : 1px solid black;"> </IE:Calendar>

</CENTER>

<P>

<HR>

</FONT>

</BODY>

</HTML>