DHTML Calender

Perpetual Calender

Instructions:

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

/*******************************************************
* CALENDRIER GREGORIEN PERPETUEL v1.0                  *
* par SKAMP (skamp@befrance.com) (09/09/2000)          *
********************************************************
* Ce script permet de choisir un mois et une annee en  *
* particulier, afin d'afficher dynamiquement le        *
* calendrier correspondant. Par defaut c'est celui du  *
* mois courant qui s'affiche. Note : la 1ere semaine   *
* de l'annee commence le 1er lundi.                    *
*                                                      *
* Le code suivant s'inspire de celui de Jean-Michel    *
* Berthier (berth@cybercable.fr,                       *
* perso.cybercable.fr/berth/jstips/calendrier.htm).    *
*                                                      *
* MODIFICATIONS NECESSAIRES POUR PORTAGE VERS D'AUTRES *
* NAVIGATEURS : N'A ETE TESTE QUE SOUS MICROSOFT       *
* INTERNET EXPLORER 5.00.2614.3500                     *
*******************************************************/

// BROWSER SNIFFER. BEGIN BG MODIFY
ns4 = (navigator.appName.indexOf("Netscape")>=0 && document.layers)? true : false;
ie4 = (document.all && !document.getElementById)? true : false;
ie5 = (document.all && document.getElementById)? true : false;
ns6 = (document.getElementById && navigator.appName.indexOf("Netscape")>=0 )? true: false;
w3c = (document.getElementById)? true : false;
// END BG MODIFY

var HTMLCode = "";
var DaysList = new Array("","Mon","Tue","Wed","Thu","Fri","Sat","Sun");
var MonthsList = new Array("Mois_Vide","January","Febuary","March","April","May","June","July","August","September","October","November","December");
var MonthLength = new Array("Mois_longueur_vide",31,29,31,30,31,30,31,31,30,31,30,31);

var QueryDate = 0;      // Jour demande (date)
var QueryMonth = 0;     // Mois demande
var QueryYear = 0;      // Annee demandee
var QueryDay = 0;       // Jour de la semaine du jour demande, inconnu
var FirstDay = 0;       // Jour de la semaine du 1er jour du mois
var WeekRef = 0;        // Numerotation des semaines
var WeekOne = 0;        // Numerotation des semaines

var Today = new Date();
var TodaysYear = Today.getYear();
var TodaysMonth = Today.getMonth() + 1;
var TodaysDate = Today.getDate();
var TodaysDay = Today.getDay() + 1;
    if (TodaysYear < 2000) { TodaysYear += 1900; }

// On commence par verifier les donnees fournies par l'utilisateur
function CheckData()
{
QueryDate = document.Cal.Date.selectedIndex + 1;
QueryMonth = document.Cal.Month.selectedIndex + 1;
QueryYear = (document.Cal.Century.selectedIndex + 15) * 100 + document.Cal.Year.selectedIndex;
MonthLength[2] = CheckLeap(QueryYear);

// on teste si la date choisie est anterieure au lundi 20 decembre 1582
if ((QueryYear * 10000 + QueryMonth * 100 + QueryDate) < 15821220)
    {
    alert("You have chosen a date before Dec 20th 1582.\n\nPlease make another selection.");
    document.Cal.reset();
    CheckData();
    }
else if (MonthLength[QueryMonth] < QueryDate)       // on verifie si la date est coherente
    {
    alert("Il n'y a pas " + QueryDate + " jours en " + MonthsList[QueryMonth] + " " + QueryYear + " mais " + MonthLength[QueryMonth] + ". \nVeuillez choisir une autre date.");
    document.Cal.reset();
    CheckData();
    }
else { DisplaySchedule(); }

}

// Teste une annee pour determiner si elle est bissextile ou pas
function CheckLeap(yy)
{
if ((yy % 100 != 0 && yy % 4 == 0) || (yy % 400 == 0)) { return 29; }
else { return 28; }
}

// Renvoie le numero de la semaine correspondant a la date requise
function DefWeekNum(dd)
{
numd = 0;
numw = 0;
for (n=1; n<QueryMonth; n++)
    {
    numd += MonthLength[n];
    }
numd = numd + dd - (9 - DefDateDay(QueryYear,1,1));
numw = Math.floor(numd / 7) + 1;

if (DefDateDay(QueryYear,1,1) == 1) { numw++; }
return numw;
}

// Renvoie le numero du jour de la semaine correspondant a la date requise
function DefDateDay(yy,mm,dd)
{
return Math.floor((Date2Days(yy,mm,dd)-2) % 7) + 1;
}

