Afficher Formulaire javascript

Bonjour à tous

Je suis un grand débutant en developpement web en general et en javascript particulierement (vous êtes prévenu). j'ai trouver sur ce lien: http://www.themanualpage.org/downloads/ un exemple de calendrier super pour ce que je veux faire.

Le problème est que j'aimerai qu'au clique sur une date un mini formulaire apparaisse, me permettant d'éditer des champs et je ne sais pas du tout comment faire ca.

Voici mon code:

CALENDAR.PHP

Code:

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
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
 
<?php
function Calendar($params) {
	// 
	// VARIABLES
	// 
 
	// Global variables 
	global $_SESSION;
	global $_SERVER;
	global $_GET;
 
	// Calendar parameters with default values
	$PREFIX                = "calendar_";
	$CSS_PREFIX            = "calendar_";
	$DATE_URL              = "";
	$URL_PARAMETER         = "date";
	$USE_SESSION           = FALSE;
	$PRESERVE_URL          = TRUE;
	$JS                    = FALSE;
	$JS_URL                = "";
	$FIRST_WEEK_DAY        = 1;
	$LANGUAGE_CODE         = "fr";
	$CLICKABLE_TITLE       = TRUE;
	$OUTPUT_MODE           = "echo";
	$URL_DAY_DATE_FORMAT   = "dmY";
	$URL_MONTH_DATE_FORMAT = "mY";
	$PRE_DATE_URL_FUNCTION = "";
	$DATE_URL_FUNCTION     = "";
 
	// Will contains the complete HTML code of the calendar in the case the
	// output mode is set to "return"
	$CALENDAR_RESPONSE = "";
 
	// Overwrite parameters with custom values
	extract($params);
 
	// Translations for month and day
	include("calendar_locales.php");
	// Month names
	if (isset($MONTHS[$LANGUAGE_CODE])) {
		$month_name = $MONTHS[$LANGUAGE_CODE];
	} else {
		$month_name = $MONTHS["fr"];
	}
	// Short names of days
	if (isset($WEEK_DAYS[$LANGUAGE_CODE])) {
		$day_name = $WEEK_DAYS[$LANGUAGE_CODE];
	} else {
		$day_name = $WEEK_DAYS["fr"];
	}
	// Current month's name
	if (isset($MONTH_HEADER[$LANGUAGE_CODE])) {
		$month_header = $MONTH_HEADER[$LANGUAGE_CODE];
	} else {
		$month_header = $MONTH_HEADER["fr"];
	}
 
 
	// 
	// FUNCTIONS
	// 
 
	// This function displays HTML code: if $JS = TRUE, we do not display line
	// breaks
	if (! function_exists("calendar_display")) {
		function calendar_display($text, $JS, &$CALENDAR_RESPONSE) {
			if ($JS) {
				// We escape all ' of the text
				$CALENDAR_RESPONSE .= "document.writeln('".str_replace("'", "\\'", $text)."');\n";
			} else {
				$CALENDAR_RESPONSE .= $text."\n";
			}
		}
	}
 
	// This function sets the calendar URL parameter $URL_PARAMETER to $date in
	// the given URL $URL. Used for the previous and next arrows of the calendar
	// title and the calendar dates when set as clickable with the parameter
	// DATE_URL.
	if (! function_exists("calendar_calculate_URL")) {
		function calendar_calculate_URL($URL, $URL_PARAMETER, $date, $PRESERVE_URL, $USE_SESSION) {
			if (strpos($URL, "__DATE__") !== FALSE) {
				return str_replace("__DATE__", $date, $URL);
			} else {
				$URL_components = parse_url($URL);
				$new_URL        = $URL_components["path"]."?";
				$add_SID        = $USE_SESSION;
				// Maybe $URL is an absolute URL so we must add the beginning of the URL
				if (isset($URL_components["scheme"])) {
					$new_URL = substr($URL, 0, strpos($URL, $URL_components["path"])).$new_URL;
				}
				// We retrieve and preserve the current URL parameters if required
				if ($PRESERVE_URL && isset($URL_components["query"])) {
					parse_str($URL_components["query"], $query_string);
					// We build the query string
					foreach ($query_string as $param => $value) {
						if ($param != $URL_PARAMETER) {
							$new_URL .= $param."=".urlencode($value)."&amp;";
						}
						// If the SID is already there, we do not add it again
						if ($USE_SESSION && $param == session_name()) {
							$add_SID = FALSE;
						}
					}
				}
 
				// We add the date
				$new_URL .= $URL_PARAMETER."=".$date;
 
				// We also add the session ID (SID) if necessary
				if ($add_SID && SID != "") {
					$new_URL .= "&amp;".SID;
				}
 
				return $new_URL;
			}
		}
	}
 
	// This function calculates the date of the previous month with the mmyyyy
	// format
	if (! function_exists("calendar_previous_month")) {
		function calendar_previous_month($month, $year) {
			if ($month == 1) {
				$new_month = "12";
				$new_year  = $year - 1;
			} else {
				$new_month = (($month > 10)?"":"0").($month - 1);
				$new_year  = $year;
			}
 
			return $new_month.$new_year;
		}
	}
 
	// This function calculates the date of the next month with the mmyyyy format
	if (! function_exists("calendar_next_month")) {
		function calendar_next_month($month, $year) {
			if ($month == 12) {
				$new_month = "01";
				$new_year  = $year + 1;
			} else {
				$new_month = (($month < 9)?"0":"").($month + 1);
				$new_year  = $year;
			}
 
			return $new_month.$new_year;
		}
	}
 
	// 
	// MAIN LOOP
	// 
 
	// In the case of JavaScript integration with session, we create the session.
	// We are allowed to do that because in JavaScript integration this PHP script
	// is not included in any custom page.
	if ($JS && $USE_SESSION) {
		session_start();
	}
 
	// Today's date
	$today = date("dmY");
 
	// Month and year to display (gotten from URL)
	if (isset($_GET[$PREFIX."date"])) {
		if ($_GET[$PREFIX."date"] != "") {
			$month = (int)substr($_GET[$PREFIX."date"], 0, 2);
			$year  = substr($_GET[$PREFIX."date"], 2);
		}
	}
 
	// Default month to show (if not found in the URL)
	if (!isset($month)) {
		$month = date("n");
		// In the case of session, we must get the session date
		if ($USE_SESSION && isset($_SESSION[$PREFIX."month"])) {
			$month = $_SESSION[$PREFIX."month"];
		}
	}
	// We put the month in the session if required
	if ($USE_SESSION) {
		$_SESSION[$PREFIX."month"] = $month;
	}
 
	// Default year to show (if not found in the URL)
	if (!isset($year)) {
		$year = date("Y");
		// In the case of session, we must get the session date
		if ($USE_SESSION && isset($_SESSION[$PREFIX."year"])) {
			$year = $_SESSION[$PREFIX."year"];
		}
	}
	// We put the year in the session if required
	if ($USE_SESSION) {
		$_SESSION[$PREFIX."year"] = $year;
	}
 
	// We calculate the first day of the month to show
	$first_month_day = gmmktime(0, 0, 0, $month, 1, $year);
 
	// We calculate the week day of this first day so that we can determine how
	// many days we are far from the first week day
	$offset = (7 - ($FIRST_WEEK_DAY % 7 - gmdate("w", $first_month_day))) % 7;
 
	// First day of the calendar
	$current_day = $first_month_day - 3600 * 24 * $offset;
 
	// How many rows in the calendar?
	$row_number = ceil((gmdate("t", $first_month_day) + $offset) / 7);
 
	// We call the pre date url function if any
	if (function_exists($PRE_DATE_URL_FUNCTION)) {
		call_user_func($PRE_DATE_URL_FUNCTION, gmdate("dmY", $current_day), gmdate("dmY", $current_day + (7 * $row_number - 1) * 3600 * 24));
	}
 
	// We display the top of the calendar
	if ($JS) {
		$URL_page = $JS_URL;
	} else {
		$URL_page = $_SERVER["REQUEST_URI"];
	}
	calendar_display("<table class=\"".$CSS_PREFIX."main\" summary=\"\">", $JS, $CALENDAR_RESPONSE);
	calendar_display("	<tr class=\"".$CSS_PREFIX."title\">", $JS, $CALENDAR_RESPONSE);
	calendar_display("		<td class=\"".$CSS_PREFIX."cell_title_left_arrow_clickable\"><a href=\""
	                 .calendar_calculate_URL($URL_page, $PREFIX."date", calendar_previous_month($month, $year), $PRESERVE_URL, $USE_SESSION)
					 ."\" class=\"".$CSS_PREFIX."title_left_arrow_clickable\">&lt;&lt;</a></td>", $JS, $CALENDAR_RESPONSE);
	if ($DATE_URL != "" && $CLICKABLE_TITLE) {
		calendar_display("		<td class=\"".$CSS_PREFIX."cell_title_month_clickable\"><a href=\""
		                 .calendar_calculate_URL($DATE_URL, $URL_PARAMETER, date($URL_MONTH_DATE_FORMAT, mktime(0, 0, 0, $month, 1, $year)), TRUE, $USE_SESSION)
						 ."\" class=\"".$CSS_PREFIX."title_month_clickable\">"
						 .str_replace("%y", $year, str_replace("%m", $month_name[$month - 1], $month_header))
						 ."</a></td>", $JS, $CALENDAR_RESPONSE);
	} else {
		calendar_display("		<td class=\"".$CSS_PREFIX."cell_title_month\">"
		                 .str_replace("%y", $year, str_replace("%m", $month_name[$month - 1], $month_header))
						 ."</td>", $JS, $CALENDAR_RESPONSE);
	}
	calendar_display("		<td class=\"".$CSS_PREFIX."cell_title_right_arrow_clickable\"><a href=\""
	                 .calendar_calculate_URL($URL_page, $PREFIX."date", calendar_next_month($month, $year), $PRESERVE_URL, $USE_SESSION)
					 ."\" class=\"".$CSS_PREFIX."title_right_arrow_clickable\">&gt;&gt;</a></td>", $JS, $CALENDAR_RESPONSE);
	calendar_display("	</tr>", $JS, $CALENDAR_RESPONSE);
	calendar_display("	<tr>", $JS, $CALENDAR_RESPONSE);
	calendar_display("		<td colspan=\"3\">", $JS, $CALENDAR_RESPONSE);
	calendar_display("			<table class=\"".$CSS_PREFIX."table\" summary=\"\">", $JS, $CALENDAR_RESPONSE);
	calendar_display("				<tr>", $JS, $CALENDAR_RESPONSE);
	for ($counter = 0; $counter < 7; $counter++) {
		calendar_display("					<th>".$day_name[($FIRST_WEEK_DAY + $counter) % 7]."</th>", $JS, $CALENDAR_RESPONSE);
	}
	calendar_display("				</tr>", $JS, $CALENDAR_RESPONSE);
 
	// We are going to display a table => 2 nested loops
	for ($row = 1; $row <= $row_number; $row++) {
		// The first loop displays the rows
		calendar_display("				<tr>", $JS, $CALENDAR_RESPONSE);
 
		// The second loop displays the days (as columns)
		for ($column = 1; $column <= 7; $column++) {
			// Day currently displayed
			$day = gmdate("j", $current_day);
 
			// Calculate day URL
			if (function_exists($DATE_URL_FUNCTION)) {
				$this_date_url = call_user_func($DATE_URL_FUNCTION, gmdate("dmY", $current_day));
				if ($this_date_url == NULL || $this_date_url == FALSE) {
					$this_date_url = "";
				}
			} elseif ($DATE_URL != "") {
				$this_date_url = calendar_calculate_URL($DATE_URL, $URL_PARAMETER, gmdate($URL_DAY_DATE_FORMAT, $current_day), TRUE, $USE_SESSION);
			} else {
				$this_date_url = "";
			}
 
			// If it is saturday or sunday, we use the "weekend" style
			$cell_class = array();
			$day_class  = array();
			if (gmdate("w", $current_day) == 6 || gmdate("w", $current_day) == 0) {
				$cell_class[] = "weekend";
				$day_class[]  = "weekend";
			}
			if (gmdate("dmY", $current_day) == $today) {
				$cell_class[] = "today";
				$day_class[]  = "today";
			} else {
				// Days not in the current month with CSS class "other_month"
				if (gmdate("n", $current_day) != $month) {
					$cell_class[] = "other_month";
					$day_class[]  = "other_month";
				} else {
					$cell_class[] = "day";
					$day_class[]  = "day";
				}
			}
			if ($this_date_url != "") {
				$cell_class[] = "clickable";
				$day_class[]  = "clickable";
			}
 
			// Final content
			if (count($cell_class) > 0) {
				$table_cell = "					<td class=\"".$CSS_PREFIX."cell_".implode("_", $cell_class)."\">";
			} else {
				$table_cell = "					<td>";
			}
			if ($this_date_url != "") {
				if (count($day_class) > 0) {
					$table_cell .= "<a href=\"".$this_date_url."\" class=\"".$CSS_PREFIX.implode("_", $day_class)."\">".$day."</a>";
				} else {
					$table_cell .= "<a href=\"".$this_date_url."\">".$day."</a>";
				}
			} else {
				if (count($day_class) > 0) {
					$table_cell .= "<span class=\"".$CSS_PREFIX.implode("_", $day_class)."\">".$day."</span>";
				} else {
					$table_cell .= $day;
				}
			}
			calendar_display($table_cell."</td>", $JS, $CALENDAR_RESPONSE);
 
			// Next day
			$current_day += 3600 * 24 + 1;
		}
 
		// End of rows
		calendar_display("				</tr>", $JS, $CALENDAR_RESPONSE);
	}
 
	calendar_display("			</table>", $JS, $CALENDAR_RESPONSE);
	calendar_display("		</td>", $JS, $CALENDAR_RESPONSE);
	calendar_display("	</tr>", $JS, $CALENDAR_RESPONSE);
 
	// Display a link to the current date at the bottom of the calendar
	calendar_display("	<tr class=\"".$CSS_PREFIX."footer\">", $JS, $CALENDAR_RESPONSE);
	// We change the CSS class according to the month being displayed
	if ($month.$year == date("nY")) {
		calendar_display("		<td colspan=\"3\" class=\"".$CSS_PREFIX."cell_footer_current_month_clickable\"><a href=\""
		                 .calendar_calculate_URL($URL_page, $PREFIX."date", date("mY"), $PRESERVE_URL, $USE_SESSION)
						 ."\" class=\"".$CSS_PREFIX."footer_current_month_clickable\">".$CALLBACK[$LANGUAGE_CODE]
						 ."</a></td>", $JS, $CALENDAR_RESPONSE);
	} else {
		calendar_display("		<td colspan=\"3\" class=\"".$CSS_PREFIX."cell_footer_other_month_clickable\"><a href=\""
		                 .calendar_calculate_URL($URL_page, $PREFIX."date", date("mY"), $PRESERVE_URL, $USE_SESSION)
						 ."\" class=\"".$CSS_PREFIX."footer_other_month_clickable\">".$CALLBACK[$LANGUAGE_CODE]
						 ."</a></td>", $JS, $CALENDAR_RESPONSE);
	}
	calendar_display("	</tr>", $JS, $CALENDAR_RESPONSE);
 
	calendar_display("</table>", $JS, $CALENDAR_RESPONSE);
 
	// Return the HTML code?
	if ($OUTPUT_MODE == "return") {
		return $CALENDAR_RESPONSE;
	} else {
		echo $CALENDAR_RESPONSE;
	}
}
?>

