begin process at 2012 05 28 12:49:53
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Date & Heure

 > CALENDRIER PERPETUEL

CALENDRIER PERPETUEL


 Information sur la source

Note :
6,6 / 10 - par 5 personnes
6,60 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Date & Heure Niveau :Débutant Date de création :20/05/2003 Date de mise à jour :01/07/2003 13:21:06 Vu / téléchargé :38 151 / 2 784
Auteur : francktfr

Ecrire un message privé
Site perso
Commentaire sur cette source (9)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
La création de fait en dynamique, rien de tres surprenant.
Vous pouvez modifier facilement son aspect avec les
feuilles de style.


 Conclusion

Nouvelle version du calendrier:

http://www.javascriptfr.com/article.a spx?Val=629

 Fichier Zip

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

Télécharger le zip


 Sources du même auteur

Source avec une capture CHOIX DE DATES ET DE PERIODE
HORLOGE DIGITALE , SI SI
Source avec une capture TEXT COLORISÉ AVEC LE POURCENTAGE
Source avec une capture MENU AVEC EFFET DE DÉGRADÉ
ANNONCE LETTRE PAR LETTRE
Toutes les sources de francktfr

 Sources de la même categorie

NOMBRE DE JOURS, MOIS ET ANNÉES DEPUIS LA NAISSANCE par marcenana
Source avec Zip 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
Source avec Zip Source avec une capture NIPCLOCK 1.2 par neep
Toutes les sources de la catégorie Date & Heure

Commentaires et avis

Commentaire de bob3000 le 20/05/2003 20:55:03

excellent! bravo!

Commentaire de francktfr le 20/05/2003 22:25:59

Merci bien :o)
Il y aura bientot une nouvelle version qui sera
en pop-up et servira pour entrer une date dans
les champs de formalaire ... :o)

Commentaire de bob3000 le 21/05/2003 02:32:52

ouais, ca peu etre utile parfois
bravo encore une fois!

Commentaire de revinc le 21/05/2003 09:43:56

très bon script...

Commentaire de tikehau le 05/06/2003 16:27:49

Rajouter les modifications suivantes  dans la fonction
// Initialisation
function init(){

// Rajout : Mise en mémoire de la date du jour pour l'afficher au calendrier  
Jour = new Date();
dayjour = Jour.getDate();
if (10 > dayjour)
{dayjour = '0'+dayjour;}
moisjour = Jour.getMonth();
moisjour = moisjour + 1;
if (10 > moisjour)
{moisjour = '0'+moisjour;}
yearjour = Jour.getYear();

// sStartDate = "05/06/2003"// Date de depart => substitué par la ligne suivante
sStartDate = dayjour +'/'+ moisjour +'/'+ yearjour

WriteDayNames() // ecrits les noms de jour
WriteMonhCells()// ecrits les noms de mois
WriteDateCells(sStartDate)// Crée le calendrier
}

le calendrier affichera automatiquement la date du jour. Ce qui sera nettement mieux qu'une date figée. lol

Commentaire de metis15 le 23/06/2003 08:33:27

Hi !!
J'ai pas dû poster au bon endroit : (très chouette ce calendar)
J'ai ajouté le code ci-dessus mais comme je suis aussi doué qu'un canard en matière de JS, je ne vois pas pourquoi les années ne changent pas quand je clique dessus.
Comment enlever le code qui fait apparaître la boîte d'alerte avec juste la date dedant ?
Merci d'aider l'handicapé du code.
<|[;o))
METIS metis15@wanadoo.fr

Commentaire de lordskyser1 le 21/03/2005 19:33:32

Bonjour,

Je débute en Javascript et j'aurais besoin de ton aide. Peux-tu m'expliquer quelques trucs s'il te plait? Dans cette fonction :

