Download JavaScript Code Examples, Tutorials, Reference

Provide thousands of free JavaScript code examples, DHTML, HTML JavaScript Tutorials, Reference and Help. JavaScriptBank.com is the best JavaScript resources

Over 2000+ free Javascript

at JavaScriptBank.com Website

Sampled by JavaScriptBank.com

S	M	T	W	T	F	S

This script does not work in Netscape 4. Actually, the calender doesn't even appear in that browser. It does work in IE4+, IE5+, IE6+, and Netscape 6+.

It also features a shadow to give it a small sense of depth. All the settings such as colors and fonts are controlled entirely by cascading stylesheets. The list below gives a brief rundown of the stylesheet classnames and what each pertains to:

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.

Installation:

1: Copy and paste the following style declaration in the HEAD section of your page:
Select all...

2: Copy and paste the following script in the HEAD section of your page:
Select all...

<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>

3: Copy and paste the following HTML in the BODY section of your page wherever you want the calender to appear:
Select all...

<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>
<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>