SELFHTML: JavaScript / Exemples d'application / Calendrier du mois

SELFHTML/Aides à la navigation

JavaScript/DOM

Exemples d'application

Calendrier du mois

Remarques sur cet exemple
Texte source avec explications

Exemple d'affichage: aperçu

Remarques sur cet exemple

L'exemple écrit dans un fichier HTML à l'endroit désiré, un calendrier du mois actuel pouvant être librement formaté. Le jour actuel y est mis en valeur. Un petit bijou pour les pages Web.

Au vu de l'exemple, vous pouvez étudier l'utilisation pratique de l'objet JavaScript Date, mais aussi comment créer du code HTML complexe par des sorties document.write contrôlées.

Texte source avec explications

L'exemple montre un fichier HTML complet dans lequel le JavaScript pour le calendrier mensuel est incorporé.

Exemple:

Exemple d'affichage: aperçu

<html>
<head>
<title>Calendrier du mois</title>
</head>
<body bgcolor="#FFFFFF" text="#000000">

<h1 style="font-family:Verdana,Arial; font-weight:normal">Calendrier du mois</h1>

<script type="text/javascript">
<!--
var d = new Date();
var dm = d.getMonth() + 1;
var dan = d.getYear();
if(dan < 999) dan+=1900;
calendrier(dm,dan);

function calendrier(mois,an) {
nom_mois = new Array
("Janvier","F&eacute;vrier","Mars","Avril","Mai","Juin","Juillet",
"Ao&ucirc;t","Septembre","Octobre","Novembre","D&eacute;cembre");
jour = new Array ("Lu","Ma","Me","Je","Ve","Sa","Di");

var police_entete = "Verdana,Arial"; /* police entête de calendrier  */
var taille_pol_entete = 3;           /* taille de police 1-7 entête de calendrier  */
var couleur_pol_entete = "#FFFF00";     /* couleur de police entête de calendrier  */
var arrplan_entete = "#000066";        /* couleur d'arrière plan entête de calendrier  */
var police_jours = "Verdana,Arial"; /* police affichage des jours  */
var taille_pol_jours = 3;           /* taille de police 1-7 affichage des jours  */
var coul_pol_jours = "#000000";     /* couleur de police affichage des jours  */
var arrplan_jours = "#D0F0F0";        /* couleur d'arrière plan affichage des jours  */
var couleur_dim = "#E00000";        /* couleur de police pour dimanches  */
var couleur_cejour = "#FFFF00";        /* couleur d'arrière plan pour aujourd'hui  */

var maintenant = new Date();
var ce_mois = maintenant.getMonth() + 1;
var cette_annee = maintenant.getYear();
if(cette_annee < 999) cette_annee+=1900;
var ce_jour = maintenant.getDate();
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++;
}
document.write('<table border="3" cellpadding="1" cellspacing="1">');
var entete_mois = nom_mois[mois-1] + " " + an;
inscrit_entete(entete_mois,arrplan_entete,couleur_pol_entete,taille_pol_entete,police_entete);
var nombre_jours = 1;
for(var i=0;i<=5;i++) {
  document.write("<tr>");
  for(var j=0;j<=5;j++) {
    if((i==0)&&(j < Start))
     inscrit_cellule("&#160;",arrplan_jours,coul_pol_jours,taille_pol_jours,police_jours);
    else {
      if(nombre_jours > Stop)
        inscrit_cellule("&#160;",arrplan_jours,coul_pol_jours,taille_pol_jours,police_jours);
      else {
        if((an==cette_annee)&&(mois==ce_mois)&&(nombre_jours==ce_jour))
         inscrit_cellule(nombre_jours,couleur_cejour,coul_pol_jours,taille_pol_jours,police_jours);
        else
         inscrit_cellule(nombre_jours,arrplan_jours,coul_pol_jours,taille_pol_jours,police_jours);
        nombre_jours++;
        }
      }
    }
    if(nombre_jours > Stop)
      inscrit_cellule("&#160;",arrplan_jours,couleur_dim,taille_pol_jours,police_jours);
    else {
      if((an==cette_annee)&&(mois==ce_mois)&&(nombre_jours==ce_jour))
        inscrit_cellule(nombre_jours,couleur_cejour,couleur_dim,taille_pol_jours,police_jours);
      else
        inscrit_cellule(nombre_jours,arrplan_jours,couleur_dim,taille_pol_jours,police_jours);
      nombre_jours++;
    }
    document.write("<\/tr>");
  }
document.write("<\/table>");
}

function inscrit_entete(titre_mois,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(titre_mois);
document.write("<\/b><\/font><\/td><\/tr>");
document.write("<tr>");
for(var i=0;i<=6;i++)
  inscrit_cellule(jour[i],couleurAP,couleurpolice,taillepolice,police);
document.write("<\/tr>");
}

function inscrit_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 dan 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.
L'instruction if(dan < 999) dan+=1900; est nécessaire ici pour aider certains navigateurs plus anciens, qui ne réagissent pas à l'appel de la méthode getYear de façon compatible à l'an 2000, à trouver l'année désirée.

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 actuel 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 (ce_jour), du mois actuel (ce_mois) et de l'année actuelle (cette_annee). 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. Ici aussi, l'adaptation pour l'an 2000 a été réalisée.

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 inscrit_entete(). Pour écrire les différentes cellules du tableau, c'est la sous-fonction inscrit_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é   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 inscrit_entete() et inscrit_cellule() écrivent les différentes cellules de données en mettant en oeuvre les variables pour la structure du calendrier.


	Compter les visites de pages personnelles avec des cookies
	Calculatrice

SELFHTML/Aides à la navigation

JavaScript/DOM

Exemples d'application