// Transforme la date en nb de jours theoriques
function Date2Days(yy,mm,dd)
{
if (mm > 2)
    {
    var bis = Math.floor(yy/4) - Math.floor(yy/100) + Math.floor(yy/400);
    var zy = Math.floor(yy * 365 + bis);
    var zm = (mm-1) * 31 - Math.floor(mm * 0.4 + 2.3);
    return (zy + zm + dd);
    }
else
    {
    var bis = Math.floor((yy-1)/4) - Math.floor((yy-1)/100) + Math.floor((yy-1)/400);
    var zy = Math.floor(yy * 365 + bis);
    return (zy + (mm-1) * 31 + dd);
    }
}

// ELEMENT FINDER. BEGIN BG MODIFY
function findid(name,doc){
var i,layer;
for(i=0;i<doc.layers.length;i++){
layer=doc.layers[i];
if(layer.name==name)return layer;
if(layer.document.layers.length>0)if((layer=findid(name,layer.document))!=null)return layer;
}
return null;
}
// END BG MODIFY

// Produit le code HTML qui formera le calendrier
function DisplaySchedule()
{
HTMLCode = "<table cellspacing=0 cellpadding=3 border=3 bordercolor=#404056>";
QueryDay = DefDateDay(QueryYear,QueryMonth,QueryDate);
WeekRef = DefWeekNum(QueryDate);
WeekOne = DefWeekNum(1);
HTMLCode += "<tr align=center><td colspan=8 class=TITRE><b>" + MonthsList[QueryMonth] + " " + QueryYear + "</b></td></tr><tr align=center>";

for (s=1; s<8; s++)
    {
    if (QueryDay == s) { HTMLCode += "<td width=28><b><font color=#ff6600>" + DaysList[s] + "</font></b></td>"; }
    else { HTMLCode += "<td width=28><b>" + DaysList[s] + "</b></td>"; }
    }

HTMLCode += "<td><b><font color=#888888>Week</font></b></td></tr>";
a = 0;

for (i=(1-DefDateDay(QueryYear,QueryMonth,1)); i<MonthLength[QueryMonth]; i++)
    {
    HTMLCode += "<tr align=center>";
    for (j=1; j<8; j++)
        {
        if ((i+j) <= 0) { HTMLCode += "<td> </td>"; }
        else if ((i+j) == QueryDate) { HTMLCode += "<td><b><font color=#ff6600>" + (i+j) + "</font></b></td>"; }
        else if ((i+j) > MonthLength[QueryMonth]) { HTMLCode += "<td> </td>"; }
        else { HTMLCode += "<td>" + (i+j) + "</td>"; }
        }

if ((WeekOne+a) == WeekRef) { HTMLCode += "<td><b><font color=#00aa00>" + WeekRef + "</font></b></td>"; }
    else { HTMLCode += "<td><font color=#888888>" + (WeekOne+a) + "</font></td>"; }
    HTMLCode += "</tr>";
    a++;
    i = i + 6;
    }

// ALLOWS CROSS-BROWSER WRITING IN DOCUMENT. BEGIN BG MODIFY
if(ie4)document.all['Calendrier'].innerHTML = HTMLCode + "</table>";
if(w3c)document.getElementById('Calendrier').innerHTML= HTMLCode + "</table>";
if(ns4){
var tns4=findid('Calendrier',document);
tns4.document.open();
tns4.document.write('<center>'+HTMLCode+'</table></center>');
tns4.document.close();
}
// END BG MODIFY

}

function Back()
{
document.Cal.Month.selectedIndex = document.Cal.Month.selectedIndex - 1;
if (document.Cal.Month.selectedIndex == -1) { document.Cal.Month.selectedIndex = 11; }
}

function Next()
{
document.Cal.Month.selectedIndex = document.Cal.Month.selectedIndex + 1;
if (document.Cal.Month.selectedIndex == -1) { document.Cal.Month.selectedIndex = 0; }
}

//EVENT HANDLERS
window.onload=CheckData;
if(ns4)window.onresize=function(){
	setTimeout('history.go(0)',400);
	}

//-->
</script>

2: Copy and paste the following HTML in the BODY section of your page:
Select all...

<form name="Cal">
<script language="JavaScript1.2" type="text/javascript">
    
</script><input type="button" value=" OK " style="font-weight: bold" onClick="CheckData()"><br><br>
<input type="button" value="<< Month" style="font-weight: bold" onClick="Back(); CheckData()"><input type="button" value=" Return to today's date... " style="font-weight: bold" onClick="document.Cal.reset(); setTimeout('CheckData()',100)"><input type="button" value="Month >>" style="font-weight: bold" onClick="Next();CheckData()">
<br><br><br>
<script language="javascript1.2">
if(ns4)document.write('<layer name="Calendrier"></layer><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>')
else document.write('<div id="Calendrier"></div>');
</script>
</center></form>