Bonjour,
Je suis en train d'essayer de faire un pseudo site internet pour l'école de mon fils. J'ai trouvé le script d'un calendrier que je trouve vraiment bien. Je voudrais simplement pouvoir mettre en couleur des dates à évenements (ex: le 12.07.2008 spectacle enfants, vacances...) et mettre une légende sur le côté. Pour créer la légence c'est OK mais pour modifier le script afin de colorer certaines dates du calendrier, dur dur.
Pouvez-vous m'aider?
Ci-après le script
Merci d'avance.
Henrick
<HTML>
<!-- DATE DE CREATION: 30/06/2008 -->
<HEAD><SCRIPT LANGUAGE="JavaScript">
/*
SCRIPT TROUVE SUR L'EDITEUR JAVASCRIPT
http://www.editeurjavascript.com
*/
/*******************************************************
* 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 *
*******************************************************/
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; }
/* 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("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(); }
}
/* 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);
}
}
/* Produit le code HTML qui formera le calendrier */
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>
<STYLE type="text/css">
<!--
SELECT, INPUT, TABLE { font-family : Verdana; font-size : 10px; color : #000033; }
.TITRE { font-family : Verdana; font-size : 12px; color : #000033; }
-->
</STYLE>
<TITLE></TITLE>
<META NAME="Description" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Author" CONTENT="Usager non enregistré">
<META NAME="Generator" CONTENT="WebExpert 2000">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
</HEAD>
<BODY>
<form name="Cal"><center>
<br><br><br><h3>CALENDRIER SCOLAIRE</h3>
<script language="JavaScript1.2" type="text/javascript">
/* AFFICHE LES 4 MENUS DEROULANTS PERMETTANT DE
SELECTIONNER LE JOUR, LE MOIS ET L'ANNEE
**************************************************/
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><input type="button" value=" OK " style="font-weight: bold" onClick="CheckData()"><br><br>
<input type="button" value=" Revenir à la date courante " style="font-weight: bold" onClick="document.Cal.reset();CheckData()">
<br><br><br>
<div id="Calendrier"></div>
</center></form>
<script language="JavaScript1.2" type="text/javascript">CheckData()</script>
</BODY>
</HTML>
modifier script de mon calendrier