CALENDAR_JS.PHP

Code:

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
 
<?php
// Content-Type
header("Content-Type: text/javascript");
 
// Shall we display the calendar or the JavaScript that retrieves the missing
// parameters?
if (isset($_GET["display_calendar"])) {
	// We display the calendar in the JavaScript format
	require_once($_SERVER["DOCUMENT_ROOT"].str_replace("_js.", ".", $_SERVER["PHP_SELF"]));
	// We get all the calendar parameters from the URL
	// We replace all "true"/"false" by real booleans
	foreach ($_GET as $key => $value) {
		if ($value == "true") {
			$params[$key] = true;
		} elseif ($value == "false") {
			$params[$key] = false;
		} else {
			$params[$key] = $value;
		}
	}
	$params["JS"] = true;
	calendar($params);
} else {
	$prefix = (isset($_GET["PREFIX"]))?$_GET["PREFIX"]:"calendar_";
 
	// If sessions are used, we do a session_start() in order to get the SID
	// if required
	if (isset($_GET["USE_SESSION"]) && $_GET["USE_SESSION"] = "true") {
		session_start();
		$SID = "&amp;".SID;
	} else {
		$SID = "";
	}
 
	// URL to call the calendar
	$calendar_URL = str_replace("&", "&amp;", $_SERVER["REQUEST_URI"]);
	$URL_items = parse_url($calendar_URL);
	if (isset($URL_items["query"])) {
		$calendar_URL .= "&amp;";
	} else {
		$calendar_URL .= "?";
	}
	// We add the paremeter to say that the calendar must be display as a
	// JavaScript
	$calendar_URL .= "display_calendar=true";
?>
// URL of the current page
var calendar_current_url = document.location;
// We retrieve the date to display
var calendar_month_date = "";
// We also retrieve the SID if it exists for the session
var SID = "";
var query_string = this.location.search.substring(1);
if (query_string.length > 0) {
	var params = query_string.split("&");
	for (var i = 0; i < params.length; i++) {
		var pos = params[i].indexOf("=");
		if (params[i].substring(0, pos) == "<?php echo $prefix; ?>date") {
			calendar_month_date = params[i].substring(pos + 1);
		}
		if (params[i].substring(0, pos) == "<?php echo session_name(); ?>") {
			SID = "<?php echo session_name(); ?>=" + params[i].substring(pos + 1);
		}
	}
}
 
// We display the calendar via a second JavaScript call
document.write('<script type="text/javascript" src="<?php echo $calendar_URL; ?>&amp;JS_URL=' + escape(calendar_current_url) + '&amp;<?php echo $prefix; ?>date=' + calendar_month_date + '&amp;' + SID + '"></script>');
<?php
}
?>

INDEX.PHP

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html>
	<head>
		<link rel="stylesheet" media="screen" href="calendar.css" type="text/css" />
		<title>Calendrier TMK</title>
	</head>
 
	<body>
		<script type="text/javascript" src="calendar_js.php?CSS_PREFIX=foo_&USE_SESSION=false&DATE_URL= &URL_PARAMETER=event_date&URL_DAY_DATE_FORMAT=Ymd&CSS_PREFIX=calendar_"></script>
	</body>
</html>

Le fichier index est de moi.
Merci de bien vouloir me tenir par la main sur ce coup