SELFHTML/Quickbar  JavaScript  Exemples d'application

Calendrier du mois
Cette page est un document avec du texte et des informations

 Calendrier du mois - l'exemple

 

Netscape2.0MS IE 3.0 Calendrier du mois 

exemple Exemple d'affichage: aperçu

L'exemple écrit dans un fichier HTML à l'endroit désiré un calendrier du mois actuel librement formatable. Le jour actuel y est mis en valeur.

Attention: Pour une meilleure orientation dans l'exemple, celui-ci contient des liens aux explications respectives, par exemple: 1*. Ces liens ne font pas partie du code source. Si vous copiez cet exemple dans un éditeur, vous devez effacer ces liens, faute de quoi vous recevriez des messages d'erreur JavaScript.

Exemple:

<html>
<head>
<title>Titre de page</title>
</head>
<body>
<script language="JavaScript">
<!--
1* var d = new Date();
var dm = d.getMonth() + 1;
var dj = d.getYear();
if(dj < 999) dj+=1900;
calendrier(dm,dj);

2* function calendrier(mois,an)
{
nommois = new Array
("Janvier","Février","Mars","Avril","Mai","Juin","Juillet",
"Août","Septembre","Octobre","Novembre","Décembre");
jour = new Array ("Lun","Mar","Mer","Jeu","Ven","Sam","Dim");

var polentete = "Verdana,Arial";  /* police entête de calendrier */
var taillepolentete = 3;          /* taille de police 1-7 entête de calendrier */
var coulpolentete = "#FFFF00";    /* couleur de police entête de calendrier */
var arplanentete = "#000066";     /* couleur d'arrière plan entête de calendrier */
var polijours = "Verdana,Arial";  /* police affichage des jours */
var taillepoljour= 3;             /* taille de police 1-7 affichage des jours */
var coulpoljour = "#000000";      /* couleur de police affichage des jours */
var arplanjour = "#D0F0F0";       /* couleur d'arrière plan affichage des jours */
var couldim = "#E00000";          /* couleur de police pour dimanches */
var coulauj = "#FFFFFF";          /* couleur d'arrière plan pour aujourd'hui */

3* var maintenant= new Date();
var cemois = maintenant.getMonth() + 1;
var cetteannee = maintenant.getYear();
if(cetteannee < 999) cetteannee+=1900;
var cejour = maintenant.getDate();
4* var temps = new Date(an,mois-1,1);
var Start = temps.getDay();
if(Start > 0) Start--;
else Start = 6;
var Stop = 31;
if(mois==4 ||mois==6 || mois==9 || mois==11) --Stop;
if(mois==2)
{
 Stop=Stop-3;
 if(an%4==0) Stop++;
 if(an%100==0) Stop--;
 if(an%400==0) Stop++;
}
5* document.write("<table border=3 cellpadding=1 cellspacing=1>");
var entetemois = nommois[mois-1] + " " + an;
entete(entetemois,arplanentete,coulpolentete,taillepolentete,polentete);
var nombrejours = 1;
for(i=0;i<=5;i++)
 {
  document.write("<tr>");
  for(j=0;j<=5;j++)
   {
    if((i==0)&&(j < Start))
     cellule("&#160;",arplanjour,coulpoljour,taillepoljour,polijours);
    else
     {
      if(nombrejours > Stop)
        cellule("&#160;",arplanjour,coulpoljour,taillepoljour,polijours);
      else
       {
        if((an==cetteannee)&&(mois==cemois)&&(nombrejours==cejour))
         cellule(nombrejours,coulauj,coulpoljour,taillepoljour,polijours);
        else
         cellule(nombrejours,arplanjour,coulpoljour,taillepoljour,polijours);
        nombrejours++;
       }
      }
     }
    if(nombrejours > Stop)
      cellule("&#160;",arplanjour,couldim,taillepoljour,polijours);
    else
     {
      if((an==cetteannee)&&(mois==cemois)&&(nombrejours==cejour))
        cellule(nombrejours,coulauj,couldim,taillepoljour,polijours);
      else
        cellule(nombrejours,arplanjour,couldim,taillepoljour,polijours);
      nombrejours++;
     }
    document.write("</tr>");
  }
document.write("</table>");
}

function entete(titremois,couleurAP,couleurpolice,taillepolice,police)
{
document.write("<tr>");
document.write("<td align=center colspan=7 valign=middle bgcolor="+couleurAP+">");
document.write('<font size='+taillepolice+' color='+couleurpolice+' face="'+police+'"><b>');
document.write(titremois);
document.write("</b></font></td></tr>");
document.write("<tr>");
for(i=0;i<=6;i++)
  cellule(jour[i],couleurAP,couleurpolice,taillepolice,police);
document.write("</tr>");
}

function cellule(contenu,couleurAP,couleurpolice,taillepolice,police)
{
document.write("<td align=center valign=middle bgcolor="+couleurAP+">");
document.write('<font size='+taillepolice+' color='+couleurpolice+' face="'+police+'"><b>');
document.write(contenu);
document.write("</b></font></td>");
}
//-->
</script>
</body>
</html>

Explication:

 rechercher la date actuelle
