<script language="JavaScript" src="calendar.js"></script>
<link rel="stylesheet" href="calendar.css">
<form name="test">
<div id="container">
</div>
<input type="Button" onclick="f_createContent()" value="Create" />
<input type="Button" onclick="removeContent()" value="Delete" />
<script language="JavaScript">
var CALNUM = 1;
function f_createContent() {
var e_div = f_getElement('container');
e_div.innerHTML += CALNUM
+ '. <input type="text" name="testinpt' + CALNUM + '" value="" />'
+ '<img title="Open Calendar" class="tcalIcon" onclick="A_TCALS[\'CalID' + CALNUM + '\'].f_toggle()" id="tcalico_CalID' + CALNUM + '" src="img/cal.gif"/><br />';
new tcal ({
// form name
'formname': 'test',
// input name
'controlname': 'testinpt' + CALNUM,
// set unique ID to identify the elements
'id': 'CalID' + CALNUM
});
CALNUM++;
}
function removeContent() {
var e_div = f_getElement('container');
e_div.innerHTML = '';
window.A_TCALS = null;
window.A_TCALSIDX = null;
CALNUM = 1;
}
</script>
</form>
Calendar.Css
/* calendar icon */
img.tcalIcon {
cursor: pointer;
margin-left: 1px;
vertical-align: middle;
}
/* calendar container element */
div#tcal {
position: absolute;
visibility: hidden;
z-index: 100;
width: 158px;
padding: 2px 0 0 0;
}
/* all tables in calendar */
div#tcal table {
width: 100%;
border: 1px solid silver;
border-collapse: collapse;
background-color: white;
}
/* navigation table */
div#tcal table.ctrl {
border-bottom: 0;
}
/* navigation buttons */
div#tcal table.ctrl td {
width: 15px;
height: 20px;
}
/* month year header */
div#tcal table.ctrl th {
background-color: white;
color: black;
border: 0;
}
/* week days header */
div#tcal th {
border: 1px solid silver;
border-collapse: collapse;
text-align: center;
padding: 3px 0;
font-family: tahoma, verdana, arial;
font-size: 10px;
background-color: gray;
color: white;
}
/* date cells */
div#tcal td {
border: 0;
border-collapse: collapse;
text-align: center;
padding: 2px 0;
font-family: tahoma, verdana, arial;
font-size: 11px;
width: 22px;
cursor: pointer;
}
/* date highlight
in case of conflicting settings order here determines the priority from least to most important */
div#tcal td.othermonth {
color: silver;
}
div#tcal td.weekend {
background-color: #ACD6F5;
}
div#tcal td.today {
border: 1px solid red;
}
div#tcal td.selected {
background-color: #FFB3BE;
}
/* iframe element used to suppress windowed controls in IE5/6 */
iframe#tcalIF {
position: absolute;
visibility: hidden;
z-index: 98;
border: 0;
}
/* transparent shadow */
div#tcalShade {
position: absolute;
visibility: hidden;
z-index: 99;
}
div#tcalShade table {
border: 0;
border-collapse: collapse;
width: 100%;
}
div#tcalShade table td {
border: 0;
border-collapse: collapse;
padding: 0;
}