Calendrier (multi navigateur)

Soyez le premier à donner votre avis sur cette source.

Vue 10 492 fois - Téléchargée 799 fois

Description

Petit calendrier sur une ligne, avec les années bissextiles,
et les jours associés aux dates ( c'est chiant à faire ça !)

Source / Exemple :


<HTML>

  <HEAD>
    <TITLE>
      Calendrier
    </TITLE>
  </HEAD>

  <BODY  >

  <SCRIPT language="JavaScript">
    <!--   

    //------------------------------------------------------------------ 
    //   Variables globales
    //------------------------------------------------------------------ 	
    var daysTable = new Array("","Lundi", "Mardi", "Mercredi", "Jeudi", "Vendredi", "Samedi", "Dimanche");
    var shortDaysTable = new Array("","Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di");
    var monthsTable = new Array("","Janvier","Février","Mars","Avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Décembre");

    var year = 2005;
    var indexDay = 6;
    var indexMonth = 2;

    var currentYear=0;
    var currentDay=0;
    var currentDate=0;
    var currentMonth=0;
    var month = monthsTable[indexMonth];
    var day = daysTable[indexDay];

    //------------------------------------------------------------------ 
    //    Initialisation de la page
    //------------------------------------------------------------------ 	
    function init()
    {
	var s = new Date();
    	indexDay = s.getDay();
	indexMonth = s.getMonth()+1;
	year = s.getYear();

	
	// si navigateur != IE on rajoute 1900 à year
	var bname = navigator.appName;
	if (bname != "Microsoft Internet Explorer")
  	{
   		year += 1900;
   	}

	
	currentYear=year;
    	currentDay=indexDay;
    	currentMonth=indexMonth;
    	currentDate=s.getDate();

	document.getElementById('my').rows[0].cells[1].innerHTML = getMonth();
	document.getElementById('my').rows[0].cells[5].innerHTML = getYear();

	displayDays();
    }

    //------------------------------------------------------------------ 
    //    Enlever un mois
    //------------------------------------------------------------------ 	
     function monthLess()
    {
      indexMonth  = indexMonth - 1;
      if(indexMonth < 1){ indexMonth = 12; year -- ;}
      

	document.getElementById('my').rows[0].cells[1].innerHTML = getMonth();
	document.getElementById('my').rows[0].cells[5].innerHTML = getYear();
	displayDays();
    }

    //------------------------------------------------------------------ 
    //    Ajouter un mois
    //------------------------------------------------------------------ 	
     function monthPlus()
    {
      indexMonth = indexMonth + 1;
      if(indexMonth > 12){ indexMonth = 1; year ++;}
      
	document.getElementById('my').rows[0].cells[1].innerHTML = getMonth();
	document.getElementById('my').rows[0].cells[5].innerHTML = getYear();
	displayDays();
    }

    //------------------------------------------------------------------ 
    //    Enlever une année
    //------------------------------------------------------------------ 	
     function yearLess()
    {
      	year--;
	document.getElementById('my').rows[0].cells[5].innerHTML = getYear();
	displayDays();
    }

    //------------------------------------------------------------------ 
    //    Ajouter une année
    //------------------------------------------------------------------ 	
     function yearPlus()
    {
   	year++;
	document.getElementById('my').rows[0].cells[5].innerHTML = getYear();
        displayDays();
    }

    //------------------------------------------------------------------ 
    //    Retourne le mois
    //------------------------------------------------------------------ 	
     function getMonth()
    {
      month = monthsTable[indexMonth];
      return month;
    }

    //------------------------------------------------------------------ 
    //    Retourne le jour
    //------------------------------------------------------------------ 	
     function getDay()
    {
      indexDay ++;
      day = daysTable[indexDay];    
      return day;
    }

    //------------------------------------------------------------------ 
    //    Retourne l'année, mais sert à rien puisque year est une variable globale
    //------------------------------------------------------------------ 	
    function getYear()
    { 
      return year;
    }
    

    //------------------------------------------------------------------ 
    //    Teste si l'année courante est bisextile
    //------------------------------------------------------------------ 	
    function isBi()
    {	
	var dif = year-2000;
	if(dif<0)dif*=-1;
	if(dif%4==0)return 1;
	return 0;
	
    }

    //------------------------------------------------------------------ 
    //    Teste si l'année en parametre est bisextile
    //------------------------------------------------------------------ 	
     function isBiBis(a)
    {	
	var dif = a-2000;
	if(dif<0)dif*=-1;
	if(dif%4==0)return 1;
	return 0;
	
    }
    

    //------------------------------------------------------------------ 
    //    Pour calculer quel jour ça tombe le 1er aout 2063
    //------------------------------------------------------------------ 	
    function dateToDay()
    {
	var nb=0;
	var diffYear=year - currentYear;
	
	// plus d'un an plus tard
	if(diffYear>1)
	{
		// comptage des 365 jours
		for(var a=currentYear+1;a<year;a++)	
		{
			if(isBiBis(a)==1) nb+=366;
			else nb+=365;
		}

		// comptage des jours de la fin de l'année de reference
		for(var a=currentMonth+1;a<=12;a++)
		{
			if(monthsTable[a]=="Janvier" || monthsTable[a]=="Mars" || monthsTable[a]=="Mai" || monthsTable[a]=="Juillet" || monthsTable[a]=="Aout" || monthsTable[a]=="Octobre" || monthsTable[a]=="Décembre")			
				nb+=31;
			else if(monthsTable[a]=="Avril"  || monthsTable[a]=="Juin" || monthsTable[a]=="Septembre" || monthsTable[a]=="Novembre")
				nb+=30;
			else if(monthsTable[a]=="Février")
			{
				if(isBiBis(currentYear)==1)nb+=29;
				else nb+=28;		
			}
		}

		// comptage des jours du debut de l'annee selectionnee
		for(var a=1;a<indexMonth;a++)
		{
			if(monthsTable[a]=="Janvier" || monthsTable[a]=="Mars" || monthsTable[a]=="Mai" || monthsTable[a]=="Juillet" || monthsTable[a]=="Aout" || monthsTable[a]=="Octobre" || monthsTable[a]=="Décembre")			
				nb+=31;
			else if(monthsTable[a]=="Avril"  || monthsTable[a]=="Juin" || monthsTable[a]=="Septembre" || monthsTable[a]=="Novembre")
				nb+=30;
			else if(monthsTable[a]=="Février")
			{
				if(isBiBis(currentYear)==1)nb+=29;
				else nb+=28;		
			}
		}
	
		// comptage des jours jusqu'a la fin du mois courrant
		var nbD;
		if(monthsTable[currentMonth]=="Janvier" || monthsTable[currentMonth]=="Mars" || monthsTable[currentMonth]=="Mai" || monthsTable[currentMonth]=="Juillet" || monthsTable[currentMonth]=="Aout" || monthsTable[currentMonth]=="Octobre" || monthsTable[currentMonth]=="Décembre")			
			nbD=31;
		else if(monthsTable[currentMonth]=="Avril"  || monthsTable[currentMonth]=="Juin" || monthsTable[currentMonth]=="Septembre" || monthsTable[currentMonth]=="Novembre")
			nbD=30;
		else if(monthsTable[currentMonth]=="Février")
		{
			if(isBiBis(currentYear)==1)nbD=29;
			else nbD=28;		
		}
		nb+=nbD;
	

	}
	// plus d'un an avant
	else if(diffYear<-1)
	{
		// comptage des 365 jours
		for(var a=currentYear-1;a>year;a--)	
		{
			if(isBiBis(a)==1) nb-=366;
			else nb-=365;
		}

		// comptage des jours du debut de l'année de reference
		for(var a=currentMonth-1;a>0;a--)
		{
			if(monthsTable[a]=="Janvier" || monthsTable[a]=="Mars" || monthsTable[a]=="Mai" || monthsTable[a]=="Juillet" || monthsTable[a]=="Aout" || monthsTable[a]=="Octobre" || monthsTable[a]=="Décembre")			
				nb-=31;
			else if(monthsTable[a]=="Avril"  || monthsTable[a]=="Juin" || monthsTable[a]=="Septembre" || monthsTable[a]=="Novembre")
				nb-=30;
			else if(monthsTable[a]=="Février")
			{
				if(isBiBis(currentYear)==1)nb-=29;
				else nb-=28;		
			}
		}

		// comptage des jours de la fin de l'annee selectionnee
		for(var a=12;a>=indexMonth;a--)
		{
			if(monthsTable[a]=="Janvier" || monthsTable[a]=="Mars" || monthsTable[a]=="Mai" || monthsTable[a]=="Juillet" || monthsTable[a]=="Aout" || monthsTable[a]=="Octobre" || monthsTable[a]=="Décembre")			
				nb-=31;
			else if(monthsTable[a]=="Avril"  || monthsTable[a]=="Juin" || monthsTable[a]=="Septembre" || monthsTable[a]=="Novembre")
				nb-=30;
			else if(monthsTable[a]=="Février")
			{
				if(isBiBis(currentYear)==1)nb-=29;
				else nb-=28;		
			}
		}
	}

	// juste l'annee suivante
	else if(diffYear==1)
	{	

		// comptage des jours de la fin de l'année de reference
		for(var a=currentMonth+1;a<=12;a++)
		{
			if(monthsTable[a]=="Janvier" || monthsTable[a]=="Mars" || monthsTable[a]=="Mai" || monthsTable[a]=="Juillet" || monthsTable[a]=="Aout" || monthsTable[a]=="Octobre" || monthsTable[a]=="Décembre")			
				nb+=31;
			else if(monthsTable[a]=="Avril"  || monthsTable[a]=="Juin" || monthsTable[a]=="Septembre" || monthsTable[a]=="Novembre")
				nb+=30;
			else if(monthsTable[a]=="Février")
			{
				if(isBiBis(currentYear)==1)nb+=29;
				else nb+=28;		
			}
		}	

		// comptage des jours du debut de l'annee selectionnee
		for(var a=1;a<indexMonth;a++)
		{
			if(monthsTable[a]=="Janvier" || monthsTable[a]=="Mars" || monthsTable[a]=="Mai" || monthsTable[a]=="Juillet" || monthsTable[a]=="Aout" || monthsTable[a]=="Octobre" || monthsTable[a]=="Décembre")			
				nb+=31;
			else if(monthsTable[a]=="Avril"  || monthsTable[a]=="Juin" || monthsTable[a]=="Septembre" || monthsTable[a]=="Novembre")
				nb+=30;
			else if(monthsTable[a]=="Février")
			{
				if(isBiBis(currentYear)==1)nb+=29;
				else nb+=28;		
			}
		}	

		// comptage des jours jusqu'a la fin du mois courrant
		var nbD;
		if(monthsTable[currentMonth]=="Janvier" || monthsTable[currentMonth]=="Mars" || monthsTable[currentMonth]=="Mai" || monthsTable[currentMonth]=="Juillet" || monthsTable[currentMonth]=="Aout" || monthsTable[currentMonth]=="Octobre" || monthsTable[currentMonth]=="Décembre")			
			nbD=31;
		else if(monthsTable[currentMonth]=="Avril"  || monthsTable[currentMonth]=="Juin" || monthsTable[currentMonth]=="Septembre" || monthsTable[currentMonth]=="Novembre")
			nbD=30;
		else if(monthsTable[currentMonth]=="Février")
		{
			if(isBiBis(currentYear)==1)nbD=29;
			else nbD=28;		
		}
		nb+=nbD;
		

	}

	// Juste l'année d'avant
	else if(diffYear==-1)
	{	

		// comptage des jours du debut de l'année de reference
		for(var a=currentMonth-1;a>0;a--)
		{
			if(monthsTable[a]=="Janvier" || monthsTable[a]=="Mars" || monthsTable[a]=="Mai" || monthsTable[a]=="Juillet" || monthsTable[a]=="Aout" || monthsTable[a]=="Octobre" || monthsTable[a]=="Décembre")			
				nb-=31;
			else if(monthsTable[a]=="Avril"  || monthsTable[a]=="Juin" || monthsTable[a]=="Septembre" || monthsTable[a]=="Novembre")
				nb-=30;
			else if(monthsTable[a]=="Février")
			{
				if(isBiBis(currentYear)==1)nb-=29;
				else nb-=28;		
			}
		}	

		// comptage des jours de la fin de l'annee selectionnee
		for(var a=12;a>=indexMonth;a--)
		{
			if(monthsTable[a]=="Janvier" || monthsTable[a]=="Mars" || monthsTable[a]=="Mai" || monthsTable[a]=="Juillet" || monthsTable[a]=="Aout" || monthsTable[a]=="Octobre" || monthsTable[a]=="Décembre")			
				nb-=31;
			else if(monthsTable[a]=="Avril"  || monthsTable[a]=="Juin" || monthsTable[a]=="Septembre" || monthsTable[a]=="Novembre")
				nb-=30;
			else if(monthsTable[a]=="Février")
			{
				if(isBiBis(currentYear)==1)nb-=29;
				else nb-=28;		
			}
		}	
	}

	// Un mois de la meme année
	else if(diffYear==0)
	{

		var diffMonth = indexMonth - currentMonth;

		// un mois suivant le mois courant
		if(diffMonth>0)
		{
			// comptage des jours entre les 2 mois
			for(var a=currentMonth+1;a<indexMonth;a++)
			{
				if(monthsTable[a]=="Janvier" || monthsTable[a]=="Mars" || monthsTable[a]=="Mai" || monthsTable[a]=="Juillet" || monthsTable[a]=="Aout" || monthsTable[a]=="Octobre" || monthsTable[a]=="Décembre")			
					nb+=31;
				else if(monthsTable[a]=="Avril"  || monthsTable[a]=="Juin" || monthsTable[a]=="Septembre" || monthsTable[a]=="Novembre")
					nb+=30;
				else if(monthsTable[a]=="Février")
				{
					if(isBiBis(currentYear)==1)nb+=29;
					else nb+=28;		
				}
			}

			// comptage des jours jusqu'a la fin du mois courrant
			var nbD;
			if(monthsTable[currentMonth]=="Janvier" || monthsTable[currentMonth]=="Mars" || monthsTable[currentMonth]=="Mai" || monthsTable[currentMonth]=="Juillet" || monthsTable[currentMonth]=="Aout" || monthsTable[currentMonth]=="Octobre" || monthsTable[currentMonth]=="Décembre")			
				nbD=31;
			else if(monthsTable[currentMonth]=="Avril"  || monthsTable[currentMonth]=="Juin" || monthsTable[currentMonth]=="Septembre" || monthsTable[currentMonth]=="Novembre")
				nbD=30;
			else if(monthsTable[currentMonth]=="Février")
			{
				if(isBiBis(currentYear)==1)nbD=29;
				else nbD=28;		
			}
			nb+=nbD;

		}
		// Le mois courant
		else if(diffMonth==0)
		{
			nb = 0;

		}
		// Un mois precedent
		else if(diffMonth<0)
		{
			// comptage des jours entre les 2 mois
			for(var a=currentMonth-1;a>=indexMonth;a--)
			{
				if(monthsTable[a]=="Janvier" || monthsTable[a]=="Mars" || monthsTable[a]=="Mai" || monthsTable[a]=="Juillet" || monthsTable[a]=="Aout" || monthsTable[a]=="Octobre" || monthsTable[a]=="Décembre")			
					nb-=31;
				else if(monthsTable[a]=="Avril"  || monthsTable[a]=="Juin" || monthsTable[a]=="Septembre" || monthsTable[a]=="Novembre")
					nb-=30;
				else if(monthsTable[a]=="Février")
				{
					if(isBiBis(currentYear)==1)nb-=29;
					else nb-=28;		
				}
			}
		}
	}	

	// on cherche le jour du 1er du mois courant.
	var indexFirst = currentDay;
	var index = currentDate-1;
	while(index>0)
	{
		indexFirst--;
		if(indexFirst<1) indexFirst=7;
		index--;
	}

	// on recadre le nombre de jour de difference entre 1 et 7
	// et on ajoute le nombre de jour qu'il faut
	if( nb > 0)
	{
		nb = nb % 7;
	
		while(nb > 0)
		{
			indexFirst++;
			if(indexFirst>7) indexFirst=1;
			nb--;
		}
	}
	else if( nb < 0)
	{
		while( nb<-7 ) nb+=7;	

		while(nb < 0)
		{
			indexFirst--;
			if(indexFirst<1) indexFirst=7;
			nb++;
		}
	}

	return indexFirst;
    }

    //------------------------------------------------------------------ 
    //    Affichage du tableau des jours
    //------------------------------------------------------------------ 	
    function displayDays()
    {
       var nbCells = document.getElementById('days_tab').rows[0].cells.length;
	
	// On efface toutes les cellules sauf la premiere
       for (var l=0;l<nbCells-1;l++)
       {
	document.getElementById('days_tab').rows[0].deleteCell(1);
       }

  	
	// on cherche le nombre de jour pour le mois selectionné
	if(getMonth()=="Janvier" || getMonth()=="Mars" || getMonth()=="Mai" || getMonth()=="Juillet" || getMonth()=="Aout" || getMonth()=="Octobre" || getMonth()=="Décembre")
	nbdays=31;
	
	else if(getMonth()=="Avril"  || getMonth()=="Juin" || getMonth()=="Septembre" || getMonth()=="Novembre")
	nbdays=30;
	
	else if(getMonth()=="Février")
	{
		if(isBi()==1)nbdays=29;
		else nbdays=28;		
	}

	// On affiche les jours

	var colorFerie = "<P style='background-color:#C0C000;cursor:hand'>";
	var colorNormal = "<P style='background-color:#888888;cursor:hand'>";

	var actualDay = dateToDay();
	
	var color;

	if( actualDay==7 )color = colorFerie;
	else color = colorNormal;
     
	document.getElementById('days_tab').rows[0].cells[0].innerHTML = color+shortDaysTable[actualDay]+"<BR>1</P>";

	actualDay++;
	if(actualDay>7) actualDay = 1;

 	for (var l=2;l<=nbdays;l++)
       	{
		if( actualDay==7 )color = colorFerie;
		else color = colorNormal;
         	
		document.getElementById('days_tab').rows[0].insertCell(-1).innerHTML= color+shortDaysTable[actualDay]+"<BR>"+l+"</P>"   ;
        
		actualDay++;
		if(actualDay>7) actualDay = 1;
       	}
    }

    //-->  // Fin de la partie cachée
  </SCRIPT>

	<center>

<!--//------------------------------------------------------------------ 
    //    Affichage de la date actuelle
    //------------------------------------------------------------------ 	
-->  	<SCRIPT>
		var s = new Date();
		// si navigateur != IE on rajoute 1900 à year
		var bname = navigator.appName;
		var y = s.getYear();
		if (bname != "Microsoft Internet Explorer")
  		{
   			y += 1900;
   		}
		document.write( daysTable[s.getDay()]+" "+s.getDate()+" "+monthsTable[s.getMonth()+1]+" "+y);
	</SCRIPT>

    <BR><BR><BR>

<!--//------------------------------------------------------------------ 
    //    HTML
    //------------------------------------------------------------------ 	
-->  

<!-- Tableau du mois et année -->

	
	<table id="my" name="my">

	<tr>
		<td><A HREF=javascript:monthLess()>-</A> </td>
		<td>le mois</td>
		<td><A HREF=javascript:monthPlus()>+</A></td>

		<td> </td>
		<td><A HREF=javascript:yearLess()>-</A></td>
		<td>l'année</td>
		<td><A HREF=javascript:yearPlus()>+</A></td>

	</tr>

	</table>

	<br><br>

<!-- Tableau des jours -->
	<table  bgcolor=#888888 id="days_tab" name="days_tab" border = 1>

	<tr>
		<td> 1 </td>
		<td> 2 </td>
	</tr>

	</table>

	</center>

	<SCRIPT> init(); </SCRIPT>

  </BODY>

</HTML>

Conclusion :


Fonctionne sous Mozilla, Firefox, IE

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

cs_javert
Messages postés
26
Date d'inscription
mardi 14 octobre 2003
Statut
Membre
Dernière intervention
28 avril 2005
-
Merci mais le but, c'est de le faire fonctionner avec des servlets, donc pas besoin de PHP
coucou747
Messages postés
12336
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
26 -
"oeil de lynx" lol

alors, pour faire des planings, je te conseile le php, c'est bien plus efficace si tu veux avoir accès a ton planing au travail et chez toi...

et tu peux enregistrer sur le serveur (c'est pas beau la technologie ?)

j'ai un exemple php, si ça t'interesse (mon code n'est pas commenté non plus, tout simplement parce-qu'il ne dépasse pas la centaine de lignes...)
cs_javert
Messages postés
26
Date d'inscription
mardi 14 octobre 2003
Statut
Membre
Dernière intervention
28 avril 2005
-
j'ai jamais prétendu avoir fait un truc parfait oeil de lynx.
C'est vrai que le code est peu crad et pas trop commenté, mais c'est pas une version definitive.

De plus, le calendrier en ligne, c'est pour pouvoir faire des plannings en dessous.
coucou747
Messages postés
12336
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
26 -
tout simplement lol

33 commentaires pour un code incompréhensible...

t'as pas dit à quoi servent toutes tes 12 fonctions...

je ne sais pas comment tu arrivesz à avoir 12 fonctions d'ailleur...

Moi personellement, j'en ai fait un en php, il n'en avait qu'une, et c'était bien suffisant, dans le meilleur des cas, (si j'avais voulu réustiliser certaines fonctions dans un autre code) j'aurais pu en faire trois (nombre de jours dans un mois, date du jour, et affichage...)

Sinon, pour la présentation de ton calendrier, je trouves ça assez fastidueu à lire, tu aurais du faire 7 colones (L M M J V S et D) et metre les jours dessous...

bref, il y avait plus simple, même si je ne m'y suis pas attaché en javascript, je l'ai fait en php, et j'ai fais largement moins de lignes de codes sans utiliser trop de fonctions php...

bref, tu pourais soit commenter plus, soit simplifier car la, c'est brouillon...

Je n'ai pas dit qu'un code n'était pas composé de lignes, je programmes depuis la sixième, je sais ce qu'est un code, je fais du C et du C++ aussi, et la prog en C, c'est souvetn plus long qu'en js... C'est juste que pour un calendrier, on peut faire bien plus simple...
cs_javert
Messages postés
26
Date d'inscription
mardi 14 octobre 2003
Statut
Membre
Dernière intervention
28 avril 2005
-
En général, un code est composé de lignes, si t'es pas d'accord, passe à la couture.

Cordialement,
Un ami qui vous veut du bien.

"J'ai appris beaucoup de choses en écrivant ces lignes car celui qui connaitrait tout du javascript n'est pas encore né"

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.