// Changement de mois (+1,-1)
function ChangeDate(Type, Value){

- Que représente l'argument Type? il est de quel type?
- Que représente la variable isdoing? Quelle est son utilité?

Sinon félicitation pour ce script, le code est bien organisé, il fonctionne bien et le résultat est propre et assez esthétique.

Au revoir

Commentaire de hydro33 le 05/06/2006 10:13:37

je c pas pour coi ca marche pas la date change pas pouvez vous m aider svp

<HTML>
<HEAD>
<TITLE>Calendrier</TITLE>
</HEAD>
<STYLE>
.tbCal{position: absolute; top: 00; left: 00; border: 1px solid black}
.DayName {font: 12px Arial; text-align: center; cursor: default;}
.BtChangeDate {FONT: 12px Arial; WIDTH: 8px; FONT-WEIGHT: bold; cursor: hand; text-align: center;}
.LbChangeDate {font: 12px Arial; WIDTH: 60px; cursor: hand; text-align: center;}

.DayOff {BORDER: 1px solid gray; cursor: default;}
.DayOn {BORDER: 1px solid black; cursor: hand; FONT: 12px Arial; COLOR: black; TEXT-ALIGN: center}
.DayWorking {BACKGROUND: #D9FECE}
.DayNotWorking {BACKGROUND: #EEEEEE}
.DayOver {BACKGROUND: #FFFFCC}
.DayStart {BACKGROUND: #66CCCC}

.MonthList {BORDER: 1px solid black; TEXT-ALIGN: center; FONT: 12px Arial; COLOR: black; PADDING: 0px; BACKGROUND: #FFFFFF; WIDTH: 100px; POSITION: absolute;}
.CellMonthList {BORDER: none; CURSOR: hand; TEXT-ALIGN: center; FONT: 12px Arial; COLOR: black; PADDING: 0px;}
.CellMonthListOver {BACKGROUND: #FF0000}
</STYLE>
<SCRIPT>
// date au format "JJ/MM/YYYY" obligatoirement
var sStartDate = "04/06/2006"
var aDayNames = new Array("di","Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di")
var aMonthName = new Array("Juin","Janvier","Février","Mars","avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Décembre")
var BaseWeekWork = new Array(0,1,1,1,1,1,0,0) // journée de la semaine , travaillée: (1/0)
var CurrentDay = 0
var CurrentMonth = 0
var CurrentYear = 0
</SCRIPT>

<BODY bgcolor="#FFFF99" onload="init()">

<TABLE background="http://gif.hebergement-internet-audiotel.com/Backgrounds/Divers/min/m_beige047.jpg" onmouseover="MonthList.style.display='none'" CLASS=tbCal>
<TR>
<TD COLSPAN=7>

<TABLE WIDTH=100%>
<TR>
<a href="http://www.topsite.performant-hosting.com/un/" target="_blank"><img src="http://gif.hebergement-internet-audiotel.com/galeries/Webmaster/14anidot4a.gif"></a>
<TD CLASS="BtChangeDate" onclick="ChangeCurrentMonth(-1);"><</TD>
<TD CLASS="LbChangeDate" onclick="ShowMonthList()" ID=MonthNAme NAME=MonthName></TD>
<TD CLASS="BtChangeDate" onclick="ChangeCurrentMonth(1);">></TD>
<TD></TD>
<TD CLASS="BtChangeDate" onclick="ChangeCurrentYear(-1);"><</TD>
<TD CLASS="LbChangeDate" ID=YearValue NAME=YearValue STYLE="width:25px">année</TD>
<TD CLASS="BtChangeDate" onclick="ChangeCurrentYear(1);">></TD>
</TR>
</TABLE>

</TD>
</TR>
<TR>
<TD ID=DayName1 NAME=DayName1 CLASS="DayName"></TD><TD ID=DayName2 NAME=DayName2 CLASS="DayName"></TD>
<TD ID=DayName3 NAME=DayName3 CLASS="DayName"></TD><TD ID=DayName4 NAME=DayName4 CLASS="DayName"></TD>
<TD ID=DayName5 NAME=DayName5 CLASS="DayName"></TD><TD ID=DayName6 NAME=DayName6 CLASS="DayName"></TD><TD ID=DayName7 NAME=DayName7 CLASS="DayName"></TD>
</TR>
<TR><TD ID=S1J1 NAME=S1J1></TD><TD ID=S1J2 NAME=S1J2></TD><TD ID=S1J3 NAME=S1J3></TD><TD ID=S1J4 NAME=S1J4></TD><TD ID=S1J5 NAME=S1J5></TD><TD ID=S1J6 NAME=S1J6></TD><TD ID=S1J7 NAME=S1J7></TD></TR>
<TR><TD ID=S2J1 NAME=S2J1></TD><TD ID=S2J2 NAME=S2J2></TD><TD ID=S2J3 NAME=S2J3></TD><TD ID=S2J4 NAME=S2J4></TD><TD ID=S2J5 NAME=S2J5></TD><TD ID=S2J6 NAME=S2J6></TD><TD ID=S2J7 NAME=S2J7></TD></TR>
<TR><TD ID=S3J1 NAME=S3J1></TD><TD ID=S3J2 NAME=S3J2></TD><TD ID=S3J3 NAME=S3J3></TD><TD ID=S3J4 NAME=S3J4></TD><TD ID=S3J5 NAME=S3J5></TD><TD ID=S3J6 NAME=S3J6></TD><TD ID=S3J7 NAME=S3J7></TD></TR>
<TR><TD ID=S4J1 NAME=S4J1></TD><TD ID=S4J2 NAME=S4J2></TD><TD ID=S4J3 NAME=S4J3></TD><TD ID=S4J4 NAME=S4J4></TD><TD ID=S4J5 NAME=S4J5></TD><TD ID=S4J6 NAME=S4J6></TD><TD ID=S4J7 NAME=S4J7></TD></TR>
<TR><TD ID=S5J1 NAME=S5J1></TD><TD ID=S5J2 NAME=S5J2></TD><TD ID=S5J3 NAME=S5J3></TD><TD ID=S5J4 NAME=S5J4></TD><TD ID=S5J5 NAME=S5J5></TD><TD ID=S5J6 NAME=S5J6></TD><TD ID=S5J7 NAME=S5J7></TD></TR>
<TR><TD ID=S6J1 NAME=S6J1></TD><TD ID=S6J2 NAME=S6J2></TD><TD ID=S6J3 NAME=S6J3></TD><TD ID=S6J4 NAME=S6J4></TD><TD ID=S6J5 NAME=S6J5></TD><TD ID=S6J6 NAME=S6J6></TD><TD ID=S6J7 NAME=S6J7></TD></TR>
</TABLE>

<DIV ID=MonthList CLASS="MonthList" STYLE="display: none;">
<TABLE WIDTH=100%>
<TR><TD ID=M1 NAME=M1 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M2 NAME=M2 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M3 NAME=M3 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M4 NAME=M4 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M5 NAME=M5 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M6 NAME=M6 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M7 NAME=M7 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M8 NAME=M8 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M9 NAME=M9 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M10 NAME=M10 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M11 NAME=M11 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M12 NAME=M12 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
</TABLE>
</DIV>


<SCRIPT>
var isdoing = false
function ShowMonthList(){
MonthList.top = 0
MonthList.style.display = 'block'
}
// Changement d'année (+1,-1)
function ChangeCurrentYear(value){
if (isdoing == false){
var nb = CurrentYear*1
CurrentYear = nb+value
var str = GetDateString(1,CurrentMonth, CurrentYear)
isdoing = true
WriteDateCells(str)
isdoing = false}
}
// Changement de mois (+1,-1)
function ChangeDate(Type, Value){
if (Type == "m"){CurrentMonth = Value}
if (isdoing == false){
var str = GetDateString(1,CurrentMonth, CurrentYear)
isdoing = true
WriteDateCells(str)
MonthList.style.display = 'none'
isdoing = false}
}
// Changement de mois
function ChangeCurrentMonth(value){
if (isdoing == false){
CurrentMonth = CurrentMonth + value
if(CurrentMonth == 13){CurrentMonth=1; CurrentYear++;}
if(CurrentMonth == 0){CurrentMonth=12; CurrentYear--;}
var str = GetDateString(1,CurrentMonth, CurrentYear)
isdoing = true
WriteDateCells(str)
isdoing = false}
}
function GetDateString(d,m,y){
if (d <= 9){d = "0" + d}
if (m <= 9){m = "0" + m}
return(d + "/" + m + "/" + y)
}
function WriteDayNames(){
for (i=1; i<=7; i++){
var td = document.all("DayName" + i )
td.innerText = aDayNames[i]
}
}
function WriteMonhCells(){
for (i=1; i<=12; i++){
document.all("M" + i ).innerHTML = "<SPAN CLASS=CellMonthList onclick=\"ChangeDate('m'," + i + ")\">" + aMonthName[i] + "</SPAN>"
}
}
// Travaillé/Chomé
function GetDayType(J,M,A){
var cDate = new Date(A,M,J)
var DayNb = cDate.getDay()
if (DayNb == 0) {DayNb = 7}
var Result = BaseWeekWork[DayNb]
return Result
}
function WriteDateCells(StringDate){
var cDay = StringDate.substring(0,2)
var cMonth = StringDate.substring(3,5)-1
var cYear = StringDate.substring(6,10)
CurrentDay = cDay
CurrentMonth = cMonth+1
CurrentYear = cYear
MonthNAme.innerText = aMonthName[cMonth+1]
YearValue.innerText = cYear
var BeginDate = new Date(cYear,cMonth,1)
var MaxDay = 1
// Dernier jour du mois:
for (j=27;j<33;j++){
var cDate = new Date(cYear,cMonth,j)
if (cDate.getDate() == 1){MaxDay = j-1}
}
var EndDate = new Date(cYear,cMonth,MaxDay)
var cWeek = 1
ClearCells()
// Remplissage des cellules:
for (d=1; d<=MaxDay; d++){
var cDate = new Date(cYear ,cMonth, d)
var DayNb = cDate.getDay()
if (DayNb == 0) {DayNb = 7} // J de la semaine de 1 a 7
var Cell = document.all("S" + cWeek + "J" + DayNb)
var OrigClass = ""
// Type de jour: Travaillé/Chomé/Date de départ
if(GetDayType(d,cMonth,cYear)==1)
{OrigClass='DayWorking'}
else
{OrigClass='DayNotWorking'}
if(GetDateString(d,(cMonth+1),cYear) == sStartDate) {OrigClass='DayStart'}
Cell.className = 'DayOn ' + OrigClass
Cell.innerHTML = "<SPAN WIDTH=100% onclick=\"alert('" + GetDateString(d,(cMonth+1),cYear) + "');\" onmouseover=\"S" + cWeek + "J" + DayNb + ".className = 'DayOn DayOver';\" onmouseout=\"S" + cWeek + "J" + DayNb + ".className = 'DayOn " + OrigClass + "';\">" + d + "</SPAN>"
if (DayNb == 7) {cWeek++} // Changement de semaine
}
}
// Effacement de toutes les cellules
function ClearCells(){
for (s=1;s<=6;s++){
for(j=1;j<=7;j++){
document.all("S" + s + "J" + j).innerHTML = ""
document.all("S" + s + "J" + j).className = ""
}
}
}
// Initialisation
function init(){
sStartDate = "04/06/2006"// Date de depart
WriteDayNames("Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di") // ecrits les noms de jour
WriteMonhCells("Janvier","Février","Mars","avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Décembre")// ecrits les noms de mois
WriteDateCells(sStartDate)// Crée le calendarier
}
</SCRIPT>
</BODY>
</HTML>


Commentaire de abygail le 05/09/2007 16:42:47

tres bon script tu es vraiment doué .
J'utilise ce script pour afficher des evenements corespondan a une date choisie donc au lieu de l'afficher avec un alert je recupere dans une variable ke je passe en parametre a une fonction ki va l'envoyer a un ficher php pour exécuter une requete le resultat de la requete sera ensuite affiché dans un tableau (avec ajax). Mai sa na march pa bien est ce que kelkun pourrai maider . merci d'avance le code est le suivant j'ai ajouté les 3 dernieres fonction (apres la fonction init)

fichier avec code javascript





<HTML>
<HEAD>
<TITLE>Calendrier</TITLE>
</HEAD>
<STYLE>
.tbCal{position: absolute; top: 50; left: 20; border: 1px solid black}
.DayName {font: 12px Arial; text-align: center; cursor: default;}
.BtChangeDate {FONT: 12px Arial; WIDTH: 8px; FONT-WEIGHT: bold; cursor: hand; text-align: center;}
.LbChangeDate {font: 12px Arial; WIDTH: 60px; cursor: hand; text-align: center;}

.DayOff {BORDER: 1px solid gray; cursor: default;}
.DayOn {BORDER: 1px solid black; cursor: hand; FONT: 12px Arial; COLOR: black; TEXT-ALIGN: center}
.DayWorking {BACKGROUND: #D9FECE}
.DayNotWorking {BACKGROUND: #EEEEEE}
.DayOver {BACKGROUND: #FFFFCC}
.DayStart {BACKGROUND: #66CCCC}

.MonthList {BORDER: 1px solid black; TEXT-ALIGN: center; FONT: 12px Arial; COLOR: black; PADDING: 0px; BACKGROUND: #FFFFFF; WIDTH: 100px; POSITION: absolute;}
.CellMonthList {BORDER: none; CURSOR: hand; TEXT-ALIGN: center; FONT: 12px Arial; COLOR: black; PADDING: 0px;}
.CellMonthListOver {BACKGROUND: #FF0000}
</STYLE>
<SCRIPT>
// date au format "JJ/MM/YYYY" obligatoirement
var sStartDate = ""
var aDayNames = new Array("","Lu", "Ma", "Me", "Je", "Ve", "Sa", "Di")
var aMonthName = new Array("","Janvier","Février","Mars","avril","Mai","Juin","Juillet","Aout","Septembre","Octobre","Novembre","Décembre")
var BaseWeekWork = new Array(0,1,1,1,1,1,0,0) // journée de la semaine , travaillée: (1/0)
var CurrentDay = 0
var CurrentMonth = 0
var CurrentYear = 0
</SCRIPT>
<BODY onload="init()">

<TABLE CLASS=tbCal onmouseover="MonthList.style.display='none'">
<TR>
<TD COLSPAN=7>

<TABLE WIDTH=100%>

<TR>
<TD CLASS="BtChangeDate" onclick="ChangeCurrentMonth(-1);"><</TD>
<TD CLASS="LbChangeDate" onclick="ShowMonthList()" ID=MonthNAme NAME=MonthName></TD>
<TD CLASS="BtChangeDate" onclick="ChangeCurrentMonth(1);">></TD>
<TD></TD>
<TD CLASS="BtChangeDate" onclick="ChangeCurrentYear(-1);"><</TD>
<TD CLASS="LbChangeDate" ID=YearValue NAME=YearValue STYLE="width:25px">année</TD>

<TD CLASS="BtChangeDate" onclick="ChangeCurrentYear(1);">></TD>
</TR>
</TABLE>

</TD>
</TR>
<TR>
<TD ID=DayName1 NAME=DayName1 CLASS="DayName"></TD><TD ID=DayName2 NAME=DayName2 CLASS="DayName"></TD>
<TD ID=DayName3 NAME=DayName3 CLASS="DayName"></TD><TD ID=DayName4 NAME=DayName4 CLASS="DayName"></TD>

<TD ID=DayName5 NAME=DayName5 CLASS="DayName"></TD><TD ID=DayName6 NAME=DayName6 CLASS="DayName"></TD><TD ID=DayName7 NAME=DayName7 CLASS="DayName"></TD>
</TR>
<TR><TD ID=S1J1 NAME=S1J1></TD><TD ID=S1J2 NAME=S1J2></TD><TD ID=S1J3 NAME=S1J3></TD><TD ID=S1J4 NAME=S1J4></TD><TD ID=S1J5 NAME=S1J5></TD><TD ID=S1J6 NAME=S1J6></TD><TD ID=S1J7 NAME=S1J7></TD></TR>
<TR><TD ID=S2J1 NAME=S2J1></TD><TD ID=S2J2 NAME=S2J2></TD><TD ID=S2J3 NAME=S2J3></TD><TD ID=S2J4 NAME=S2J4></TD><TD ID=S2J5 NAME=S2J5></TD><TD ID=S2J6 NAME=S2J6></TD><TD ID=S2J7 NAME=S2J7></TD></TR>
<TR><TD ID=S3J1 NAME=S3J1></TD><TD ID=S3J2 NAME=S3J2></TD><TD ID=S3J3 NAME=S3J3></TD><TD ID=S3J4 NAME=S3J4></TD><TD ID=S3J5 NAME=S3J5></TD><TD ID=S3J6 NAME=S3J6></TD><TD ID=S3J7 NAME=S3J7></TD></TR>
<TR><TD ID=S4J1 NAME=S4J1></TD><TD ID=S4J2 NAME=S4J2></TD><TD ID=S4J3 NAME=S4J3></TD><TD ID=S4J4 NAME=S4J4></TD><TD ID=S4J5 NAME=S4J5></TD><TD ID=S4J6 NAME=S4J6></TD><TD ID=S4J7 NAME=S4J7></TD></TR>
<TR><TD ID=S5J1 NAME=S5J1></TD><TD ID=S5J2 NAME=S5J2></TD><TD ID=S5J3 NAME=S5J3></TD><TD ID=S5J4 NAME=S5J4></TD><TD ID=S5J5 NAME=S5J5></TD><TD ID=S5J6 NAME=S5J6></TD><TD ID=S5J7 NAME=S5J7></TD></TR>
<TR><TD ID=S6J1 NAME=S6J1></TD><TD ID=S6J2 NAME=S6J2></TD><TD ID=S6J3 NAME=S6J3></TD><TD ID=S6J4 NAME=S6J4></TD><TD ID=S6J5 NAME=S6J5></TD><TD ID=S6J6 NAME=S6J6></TD><TD ID=S6J7 NAME=S6J7></TD></TR>
</TABLE>

<DIV ID=MonthList CLASS="MonthList" STYLE="display: none;">
<TABLE WIDTH=100%>
<TR><TD ID=M1 NAME=M1 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M2 NAME=M2 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M3 NAME=M3 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M4 NAME=M4 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M5 NAME=M5 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M6 NAME=M6 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M7 NAME=M7 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>

<TR><TD ID=M8 NAME=M8 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M9 NAME=M9 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M10 NAME=M10 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M11 NAME=M11 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
<TR><TD ID=M12 NAME=M12 CLASS=CellMonthList onmouseover="this.className='CellMonthList CellMonthListOver'" onmouseout="this.className='CellMonthList'"></TD></TR>
</TABLE>
</DIV>

<SCRIPT>
var isdoing = false
function ShowMonthList(){
MonthList.top = 0
MonthList.style.display = 'block'
}
// Changement d'année (+1,-1)
function ChangeCurrentYear(value){
if (isdoing == false){
var nb = CurrentYear*1
CurrentYear = nb+value
var str = GetDateString(1,CurrentMonth, CurrentYear)
isdoing = true
WriteDateCells(str)
isdoing = false}
}
// Changement de mois (+1,-1)
function ChangeDate(Type, Value){
if (Type == "m"){CurrentMonth = Value}
if (isdoing == false){
var str = GetDateString(1,CurrentMonth, CurrentYear)
isdoing = true
WriteDateCells(str)
MonthList.style.display = 'none'
isdoing = false}
}
// Changement de mois
function ChangeCurrentMonth(value){
if (isdoing == false){
CurrentMonth = CurrentMonth + value
if(CurrentMonth == 13){CurrentMonth=1; CurrentYear++;}
if(CurrentMonth == 0){CurrentMonth=12; CurrentYear--;}
var str = GetDateString(1,CurrentMonth, CurrentYear)
isdoing = true
WriteDateCells(str)
isdoing = false}
}
function GetDateString(d,m,y){
if (d <= 9){d = "0" + d}
if (m <= 9){m = "0" + m}
return(d + "/" + m + "/" + y)
}
function WriteDayNames(){
for (i=1; i<=7; i++){
var td = document.all("DayName" + i )
td.innerText = aDayNames[i]
}
}
function WriteMonhCells(){
for (i=1; i<=12; i++){
document.all("M" + i ).innerHTML = "<SPAN CLASS=CellMonthList onclick=\"ChangeDate('m'," + i + ")\">" + aMonthName[i] + "</SPAN>"
}
}
// Travaillé/Chomé
function GetDayType(J,M,A){
var cDate = new Date(A,M,J)
var DayNb = cDate.getDay()
if (DayNb == 0) {DayNb = 7}
var Result = BaseWeekWork[DayNb]
return Result
}
function WriteDateCells(StringDate){
var cDay = StringDate.substring(0,2)
var cMonth = StringDate.substring(3,5)-1
var cYear = StringDate.substring(6,10)
CurrentDay = cDay
CurrentMonth = cMonth+1
CurrentYear = cYear
MonthNAme.innerText = aMonthName[cMonth+1]
YearValue.innerText = cYear
var BeginDate = new Date(cYear,cMonth,1)
var MaxDay = 1
// Dernier jour du mois:
for (j=27;j<33;j++){
var cDate = new Date(cYear,cMonth,j)
if (cDate.getDate() == 1){MaxDay = j-1}
}
var EndDate = new Date(cYear,cMonth,MaxDay)
var cWeek = 1
ClearCells()
// Remplissage des cellules:
for (d=1; d<=MaxDay; d++){
var cDate = new Date(cYear ,cMonth, d)
var DayNb = cDate.getDay()
if (DayNb == 0) {DayNb = 7} // J de la semaine de 1 a 7
var Cell = document.all("S" + cWeek + "J" + DayNb)
var OrigClass = ""
// Type de jour: Travaillé/Chomé/Date de départ
if(GetDayType(d,cMonth,cYear)==1)
{OrigClass='DayWorking'}
else
{OrigClass='DayNotWorking'}
if(GetDateString(d,(cMonth+1),cYear) == sStartDate) {OrigClass='DayStart'}
Cell.className = 'DayOn ' + OrigClass
Cell.innerHTML = "<SPAN WIDTH=100% onclick=\"remplir('" + GetDateString(d,(cMonth+1),cYear) + "');\>" + d + "</SPAN>"
if (DayNb == 7) {cWeek++} // Changement de semaine
}
}
// Effacement de toutes les cellules
function ClearCells(){
for (s=1;s<=6;s++){
for(j=1;j<=7;j++){
document.all("S" + s + "J" + j).innerHTML = ""
document.all("S" + s + "J" + j).className = ""
}
}
}


// Initialisation
function init(){
sStartDate = "04/09/2007"// Date de depart
WriteDayNames() // ecrits les noms de jour
WriteMonhCells()// ecrits les noms de mois
WriteDateCells(sStartDate)// Crée le calendarier
}
// creation de l'objet  xmlhttprequest
function getXhr()
{
var xhr = null;
if(window.XMLHttpRequest) // Firefox et autres
   xhr = new XMLHttpRequest();
else if(window.ActiveXObject){ // Internet Explorer
   try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
}
else { // XMLHttpRequest non supporté par le navigateur
   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
   xhr = false;
}
   return xhr;    
}


// fonction appelée quand on clik sur une date
function remplir(x)
{
var xhr = getXhr()
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function()
{
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200)
{
//alert(x);
Reponse(xhr);
}
}
xhr.open("POST","AfficheEvent.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//xhr.send("donnee="+GetDateString(d,(cMonth+1),cYear));
// envoi de la date choisie au serveur
xhr.send(x);
}


// fonction permettant de recuperer des elements de la base de données corespondan a la data choisie et de les metrre dans un tableau
function Reponse(xhr)
{
var docXML= xhr.responseXML;
var items = docXML.getElementsByTagName("ev");

//on fait juste une boucle sur chaque element "donnee" trouvé

for (i=0;i<items.length;i++)
{
alert(items.item(i).firstChild);

emplacement = document.getElementById("tab_event");

//-- création d'une ligne ----------
ligne = document.createElement("tr");

texte = items.item(i).firstChild;
ligne.appendChild(texte);
emplacement.appendChild(ligne);
}
}

</SCRIPT>
</BODY>
<table id="tab_event" width="200" border="1">
  <tr>
    <th scope="col">events</th>
  </tr>
  
</table>

</HTML>











fichier php pour executer la requete




<?php

header('Content-Type: text/xml');
echo "<?xml version=\"1.0\"?>\n";
echo "<exemple>\n";

$host = "localhost"; // voir hébergeur
$user = "root"; // vide ou root en local
$pass = ""; // vide en local
$bdd = "AnnuaireEdf"; // nom de la BD
// connexion
@mysql_connect($host,$user,$pass)
or die("Impossible de se connecter");
@mysql_select_db("$bdd")
or die("Impossible de se connecter");

function transformer($date)
{
$tabdate=explode('/',$date);
$jour=$tabdate[0];
$mois=$tabdate[1];
$an=$tabdate[2];
return($an."-".$mois."-".$jour);
}

$valevent=$_POST['x'];
$event=transformer($valevent);


$requete="SELECT Texte FROM Evenement where Date='".$event."' ";

$resultat = mysql_query($requete) or die('Erreur SQL !<br>'.$req.'<br>'.mysql_error());
while ($infos = mysql_fetch_row($resultat))
   {
  echo"<ev> ".$infos[0]."</ev>";
}

echo "</exemple>\n";
?>

 Ajouter un commentaire

Nos sponsors


Sondage...

Comparez les prix


Mio - Moov V735 - GPS Europe - Ecran 7"
Entre 305€ et 375€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,045 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)