manipulation du code en javascript d'un calendrier

**leclone** · 24/01/2007, 09h46

bonjour a tous,

j'ai pris le code source d'un calendrier sur internet et j'ai un peu du mal a le manipuler

voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<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: #D9FECE}
 
.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=\"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 = "01/01/2007"//	Date de depart
	WriteDayNames()	//	ecrits les noms de jour
	WriteMonhCells()//	ecrits les noms de mois
	WriteDateCells(sStartDate)//	Crée le calendarier
}
</SCRIPT>
</BODY>
</HTML>

je voudrais que quand je clique sur une date du calendrier, il m'affiche une page en php et non un message

j'ai un peu du mal avec ce code

pouvais vous m'aider

merci d'avance

salutations.

**SpaceFrog** · 24/01/2007, 10h06

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

le alert est declecnhé sur le onclick...
tu veux qu'il ouvre une autre fenetre ou ouvrir dasn la même ?

**leclone** · 24/01/2007, 10h10

ben en faite sur une autre page, ce serait pas mal.

**SpaceFrog** · 24/01/2007, 10h18

et tu veux passer quelquechose en paramètre ?

**leclone** · 24/01/2007, 10h19

cad??????

**SpaceFrog** · 24/01/2007, 10h20

elle fait quoi ta page php ??? tu veux juste ouvrir une page sur le click ? tu n'as pas besoin de recupérer la date selectionnée sur le la page php ?

**leclone** · 24/01/2007, 10h20

si en faite je voudrais recuperer la date sur laquelle le clique a été réalisé. Le probleme c'est que je ne sais pas comment faire

merci

**SpaceFrog** · 24/01/2007, 10h26

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Cell.innerHTML = "<SPAN WIDTH=100% onclick=\"openPage('" + GetDateString(d,(cMonth+1),cYear) + "');\" onmouseover=\"S" + cWeek + "J" + DayNb + ".className = 'DayOn DayOver';\" onmouseout=\"S" + cWeek + "J" + DayNb + ".className = 'DayOn " + OrigClass + "';\">" + d + "</SPAN>"

avec une fonction:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
function openPage(MaDate){
var myurl="mapage.php?selDate="+MaDate
window.open(myurl)}

**leclone** · 24/01/2007, 10h34

il me dit qu'il y a une erreur sur la page

qd tu ecris +MaDate tu mettrais koi toi par rapport au code de la page que j'ai mis dans le premier post

Moi je pense qu'il faudrait mettre +d mais ça ne marche pas

**SpaceFrog** · 24/01/2007, 10h35

remets le code complet ...
a mon avis tu n'as pas du mettre la focntion au bon enedroit ?

**SpaceFrog** · 24/01/2007, 10h35

arf et pas de majuscule à window ... :red:

voilà c'est rectifié dans le code précédent

**leclone** · 24/01/2007, 10h37

voici le code de ma page, j'ai la fonction avec la fonction qui contient le Openpage

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<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: #D9FECE}
 
.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()
 
	function openPage(d){
	var myurl="essai.php"? + d"
	Window.open(myurl)}
	//	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=\"openPage('" + 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 = "01/01/2007"//	Date de depart
	WriteDayNames()	//	ecrits les noms de jour
	WriteMonhCells()//	ecrits les noms de mois
	WriteDateCells(sStartDate)//	Crée le calendarier
}
</SCRIPT>
</BODY>
</HTML>

merci

**leclone** · 24/01/2007, 10h39

apparament il y a deja un pb avec les guillements

**SpaceFrog** · 24/01/2007, 10h50

OULA !!!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<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: #D9FECE}
 
.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=\"openPage('" + 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 = "01/01/2007"//	Date de depart
	WriteDayNames()	//	ecrits les noms de jour
	WriteMonhCells()//	ecrits les noms de mois
	WriteDateCells(sStartDate)//	Crée le calendarier
}
 
function openPage(MaDate){
var myurl="mapage.php?selDate="+MaDate
window.open(myurl)}
</SCRIPT>
</BODY>
</HTML>

**leclone** · 24/01/2007, 10h54

ok ca marche

merci pr tt SpaceFrog

ciao

**leclone** · 24/01/2007, 11h08

et si je veux recuperer la date dans la page suivante (donc essai.php par exemple) et l'afficher
je peux faire ça comment?????

c'est ma dernière question, desoler je débute

merci

ciao

**SpaceFrog** · 24/01/2007, 11h10

ben ta page suivante est une page php docn coté php recupère la variable selDate ...
à moins que tu ne veuille la récupérer coté javascript mais ce serait plus simpel coté php

**leclone** · 24/01/2007, 11h13

oui je veux la recuperer dans la page en php

j'ai essayé de la recuperer comme d'habitude mais il m'affiche le mot SelDate et pas la date sur laquelle j'ai cliquer

merci

ciao

**SpaceFrog** · 24/01/2007, 11h43

heu et tu récupères comment ?

**leclone** · 24/01/2007, 11h52

ben en faite je stocke la variable selDate dans une autre variable
dc je fais $date= " seldate " ;
echo "$date" ;

Je vais surement dire une chose bétise mais la variable selDate c'est du javascript et dans l'autre page je dois la recup en php donc je ne sais pas vraiment quoi faire

j'ai essayé avec un point genre .selDate
j'ai essayé avec un plus genre + selDate
j'ai essayé avec un dollar genre $selDate

ciao

manipulation du code en javascript d'un calendrier

JavaScript

Discussions similaires

Partager

Partager