CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 02 11 04:37:04

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

Date & Heure

> CALENDRIER PAR MOIS/ANNÉE AVEC AFFICHAGE DES NUMÉROS DE SEMAINE

CALENDRIER PAR MOIS/ANNÉE AVEC AFFICHAGE DES NUMÉROS DE SEMAINE

Information sur la source

Note :

10,00 / 10

Catégorie :Date & Heure Classé sous :calendier, numéro, semaine, calendar, mois Niveau :Débutant Date de création :20/06/2005 Vu / téléchargé :248 953 / 2 847

Auteur : Marmotte86

Ecrire un message privé

Commentaire sur cette source (8)

Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale

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>&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>

<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.

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Calendrier JavaScript.htm 6 104 octets

Télécharger le zip

Sources du même auteur

MENU VERTICAL - SOUS-NIVEAUX INFINIS - FACILEMENT MODIFIABLE

MENU VERTICAL/HORIZONTAL FACILEMENT PARAMÉTRABLE ET MODIFIAB...

Toutes les sources de Marmotte86

Sources de la même categorie

CALENDRIER ANNUEL UNIVERSEL AVEC SAINTS DU CALENDRIER ET FÊT... par 007Julien

OBTENIR LE NOMBRE DE JOURS D'UN MOIS SUIVANT SON ANNÉE par hugolegrand

SAINT DU JOUR par tefa24600

NIPCLOCK 1.2 par neep

COMPTE À REBOURS POUR ÉVÉNEMENTS À RÉPÉTITION par CSIBern

Toutes les sources de la catégorie Date & Heure

Sources en rapport avec celle ci

OBTENIR LE NOMBRE DE JOURS D'UN MOIS SUIVANT SON ANNÉE par hugolegrand

MICRO-CALENDAR par amrounix

NUMERO DE LA SEMAINE par Dri

NOMBRE D'UN MEME JOUR DE LA SEMAINE DANS LE MOIS par PetoleTeam

CALCUL DU NUMÉRO DE LA SEMAINE par jerms

Commentaires et avis

Commentaire de Romain128 le 20/06/2005 16:59:39

Ca ma l'air correct pour un calendrier,le code est clair et ne fait pas d'erreurs, bien organisé, mais faudrait ameliorer l'interface, ca fait un peu brouillon...
PS:Marche sous Moz/FF ;)

Commentaire de Marmotte86 le 20/06/2005 17:41:52

Merci de l'avoir testé sur Mozilla pour moi... :)

La seule erreur connue est le numéro de semaine pour les 1e fevrier et 1e septembre (ca pourrait se régler facilement par des if... mais ca ne fait pas tres propre

Je ne vois pas ce que tu veux dire par "interface un peu brouillon" ???

Commentaire de darkman2 le 21/06/2005 15:44:44

c'est vraiment impeccable ton script
rien a dire
il est compatible avec Mozilla/Firefox
bonne continuation

Commentaire de Romain128 le 21/06/2005 23:22:58

Excuse moi si j'y suis allé un peu fort avec l'expression, mais j'etais fatigué quand je l'ai testé...
Merite un 10/10 ;)

Commentaire de Marmotte86 le 08/07/2005 16:57:37

Merci beaucoup...

Y a-t-il le bug des numéros de semaine sous Mozilla/FF ?

Commentaire de Marmotte86 le 23/07/2005 10:23:08

J'ai testé sous FF (et oui, je me suis décidé a l'installer pour pouvoir tester mes sources...), et le bug des numéros de semaine est la aussi !

le problème ne vient donc pas de IE (ouf...). Il vient soit de javascript, soit de mon code. Quelqu'un peut me dire d'ou ca vient, parce que je ne vois pas d'ou ca pourrait venir dans mon code ?

Commentaire de jerms le 10/08/2005 14:46:41

le calcul de la semaine n'est pas correct, il faut tenir compte du premier jour de la l'année, lpus de l'année bissextile, .....

je fait le code qui va bien ety je te dis dès que c'est bon.

en attendant tu peux visier ce lien il explique bien le problème http://www.nmiroz.net/dev/semaines/readme.php

Commentaire de jerms le 10/08/2005 16:43:16

