Calendrier par mois/année avec affichage des numéros de semaine

Télécharger le projet
Commenter

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 / Exemple : 


<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>&nbsp";
				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+"%'>&nbsp</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+=">&nbsp";
				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.
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (Marmotte86)