Le Monde selon Mellia

Pour fabriquer un calendrier, commencez par créer une image selon votre goût !

Pour vous exercer, vous pouvez naturellement utiliser l'image toute simple ci-dessous :

(j'ai choisi une image dont les dimensions sont de 210 x 210).

Commencez par ouvrir un fichier, et inscrivez-y le script ci-dessous :

<table width="210" height="210" border="0" cellpadding="0" cellspacing="0" background="calendrier_exemple.gif" bgcolor="#000000">
<tr>
<td width="100%" align="center" valign="middle">
<script language="JavaScript">
tabloMois = new Array(
"Janvier",
"Février",
"Mars",
"Avril",
"Mai",
"Juin",
"Juillet",
"Aout",
"Septembre",
"Octobre",
"Novembre",
"Décembre");
var linkcount=0;
function addlink(month, day, href) {
var tabloLien = new Array(3);
tabloLien[0] = month;
tabloLien[1] = day;
tabloLien[2] = href;
this[linkcount++] = tabloLien;
}
Array.prototype.addlink = addlink;
tabloJour = new Array();
tabloMoisNb = new Array(12);
tabloMoisNb[0]=31;
tabloMoisNb[1]=28;
tabloMoisNb[2]=31;
tabloMoisNb[3]=30;
tabloMoisNb[4]=31;
tabloMoisNb[5]=30;
tabloMoisNb[6]=31;
tabloMoisNb[7]=31;
tabloMoisNb[8]=30;
tabloMoisNb[9]=31;
tabloMoisNb[10]=30;
tabloMoisNb[11]=31;
todayDate=new Date();
CeJour=todayDate.getDay();
MoisEnCours=todayDate.getMonth();
thisdate=todayDate.getDate();
thisyear=todayDate.getYear();
thisyear = thisyear % 100;
thisyear = ((thisyear < 50) ? (2000 + thisyear) : (1900 + thisyear));
if (((thisyear % 4 == 0) 
&& !(thisyear % 100 == 0))
||(thisyear % 400 == 0)) tabloMois[1]++;
startspaces=thisdate+1;
while (startspaces > 7) startspaces-=7;
startspaces = CeJour - startspaces +1;
if (startspaces < 0) startspaces+=7;
document.write("<FONT face='verdana'>");
document.write("<table border=0 " );
document.write("style='font-size : 11px; color : #3680A0; font-weight: bold;???•???:???:???A??' cellpadding=1 cellspacing=2>");
document.write("<tr><td align=center colspan=7><center>" 
+ tabloMois[MoisEnCours] + " " + thisyear 
+ "</center></td></tr>");
document.write("<tr>");

document.write("<td align=center><font color=#3360AA><b>L</b></td>");
document.write("<td align=center><font color=#3360AA><b>M</b></td>")
document.write("<td align=center><font color=#3360AA><b>M</b></td>");
document.write("<td align=center><font color=#3360AA><b>J</b></td>");
document.write("<td align=center><font color=#3360AA><b>V</b></td>");
document.write("<td align=center><font color=#3360AA><b>S</b></td>");
document.write("<td align=center><font color=#3360AA><b>D</b></td>");
document.write("</tr>");
document.write("<tr>");

for (s=0;s<startspaces;s++) {
document.write("<td align=center>-</td>");
}
count=1;
while (count <= tabloMoisNb[MoisEnCours]) {
for (b = startspaces;b<7;b++) {
linktrue=false;
document.write("<td align=center>");
for (c=0;c<tabloJour.length;c++) {
if (tabloJour[c] != null) {
if ((tabloJour[c][0]==MoisEnCours + 1) && (tabloJour[c][1]==count)) {
document.write("<a href=\"" + tabloJour[c][2] + "\">");
linktrue=true;
}
}
}
if (count==thisdate) {
document.write("<FONT style='background-color: #D6F2FF;border: 1px dotted #29637C'><font color='#29637C' size='2'>");

}
if (count <= tabloMoisNb[MoisEnCours]) {
document.write(count);
}
else {
document.write(" ");
}
if (count==thisdate) {
document.write("</font>");
}
if (linktrue)
document.write("</a>");
document.write("</td>");
count++;
}
document.write("</tr>");
document.write("<tr>");
startspaces=0;
}
document.write("</table>");
document.write("</FONT>");
</script></td>
</tr>
<tr>
<td width="100%" align="center" valign="middle"><font face="Verdana" size="+1"><strong><script>
document.write("<FONT style='background-color: #D6F2FF;border: 2px dotted #29637C'><font color='#29637C' size='2'>");
var clockid=new Array()
var clockidoutside=new Array()
var i_clock=-1
var thistime= new Date()
var hours=thistime.getHours()
var minutes=thistime.getMinutes()
var seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
var thistime = hours+":"+minutes+":"+seconds

function writeclock() {
i_clock++
if (document.all || document.getElementById || document.layers) {
clockid[i_clock]="clock"+i_clock
document.write("<span id='"+clockid[i_clock]+"' style='position:relative'>"+thistime+"</span>")
}
}

function clockon() {
thistime= new Date()
hours=thistime.getHours()
minutes=thistime.getMinutes()
seconds=thistime.getSeconds()
if (eval(hours) <10) {hours="0"+hours}
if (eval(minutes) < 10) {minutes="0"+minutes}
if (seconds < 10) {seconds="0"+seconds}
thistime = hours+":"+minutes+":"+seconds

if (document.all) {
for (i=0;i<=clockid.length-1;i++) {
var thisclock=eval(clockid[i])
thisclock.innerHTML=thistime
}
}

if (document.getElementById) {
for (i=0;i<=clockid.length-1;i++) {
document.getElementById(clockid[i]).innerHTML=thistime
}
}
var timer=setTimeout("clockon()",1000)
}
window.onload=clockon
</script><script>writeclock()</script></td>
</tr>
</table>

Notez bien qu'en copiant-collant ce script, vous obtiendrez le calendrier dont vous avez l'aperçu en début de page.

L'image de votre calendrier se place au début du tableau, vous écrirez le nom de la vôtre dans background.

Pour personnaliser votre horloge, vous constaterez qu'il y a plusieurs critères à changer naturellement ! :-)

Dans le premier script (jours, mois) ... avant todays date color il vous sera possible d'adapter les couleurs selon vous :

Par exemple, border. 1px solid #ffffff représente l'entourage de la date du jour. Le fond également peut être changé (background color), à vous de voir.

Ensuite, vous pourrez changer aussi la couleur de la date elle-même (font color).

Au début du second script, qui lui affiche l'heure, 1px solid #ffffff font color=#FFffff background color il ne vous restera qu'à agir de la même façon !

Enfin, toujours dans le second script, vous écrirez l'adresse de votre site à la place de la mienne :-)

Et en conclusion, très important, pensez que votre image ne s'ajustera pas obligatoirement exactement à votre script, c'est à dire que les jours par exemple peuvent être mal placés. Ne vous affolez pas. À vous encore de régler la largeur et la hauteur de votre image, de décider de quel format seront vos polices de fonts... etc... :) Ensuite, quand vous aurez pris l'habitude, vous pourrez créer des calendriers plus originaux ! Le principal étant de connaître les bases de la construction - si je peux dire - !

Travaillez bien... et surtout joyeusement !

Retour au menu des tutoriaux