voilà ma source est là : http://www.javascriptfr.com/code.aspx?ID=33178

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Comment adapter la photo du mois en photo de la semaine [ par arnaud d ] Hello,Tout d'adord merci pour tout ... !!!P'tite question :J'ai mis en place le script permettant d'avoir une photo différente chaque mois, ici :http: trouver une date à partir du numéro de semaine [ par khmerpower ] je cherche à faire un script où à partir du numéro de semaine je peux sortir la date de début de semaine et la date de fin de semaine.Je sais que c'es CodeS-SourceS de la semaine [ par MaitreJack ] Je souhaite transmettre une demande de correctionà Nix, le Webmestre de CodeS-SourceS.Bonjour,Le CodeS-SourceS de la semaine que je reçois contientdes UPDATE BASE AVEC CHAMPS PAR RAPPORT A JAVASCRIPT [ par rafou77 ] Bonjour, voilà j'ai une page qui s'appel taux2.php ou là il ya des champs avec des taux dans une base que je peux mettre à jour sans prob... juste en validité d'un numéro siren [ par bob2bob ] Slt.Je cherche à contrôler la validité d'un numéro siren dans un formulaire. J'ai trouvé ce script (ci-dessous), mais il semble rejetter TOUS les numé Besoin urgent d'une fonction Javascript [ par David ] Bonjour,Voici le context:J'utilise des JSP dans lesquelles j'insert des tags avec des listes déroulantes en import Java.J'ai un champ text dans lequel PB avec document.write [ par lepapounet ] j'ai cree un script qui marche bien lorsqu'il est integré dans la page html. il se termine par undocument.write(Texto);ou Texto est une variable qui c "menu déroulant" [ par AngeloVivaldi ] Bonjour à tous. Je suis un peu débutant en JavaScript, je vous expose le problème : Je voudrai, sur mon site, que lorsque l'utilisateur clique sur u n° de tel perdu [ par touffaha ] bonjour , lors de ma navigation le lundi précedent dans votre site une fenêtre a été affiché m'informe que je suis la 10000 eme visiteuse de votre exé Afficher des images en fonction de la date [ par bisquine ] Je souhaite réaliser une page web qui aurait un bandeau (constitué d'images) qui change en fonction des mois de l'année. Je ne veux pas utiliser la fo

Nos sponsors

Derniers Blogs

[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet

TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice

MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko

[FRAMEWORK 4] LES TASKS ET LE THREAD UI par fathi

WORKFLOW FOUNDATION 3 A UN PIED DANS LA TOMBE par JeremyJeanson

Forum

RE : TRANSFARMATION DES VARIABLES par marlopremier

RE : ADAPTER UN SCRIPT POUR IE6 par Ewan83

ADAPTER UN SCRIPT POUR IE6 par Ewan83

RE : CREATION DE SCORING OU RATING par Alex16000

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Passerelle Pericles sur site Joomla 17
Budget : 499€
Infogerance Serveur Debian Linux
Budget : 2 400€
Developpeur applications iphone - ipad - android
Budget : 800€

Logiciels

Academy System (17.2.1.0)
ACADEMY SYSTEM (17.2.1.0)

Logiciel de gestion des établissements. - élèves/étudiants (inscription, dossier, absence...) -...

Cliquez pour télécharger Academy System
Easy-Planning (1.0.0.1)
EASY-PLANNING (1.0.0.1)

Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ...

Cliquez pour télécharger Easy-Planning
COLLECTOR PLUS (3.00B)
COLLECTOR PLUS (3.00B)

COLLECTOR PLUS version 3.00B est un logiciel utilisant une base de données alimentée par : - L...

Cliquez pour télécharger COLLECTOR PLUS
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)
PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V7.4)

PONAMEDIA TV DEVIENS HELLLOOO FLASH LA TV SUR VOTRE ORDINATEUR. Toute une plateforme Multi...

Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO
LettresFaciles 2011 (8.0.0.1)
LETTRESFACILES 2011 (8.0.0.1)

LettresFaciles est un logiciel facilitant la création et la rédaction de lettres types. Son inte...

Cliquez pour télécharger LettresFaciles 2011