Calendrier perp�tuel. Outils webmaster. Trucs et astuces html javascript

CALENDRIER PERPETUEL

Outils pour webmaster. Trucs et astuces en code HTML et JavaScript : am�liorer son site internet

Descriptif : ajoutez un calendrier perp�tuel dans vos pages.

Exemple :

Mise en oeuvre : S�lectionnez et copiez directement � l'�cran le code ci-dessous et collez-le dans votre page, code HTML visible.

Entre les deux balises <head> et </head>

<script LANGUAGE="JavaScript"> /* SCRIPT TROUVE SUR L'EDITEUR JAVASCRIPT http://www.editeurjavascript.com */ var HTMLCode = ""; var DaysList = new Array("Jour_Vide", "Lun", "Mar", "Mer", "Jeu", "Ven", "Sam", "Dim"); var MonthsList = new Array("Mois_Vide", "Janvier", "F�vrier", "Mars", "Avril", "Mai", "Juin", "Juillet", "Ao�t", "Septembre", "Octobre", "Novembre", "D�cembre"); 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; } 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); if ((QueryYear * 10000 + QueryMonth * 100 + QueryDate) < 15821220) { alert("Vous avez choisi une date ant�rieure au 20 d�cembre 1582, hors du calendrier Gr�gorien. \nVeuillez s�lectionner une date plus r�cente."); 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(); } } function CheckLeap(yy) { if ((yy % 100 != 0 && yy % 4 == 0) || (yy % 400 == 0)) { return 29; } else { return 28; } } 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; } function DefDateDay(yy,mm,dd) { return Math.floor((Date2Days(yy,mm,dd)-2) % 7) + 1; } 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); } } function DisplaySchedule() { HTMLCode = "<table cellspacing=0 cellpadding=3 border=3 bordercolor=#000033>"; 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><b><font color=#ff0000>" + DaysList[s] + "</font></b></td>"; } else { HTMLCode += "<td><b>" + DaysList[s] + "</b></td>"; } } HTMLCode += "<td><b><font color=#888888>Sem</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=#ff0000>" + (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; } Calendrier.innerHTML = HTMLCode + "</table>"; } </script></p> </center></div> </form>

Entre les deux balises <body> et </body>

<form name="Cal"> <div align="center"><div align="center"><center><h3><font color="#008000">CALENDRIER PERPETUEL</font></h3> </center></div><script language="JavaScript1.2" type="text/javascript"> DateText = "<select name=\"Date\">" for (d=1; d<32; d++) { DateText += "<option"; if (d == TodaysDate) { DateText += " SELECTED"; } DateText += ">"; if (d < 10) { DateText += "0"; } DateText += d + "</option>"; } DateText += "</select>"; MonthText = "<select name=\"Month\">" for (m=1; m<13; m++) { MonthText += "<option"; if (m == TodaysMonth) { MonthText += " SELECTED"; } MonthText += ">"; MonthText += MonthsList[m] + "</option>"; } MonthText += "</select>"; CenturyText = "<select name=\"Century\">" for (c=15; c<25; c++) { CenturyText += "<option"; if (c == Math.floor(TodaysYear / 100)) { CenturyText += " SELECTED"; } CenturyText += ">" + c + "</option>"; } CenturyText += "</select>"; YearText = "<select name=\"Year\">"; for (y=0; y<100; y++) { YearText += "<option"; if (y == (TodaysYear - Math.floor(TodaysYear / 100) * 100)) { YearText += " SELECTED"; } YearText += ">"; if (y < 10) { YearText += "0"; } YearText += y + "</option>"; } YearText += "</select>"; document.write (DateText + MonthText + CenturyText + YearText); </script> </div><dl> <dd align="left"><div align="center"><center><p><input type="button" value=" OK " style="font-family: Arial,Verdana,Helvetica;font-size: 11px; color:#330033 ;font-weight:bold;background-color: #FFCC00; " onClick="CheckData()"> <input type="button" value=" Revenir � la date courante " style="font-family: Arial,Verdana,Helvetica;font-size: 11px; color:#330033 ;font-weight:bold;background-color: #FFCC00;" onClick="document.Cal.reset();CheckData()"> </p> </center></div></dd> <dd><br> <div id="Calendrier" align="center"></div></dd> </dl> </form> <script language="JavaScript1.2" type="text/javascript">CheckData()</script>