View Single Post - Urgent help in Javascript calendar display

AnneJan · #3 (**permalink**) Jan 8th, 2006, 14:32

And here's another calendar (scroll months, you can change the colours):

<html>
<head>
<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:#404040;
border-width:2px;
border-style:outset;
border-color:#404040;
padding:3px;
}
.calMonthYear{
font-size:12px;
font-family:sans-serif;
color:#ffedcf;
cursor:default;
background-color:#404040;
}
.calHdr{
width:35px;
font-size:12px;
font-weight:bold;
font-family:sans-serif;
color:#ffedcf;
cursor:default;
padding:1px;
background-color:#404040;
}
.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:#CCCCCC;
}
.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:#CCFFCC;
}
</style>
<!-- UP: Chance colours of calendar -->
<!-- 
calShadow = The dark dropshadow.
calMain = The basic appearance of the calender containing box.
calMonthYear = The appearance of the Month and Year text section.
calHdr = The appearance of the Sunday to Saturday day headers.
calToday = The appearance of today's date in the calender grid.
calText = The appearance of the rest of the days in the calender grid.
-->
</head>
<body>
<center>
<script language="javascript">
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])){
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 -->
<table cellpadding=20 cellspacing=0 border=0><tr>
<td valign="top">
<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="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="next.jpg" border="none" width=13 height=13 onmousedown="setMonth(true)"></td>
<td class="calMonthYear">    </td>
<td class="calMonthYear"><img src="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="next.jpg" border="none" width=13 height=13 onmousedown="setYear(true)"></td>
</tr></table><hr size="1" color="#CCFFCC">
<table cellpadding=0 border=0 cellspacing=0>
<tr align="center">
<td><div class="calHdr">Sun</div></td>
<td><div class="calHdr">Mon</div></td>
<td><div class="calHdr">Tue</div></td>
<td><div class="calHdr">Wed</div></td>
<td><div class="calHdr">Thu</div></td>
<td><div class="calHdr">Fri</div></td>
<td><div class="calHdr">Sat</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>
</td>
</tr></table>
</body>
</html>