Dans le passage script est créé dans un premier temps un nouvel objet date avec d = new Date() avec la date et l'heure actuelles. Dans les variables dm et dj sont ensuite recherchées dans le nouvel objet date d le mois et l'année. La fonction calendrier() est ensuite appelée avec ces deux variables.

Note du traducteur: À la traduction (en 2001) de cet ouvrage publié en 1998, l'exemple ci-dessus a été adapté aux années supérieures à 2000, ce que vous reconnaissez aux demandes if(dj < 999) dj+=1900; (1*) et if(cetteannee < 999) dj+=1900; (3*). Voir à ce sujet  l'explication correspondante.

 fonction calendrier()
La fonction calendrier() est réalisée comme sous-programme séparé qui attend simplement un mois et une année qui, dans le calendrier, seront affichés comme mois et année actuels. De cette façon, on peut se servir de la fonction à d'autres fins que pour la seule sortie du mois de calendrier actuel.

Au début de la fonction calendrier() sont d'abord définies différentes variables, dont les noms de mois et les noms de jours de la semaine désirés. Chacun des deux groupes forme un objet Array. Si vous désirez d'autres noms, par exemple des noms plus spécifiques à un dialecte ou à un région, il vous suffit de changer les noms correspondants.
Les mentions de couleurs, de sortes de polices et de tailles de polices pour l'arrière plan du calendrier et l'affichage des jours font également partie des variables qui sont définies au début de calendrier(). Dans l'exemple, ces définitions de variables ont été commentées pour une meilleure compréhension. Modifiez ces valeurs si vous désirez utiliser le calendrier adapté à vos goûts et couleurs!

 rechercher si le jour actif se situe dans le mois à afficher
Étant donné que la fonction calendrier() reçoit comme paramètres quel mois de quelle année elle doit sortir, il peut s'agir tout à fait d'un autre mois que le mois actuel (ce n'est que dans l'exemple ci-dessus que la fonction est appelée avec le mois et l'année actuelle). C'est pourquoi la fonction ici recherche encore une fois séparément les données du jour actuel (cejour), du mois actuel (cemois) et de l'année actuelle (cetteannee). Les données correspondantes seront nécessaires plus tard pour faire ressortir le jour actuel d'une autre couleur - dans la mesure où il tombe dans le mois à sortir.

 préparer l'affichage dans le tableau
Le mois de calendrier doit être écrit dans un tableau HTML à l'aide d'instructions document.write(). Dans un premier temps, il faut cependant rechercher combien de jours a le mois à sortir et à quel jour de la semaine il commence. De cela dépend la façon dont les jours seront écrits dans le tableau.
Dans la variable Start est sauvegardé le jour de semaine sur lequel tombe le premier jour du mois. Pour cela, est créé dans une variable temps un objet Date, qui se réfère avec Date(an,mois-1,1) au premier jour du mois à sortir. Avec temps.getDay(), le jour de la semaine correspondant à ce jour est recherché (0 pour lundi jusqu'à 6 pour dimanche).
Dans la variable Stop, le nombre de jours du mois est recherché. S'il s'agit de l'un des mois 4, 6, 9 ou 11, le mois a 30 jours. S'il s'agit du mois 2, il est nécessaire de jongler un peu avec le calendrier. Car ce mois peut avoir soit 28, soit 29 jours, selon qu'il s'agira d'une année bissextile ou non. Les années bissextiles sont toutes celles qui sont divisibles par 4, sauf celles sont divisibles par 100 (1700, 1800, 1900 ne sont pas bissextiles) à l'exception de celles qui sont divisibles par 400, qui, elles, sont bissextiles à nouveau (1600, 2000 sont bissextiles).

 créer le tableau
Après avoir fait tous ces préparatifs, le tableau avec le mois de calendrier peut être écrit. Cela s'obtient à l'aide de commandes document.write() qui écrivent de façon dynamique les commandes HTML correspondantes dans le fichier. La fonction calendrier() elle-même n'écrit cependant que le début et la fin du tableau. Autrement, elle ne fait que prendre le contrôle de ce qui doit être écrit et dans quel ordre. Pour écrire l'entête du tableau avec les mentions du mois et de l'année ainsi que les noms de jours de semaine, elle appelle la sous-fonction entete(). Pour écrire les différentes cellules du tableau, c'est la sous-fonction cellule() qui est appelée. Pour fournir celles-ci en données correctes, la fonction calendrier() doit prendre en considération les mentions du premier jour de semaine du mois recherchées auparavant, et transmettre correctement les paramètres correspondants. Au cas où une cellule devait rester vide, l'espace forcé &#160; est transmis, car c'est ainsi seulement qu'une cellule de tableau est représentée par la suite de façon visible, même si elle n'a pas de contenu. Si une cellule doit afficher le chiffre du jour, une variable appropriée est transmise.
Les fonctions entete() et cellule() écrivent les différentes cellules de données en mettant en oeuvre les variables pour la structure du calendrier.

après: Compter les visites de pages personnelles avec des cookies
avant: Calculatrice
 

SELFHTML/Quickbar  JavaScript  Exemples d'application

© 1998 Stefan Münz / © 2001 Traduction  Serge François, 13405@free.fr