Working from the demo on the home page proved to be a little tricky. The demo's layout and source code on the demo page are different than the demo code and layout offered on that page. I chose the source & layout code of the demo page, as they're more cross browser friendly. Then I modified the code to your specifications (date and month numbers will be prefix padded with a zero, if less than 2 characters in the link filename), all you need to worry about is configuring the 'specialDays' array at the beginning of the script and any css style or HTML markup modifications you may want. Note: the onload event thing (// ADD OTHER WINDOW ONLOAD EVENTS HERE...) could not be used for this because the changes needed happen before that code would fire, it is for other onload events on your page, if any. It is not for modifying the script itself. Here is a working demo:
Code:
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<meta name="Author" content="Brian Gosselin">
<title>Basic Calender</title>
<style type="text/css">
body{
font-size:11px;
font-family:verdana;
color:#00416e;
margin-left:50px;
margin-right:50px;
text-align:justify;
}
td{
font-size:11px;
font-family:verdana;
color:#00416e;
}
input{
background-color:light-grey;
vertical-align:middle;
}
table.desc{
font-size:10pt;
font-family:sans-serif;
color:black;
}
</style>
<!-- START OF CALENDER STYLE DECLARATIONS -->
<style type="text/css">
.calShadow{
background-color:black;
position:absolute;
top:10px;
left:10px;
-moz-opacity:.5;
filter:alpha(opacity=50);
}
.calMain{
width:275px;
position:absolute;
left:0px;
top:0px;
background-color:#00436e;
border-width:2px;
border-style:outset;
border-color:#0084d8;
padding:3px;
}
.calMonthYear{
font-size:12px;
font-family:sans-serif;
color:#ffedcf;
cursor:default;
background-color:#00436e;
}
.calHdr{
width:35px;
font-size:12px;
font-weight:bold;
font-family:sans-serif;
color:#ffedcf;
cursor:default;
padding:1px;
background-color:#00436e;
}
.calToday{
width:35px;
font-size:12px;
font-family:sans-serif;
font-weight:bold;
color:red;
cursor:default;
border-width:1px;
border-style:inset;
border-color:gray;
padding:1px;
background-color:#ffedcf;
}
.calText{
width:35px;
font-size:12px;
font-family:sans-serif;
color:black;
cursor:default;
border-width:1px;
border-style:inset;
border-color:gray;
padding:1px;
background-color:#ffedcf;
}
</style>
<!--END OF CALENDER STYLE DECLARATIONS -->
<!-- START OF CALENDER JAVASCRIPT CODE -->
<script language="javascript">
var specialDays=new Array()
// set special days for links below: specialDays[x]=['month_number', 'date_number']
specialDays[0]=['12', '25']
specialDays[1]=['1', '1']
var w3c=(document.getElementById)?true:false;
var ie4=(document.all && !w3c)?true:false;
var ie5=(document.all && w3c)?true:false;
var ns4=(document.layers)?true:false;
var ns6=(w3c && !document.all)?true:false;
var mi=0; var yi=0;
var calA=new Array();
var cal_m, cal_y, cal, calS, now;
function setMonth(incr){
if(!ns4){
mi+=(incr)?1:-1;
if(mi>11)mi=0;
if(mi<0)mi=11;
now.setMonth(mi);
updateCalender();
}}
function setYear(incr){
if(!ns4){
yi+=(incr)?1:-1;
if(yi>50)yi=0;
if(yi<0)yi=50;
now.setFullYear(yi+1970);
updateCalender();
}}
function updateCalender(){
var dim=[31,0,31,30,31,30,31,31,30,31,30,31];
dim[1]=(((now.getFullYear()%100!=0)&&(now.getFullYear()%4==0))||(now.getFullYear()%400==0))?29:28;
cal_m.innerHTML=['January','February','March','April','May','June','July','August','September','October','November','December'][mi];
cal_y.innerHTML=yi+1970;
var offsetD=new Date();
offsetD.setFullYear(yi+1970);
offsetD.setMonth(mi);
offsetD.setDate(1);
offsetD=offsetD.getDay()+1;
for(i=1;i<=42;i++){
if((i-offsetD>=0)&&(i-offsetD<dim[mi])){
for (var i_tem = 0; i_tem < specialDays.length; i_tem++)
if ([mi+1]==specialDays[i_tem][0]&&[i-offsetD+1]==specialDays[i_tem][1]){
calA[i].innerHTML='<a href="'+([mi+1].toString(10).length<2? '0'+[mi+1] : [mi+1] )+([i-offsetD+1].toString(10).length<2? '0'+[i-offsetD+1] : [i-offsetD+1])+cal_y.innerHTML+'.htm">'+[i-offsetD+1]+'</a>';
break
}
else
calA[i].innerHTML=i-offsetD+1;
calA[i].i=i;
calA[i].o=offsetD;
calA[i].className=((now.ref.getDate()==i-offsetD+1)&&(now.ref.getFullYear()==now.getFullYear())&&(now.ref.getMonth()==now.getMonth()))?"calToday":"calText";
}else{
calA[i].className="calText";
calA[i].innerHTML=' ';
}}}
window.onload=function(){
if(!ns4){
for(i=1;i<=42;i++)calA[i]=(ie4)?document.all['cal'+i]:document.getElementById('cal'+i);
cal_m=(ie4)?document.all["calender_m"]:document.getElementById("calender_m");
cal_y=(ie4)?document.all["calender_y"]:document.getElementById("calender_y");
cal=(ie4)?document.all["calender"]:document.getElementById("calender");
calS=(ie4)?document.all["calenderS"]:document.getElementById("calenderS");
calS.style.height=((ie4||ie5)?cal.clientHeight:(w3c)?cal.offsetHeight:200)+'px';
calS.style.width=((ie4||ie5)?cal.clientWidth:(w3c)?cal.offsetWidth:300)+'px';
cal.parentNode.style.width=parseInt(calS.style.width)+10+'px';
cal.parentNode.style.height=parseInt(calS.style.height)+10+'px';
now=new Date(); now.ref=new Date();
mi=now.getMonth(); yi=now.getFullYear()-1970;
updateCalender();
}
// ADD OTHER WINDOW ONLOAD EVENTS HERE...
}
</script>
<!-- END OF CALENDER JAVASCRIPT CODE -->
</head>
<body>
<center><h1>Basic Calender</h1></center>
<table cellpadding=20 cellspacing=0 border=0><tr>
<td valign="top">
<!-- START OF CALENDER HTML CODE -->
<layer visibility="hide"><div style="position:relative; width:200px">
<div id="calenderS" class="calShadow"></div>
<div id="calender" class="calMain"><center>
<table cellpadding=0 border=0 cellspacing=0 width="100%" class="spanText"><tr align="center" valign="bottom">
<td class="calMonthYear"><img src="images/back.jpg" border="none" width=13 height=13 onmousedown="setMonth(false)"></td>
<td class="calMonthYear" width="75"><span id="calender_m" class="calMonthYear"> </span></td>
<td class="calMonthYear"><img src="images/next.jpg" border="none" width=13 height=13 onmousedown="setMonth(true)"></td>
<td class="calMonthYear"> </td>
<td class="calMonthYear"><img src="images/back.jpg" border="none" width=13 height=13 onmousedown="setYear(false)"></td>
<td class="calMonthYear" width="75"><span id="calender_y" class="calMonthYear"> </span></td>
<td class="calMonthYear"><img src="images/next.jpg" border="none" width=13 height=13 onmousedown="setYear(true)"></td>
</tr></table><hr>
<table cellpadding=0 border=0 cellspacing=0>
<tr align="center">
<td><div class="calHdr">S</div></td>
<td><div class="calHdr">M</div></td>
<td><div class="calHdr">T</div></td>
<td><div class="calHdr">W</div></td>
<td><div class="calHdr">T</div></td>
<td><div class="calHdr">F</div></td>
<td><div class="calHdr">S</div></td>
</tr><tr align="center">
<td><div id="cal1" class="calText"> </div></td>
<td><div id="cal2" class="calText"> </div></td>
<td><div id="cal3" class="calText"> </div></td>
<td><div id="cal4" class="calText"> </div></td>
<td><div id="cal5" class="calText"> </div></td>
<td><div id="cal6" class="calText"> </div></td>
<td><div id="cal7" class="calText"> </div></td>
</tr><tr align="center">
<td><div id="cal8" class="calText"> </div></td>
<td><div id="cal9" class="calText"> </div></td>
<td><div id="cal10" class="calText"> </div></td>
<td><div id="cal11" class="calText"> </div></td>
<td><div id="cal12" class="calText"> </div></td>
<td><div id="cal13" class="calText"> </div></td>
<td><div id="cal14" class="calText"> </div></td>
</tr><tr align="center">
<td><div id="cal15" class="calText"> </div></td>
<td><div id="cal16" class="calText"> </div></td>
<td><div id="cal17" class="calText"> </div></td>
<td><div id="cal18" class="calText"> </div></td>
<td><div id="cal19" class="calText"> </div></td>
<td><div id="cal20" class="calText"> </div></td>
<td><div id="cal21" class="calText"> </div></td>
</tr><tr align="center">
<td><div id="cal22" class="calText"> </div></td>
<td><div id="cal23" class="calText"> </div></td>
<td><div id="cal24" class="calText"> </div></td>
<td><div id="cal25" class="calText"> </div></td>
<td><div id="cal26" class="calText"> </div></td>
<td><div id="cal27" class="calText"> </div></td>
<td><div id="cal28" class="calText"> </div></td>
</tr><tr align="center">
<td><div id="cal29" class="calText"> </div></td>
<td><div id="cal30" class="calText"> </div></td>
<td><div id="cal31" class="calText"> </div></td>
<td><div id="cal32" class="calText"> </div></td>
<td><div id="cal33" class="calText"> </div></td>
<td><div id="cal34" class="calText"> </div></td>
<td><div id="cal35" class="calText"> </div></td>
</tr><tr align="center">
<td><div id="cal36" class="calText"> </div></td>
<td><div id="cal37" class="calText"> </div></td>
<td><div id="cal38" class="calText"> </div></td>
<td><div id="cal39" class="calText"> </div></td>
<td><div id="cal40" class="calText"> </div></td>
<td><div id="cal41" class="calText"> </div></td>
<td><div id="cal42" class="calText"> </div></td>
</table></center>
</div></div></layer>
<!--END OF CALENDER HTML CODE -->
</td></tr></table>
</body>
</html>
Junior Coders
Basic calendar with hyperlinks?
Posting Permissions
Reply With Quote
Bookmarks