|
begin process at 2008 07 06 04:58:53
Derniers logiciels
|
Trouver une ressource (Nouvelle version du moteur, plus rapide & pertinent, essayez le !)
Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum.
Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !
CALENDRIER PAR MOIS/ANNÉE AVEC AFFICHAGE DES NUMÉROS DE SEMAINE
Information sur la source
Description
Encore un calendrier... celui ci peut s'afficher en annuel ou mensuel en choisissant dans une liste déroulante et affiche les numéros de semaine en info-bulle. Le choix du mois (en mode mensuel) et le choix de l'année se font par liste déroulante (plus pratique si on veut acceder à une date dans 20 ans que de cliquer 20 fois sur année suivante). La liste déroulante des années va de l'année en cours -50 et +50. J'ai rajouté une colorisation des cases pour le mode annuel, c'est plus facile de s'y retrouver. Prévu pour mettre en fond d'écran sous windows 2000 à l'origine, donc dimensionné pour etre visible en entier en 1024*768 et presque entier en 800*600. Testé seulement sur IE6 et IE5.5
Source
- <html>
- <head>
- <title>Calendrier en JavaScript</title>
-
- <script langage="JavaScript">
- <!--
-
- //déclaration des variables
- date=new Date();
- annee=date.getFullYear();
- mois=date.getMonth();
- LesMois=["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"];
- LesMois2=["J","F","M","A","M","J","J","A","S","O","N","D"];
- LesJours=["D","L","M","M","J","V","S","D"];
-
- //Fonction chargée d'afficher le mois demandé
- function Mois()
- {
- //Affichage de l'en tête
- for(i=0;i<7;i++)
- {
- calendrier+="<td width='"+100/7+"%'>"+LesJours[i+1]+"</td>";
- }
- calendrier+="</tr>";
- //Fixe l'année le mois et le dernier jour du mois
- afficher.setYear(document.Calendrier.Annee.value);
- afficher.setMonth(document.Calendrier.Mois.value);
- afficher.setDate(31);
- if(afficher.getDate()!=31)afficher.setDate(31-afficher.getDate());
- afficher.setMonth(document.Calendrier.Mois.value);
- nbjours=afficher.getDate();
- //Calcul du nombre de semaines du mois (ne fonctionne pas la première fois, mais pourquoi ???)
- nbsem=Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,nbjours);
- nbsem=Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,nbjours);
- nbsem-=Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,1)-1;
- boutmois=new Date(document.Calendrier.Annee.value,document.Calendrier.Mois.value,nbjours);
- if(boutmois.getDay()==0)
- {
- nbsem--;
- }
- boutmois=new Date(document.Calendrier.Annee.value,document.Calendrier.Mois.value,1);
- if(boutmois.getDay()==0)
- {
- nbsem++;
- }
- //Lignes contenant les jours
- h=1;
- for(i=0;i<nbsem;i++)
- {
- calendrier+="<tr align='center'>";
- for(j=1;j<=7;j++,h++)
- {
- afficher.setDate(h);
- if((afficher.getDay()==j||(afficher.getDay()==0&&j==7))&&afficher.getMonth()==document.Calendrier.Mois.value)
- {
- //Le calcul ne fonctionne pas la première fois, mais pourquoi ???
- Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,h-1)
- Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,h-1)
- calendrier+="<td title='Semaine N°"+Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,h-1)+"'>";
- calendrier+=afficher.getDate();
- }
- else
- {
- calendrier+="<td> ";
- h--;
- }
- calendrier+="</td>";
- }
- calendrier+="</tr>";
- }
- calendrier+="</table>";
- document.getElementById("Cal").innerHTML=calendrier;
- document.getElementById("SelMois").style.visibility="visible";
- }
-
- //Fonction chargée d'afficher l'année demandée
- function Annee()
- {
- calendrier+="<td width='"+100/13+"%'> </td>";
- for(i=0;i<12;i++)
- {
- calendrier+="<td width='"+100/13+"%'>"+LesMois2[i]+"</td>";
- }
- calendrier+="</tr>";
- afficher.setYear(document.Calendrier.Annee.value);
- //Lignes contenant les mois
- for(i=0;i<31;i++)
- {
- afficher.setDate(i+1);
- calendrier+="<tr align='center'>";
- calendrier+="<td bgcolor='#00FFFF'>"+(i+1)+"</td>";
- for(j=0;j<12;j++)
- {
- afficher.setMonth(j);
- //Change la couleur de fond de la case suivant sa place dans le tableau
- switch((i%2)+(j%2))
- {
- case 2:calendrier+="<td bgcolor='#C0C0C0'";break;
- case 1:calendrier+="<td bgcolor='#E0E0E0'";break;
- case 0:default:calendrier+="<td";
- }
- //Rempli la case
- if(afficher.getDate()!=i+1)
- {
- calendrier+="> ";
- afficher.setDate(i+1);
- }
- else
- {
- //Si la case correspond a un jour existant, on affiche le numero de la semaine quand la souris passe dessus
- calendrier+=" title='Semaine N°"+Sem(document.Calendrier.Annee.value,j,i)+"'>";
- calendrier+=LesJours[afficher.getDay()];
- }
- calendrier+="</td>";
- }
- calendrier+="</tr>";
- }
- calendrier+="</table>";
- //Affichage du calendrier
- document.getElementById("Cal").innerHTML=calendrier;
- //Cache la liste de choix du mois
- document.getElementById("SelMois").style.visibility="hidden";
- }
-
- //Fonction chargée de changer de mode (mois ou année)
- function Mode()
- {
- mode=document.Calendrier.Modes.value;
- calendrier="<table style='font-size:9' width='100%' border='1'>";
- //En-tête du calendrier
- calendrier+="<tr align='center' bgcolor='#00FFFF'>";
- afficher=new Date();
- if(mode==1){Mois();}
- else{Annee();}
- }
-
- //Fonction chargée de renvoyer le numero de la semaine de la date passée en paramètres
- function Sem(A,M,J)
- {
- date.setYear(A);
- date.setMonth(M);
- date.setDate(J);
- date2=new Date(A,0,1);
- x=1;
- //Cherche le premier Lundi de l'année
- do
- {
- date2.setDate(x);
- x++;
- }
- while(date2.getDay()!=1);
- temps=date.getTime()-date2.getTime()+24*60*60*1000;
- sem=temps/(1000*60*60*24*7);
- return Math.ceil(sem);
- }
-
- //-->
- </script>
- </head>
-
- <body onload="javascript:window.status='C a l e n d r i e r e n J a v a s c r i p t';Mode()" onselectstart="return false" oncontextmenu="return false" style="cursor:default">
- <div align="right" ID=tableau>
- <form name="Calendrier">
- <table style='font-size:9'>
- <tr align="center">
- <td>
- <select name="Modes" tabindex="0" onchange="Mode()">
- <option value="0">Annuel</option>
- <option selected value="1">Mensuel</option>
- </select>
- </td>
- <td>
- <div id=SelMois>
- <select name="Mois" tabindex="1" onchange="Mode()">
- <script langage="JavaScript">
- for(i=0;i<12;i++)
- {
- document.write("<option ");
- if(i==mois)document.write("selected ");
- document.write("value='"+i+"'>"+LesMois[i]+"</option>");
- }
- </script>
- </select>
- </div>
- </td>
- <td>
- <select name="Annee" tabindex="2" onchange="Mode()">
- <script langage="JavaScript">
- for(i=(annee-50);i<(annee+51);i++)
- {
- document.write("<option ");
- if(i==annee)document.write("selected ");
- document.write("value='"+i+"'>"+i+"</option>");
- }
- </script>
- </select>
- </td>
- </tr>
- <tr align="center">
- <td colspan="3">
- <div align="center" ID=Cal>
- </div>
- </td>
- </tr>
- </table>
- </form>
- </div>
- </body>
- </html>
<html>
<head>
<title>Calendrier en JavaScript</title>
<script langage="JavaScript">
<!--
//déclaration des variables
date=new Date();
annee=date.getFullYear();
mois=date.getMonth();
LesMois=["Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Août","Septembre","Octobre","Novembre","Décembre"];
LesMois2=["J","F","M","A","M","J","J","A","S","O","N","D"];
LesJours=["D","L","M","M","J","V","S","D"];
//Fonction chargée d'afficher le mois demandé
function Mois()
{
//Affichage de l'en tête
for(i=0;i<7;i++)
{
calendrier+="<td width='"+100/7+"%'>"+LesJours[i+1]+"</td>";
}
calendrier+="</tr>";
//Fixe l'année le mois et le dernier jour du mois
afficher.setYear(document.Calendrier.Annee.value);
afficher.setMonth(document.Calendrier.Mois.value);
afficher.setDate(31);
if(afficher.getDate()!=31)afficher.setDate(31-afficher.getDate());
afficher.setMonth(document.Calendrier.Mois.value);
nbjours=afficher.getDate();
//Calcul du nombre de semaines du mois (ne fonctionne pas la première fois, mais pourquoi ???)
nbsem=Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,nbjours);
nbsem=Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,nbjours);
nbsem-=Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,1)-1;
boutmois=new Date(document.Calendrier.Annee.value,document.Calendrier.Mois.value,nbjours);
if(boutmois.getDay()==0)
{
nbsem--;
}
boutmois=new Date(document.Calendrier.Annee.value,document.Calendrier.Mois.value,1);
if(boutmois.getDay()==0)
{
nbsem++;
}
//Lignes contenant les jours
h=1;
for(i=0;i<nbsem;i++)
{
calendrier+="<tr align='center'>";
for(j=1;j<=7;j++,h++)
{
afficher.setDate(h);
if((afficher.getDay()==j||(afficher.getDay()==0&&j==7))&&afficher.getMonth()==document.Calendrier.Mois.value)
{
//Le calcul ne fonctionne pas la première fois, mais pourquoi ???
Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,h-1)
Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,h-1)
calendrier+="<td title='Semaine N°"+Sem(document.Calendrier.Annee.value,document.Calendrier.Mois.value,h-1)+"'>";
calendrier+=afficher.getDate();
}
else
{
calendrier+="<td> ";
h--;
}
calendrier+="</td>";
}
calendrier+="</tr>";
}
calendrier+="</table>";
document.getElementById("Cal").innerHTML=calendrier;
document.getElementById("SelMois").style.visibility="visible";
}
//Fonction chargée d'afficher l'année demandée
function Annee()
{
calendrier+="<td width='"+100/13+"%'> </td>";
for(i=0;i<12;i++)
{
calendrier+="<td width='"+100/13+"%'>"+LesMois2[i]+"</td>";
}
calendrier+="</tr>";
afficher.setYear(document.Calendrier.Annee.value);
//Lignes contenant les mois
for(i=0;i<31;i++)
{
afficher.setDate(i+1);
calendrier+="<tr align='center'>";
calendrier+="<td bgcolor='#00FFFF'>"+(i+1)+"</td>";
for(j=0;j<12;j++)
{
afficher.setMonth(j);
//Change la couleur de fond de la case suivant sa place dans le tableau
switch((i%2)+(j%2))
{
case 2:calendrier+="<td bgcolor='#C0C0C0'";break;
case 1:calendrier+="<td bgcolor='#E0E0E0'";break;
case 0:default:calendrier+="<td";
}
//Rempli la case
if(afficher.getDate()!=i+1)
{
calendrier+="> ";
afficher.setDate(i+1);
}
else
{
//Si la case correspond a un jour existant, on affiche le numero de la semaine quand la souris passe dessus
calendrier+=" title='Semaine N°"+Sem(document.Calendrier.Annee.value,j,i)+"'>";
calendrier+=LesJours[afficher.getDay()];
}
calendrier+="</td>";
}
calendrier+="</tr>";
}
calendrier+="</table>";
//Affichage du calendrier
document.getElementById("Cal").innerHTML=calendrier;
//Cache la liste de choix du mois
document.getElementById("SelMois").style.visibility="hidden";
}
//Fonction chargée de changer de mode (mois ou année)
function Mode()
{
mode=document.Calendrier.Modes.value;
calendrier="<table style='font-size:9' width='100%' border='1'>";
//En-tête du calendrier
calendrier+="<tr align='center' bgcolor='#00FFFF'>";
afficher=new Date();
if(mode==1){Mois();}
else{Annee();}
}
//Fonction chargée de renvoyer le numero de la semaine de la date passée en paramètres
function Sem(A,M,J)
{
date.setYear(A);
date.setMonth(M);
date.setDate(J);
date2=new Date(A,0,1);
x=1;
//Cherche le premier Lundi de l'année
do
{
date2.setDate(x);
x++;
}
while(date2.getDay()!=1);
temps=date.getTime()-date2.getTime()+24*60*60*1000;
sem=temps/(1000*60*60*24*7);
return Math.ceil(sem);
}
//-->
</script>
</head>
<body onload="javascript:window.status='C a l e n d r i e r e n J a v a s c r i p t';Mode()" onselectstart="return false" oncontextmenu="return false" style="cursor:default">
<div align="right" ID=tableau>
<form name="Calendrier">
<table style='font-size:9'>
<tr align="center">
<td>
<select name="Modes" tabindex="0" onchange="Mode()">
<option value="0">Annuel</option>
<option selected value="1">Mensuel</option>
</select>
</td>
<td>
<div id=SelMois>
<select name="Mois" tabindex="1" onchange="Mode()">
<script langage="JavaScript">
for(i=0;i<12;i++)
{
document.write("<option ");
if(i==mois)document.write("selected ");
document.write("value='"+i+"'>"+LesMois[i]+"</option>");
}
</script>
</select>
</div>
</td>
<td>
<select name="Annee" tabindex="2" onchange="Mode()">
<script langage="JavaScript">
for(i=(annee-50);i<(annee+51);i++)
{
document.write("<option ");
if(i==annee)document.write("selected ");
document.write("value='"+i+"'>"+i+"</option>");
}
</script>
</select>
</td>
</tr>
<tr align="center">
<td colspan="3">
<div align="center" ID=Cal>
</div>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
Conclusion
le 1e fevrier et le 1e septembre en mode annuel donnent 5 semaines de trop, mais c'est surement un bug du javascript de IE6, car en rappelant la meme fonction plusieurs fois de suite avec les memes parametres, ca change l'emplacement des erreurs.
Fichier Zip
Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !
Télécharger le zip
Sources de la même categorie
Commentaires
Discussions en rapport avec ce code source
|
CalendriCode
| | | L | M | M | J | V | S | D |
| | 1 | 2 | 3 | 4 | 5 | 6 |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | | | |
|
Téléchargements
Logiciels à télécharger sur le même thème :
|
|