Bonjour amis développeur,

Je me lance dans un projet de réservation de salle/véhicule pour mon entreprise.

Pour le moment je commence le php et mysql donc j'y vais doucement, j'ai trouvé un calendrier modulable(fullcalendar) à la façon de l'agenda google pour les événements. Ma bdd pour les événements est en accord avec le calendrier. Ce que je cherche à faire est d'intégrer un formulaire en html pour la réservation à tel jour.

Voici mon code(entier) :

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
<!DOCTYPE html>
<html>
<head>
<link href='css/fullcalendar.css' rel='stylesheet' />
<script src='js/jquery-1.9.1.min.js'></script>
<script src='js/jquery-ui-1.10.2.custom.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script>
 
	$(document).ready(function() {
 
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
 
		var calendar = $('#calendar').fullCalendar({
		header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			editable: true,
			events: "http://localhost/fullcalendar/events.php",
			selectable: true,
			selectHelper: true,
			select: function(start, end, allDay) {
			 var title = prompt('Event Title:');
			 if (title) {
			 start = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
			 end = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
			 $.ajax({
			 url: 'http://localhost/fullcalendar/add_events.php',
			 data: 'title='+ title+'&start='+ start +'&end='+ end ,
			 type: "POST",
			 success: function(json) {
			 alert('OK');
			 }
			 });
			 calendar.fullCalendar('renderEvent',
			 {
			 title: title,
			 start: start,
			 end: end,
			 allDay: allDay
			 },
			 true
			 );
			 }
			 calendar.fullCalendar('unselect');
			}
 
		});
 
	});
 
</script>
<style>
 
	body {
		margin-top: 40px;
		text-align: center;
		font-size: 14px;
		font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
		}
 
	#calendar {
		width: 900px;
		margin: 0 auto;
		}
 
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
et voici la partie evenement :

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
		var calendar = $('#calendar').fullCalendar({
		header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			editable: true,
			events: "http://localhost/fullcalendar/events.php",
			selectable: true,
			selectHelper: true,
			select: function(start, end, allDay) {
			 var title = prompt('Nom de l evenement :');
			 if (title) {
			 start = $.fullCalendar.formatDate(start, "dd-MM-yyyy HH:mm:ss");
			 end = $.fullCalendar.formatDate(end, "dd-MM-yyyy HH:mm:ss");
			 //envoie des données title, start et end à la bdd
			 $.ajax({
			 url: 'http://localhost/fullcalendar/add_events.php',
			 data: 'title='+ title+'&start='+ start +'&end='+ end ,
			 type: "POST",
			 success: function(json) {
			 alert('OK');
			 }
			 });
			 calendar.fullCalendar('renderEvent',
			 {
			 title: title,
			 start: start,
			 end: end,
			 allDay: allDay
			 },
			 true
			 );
			 }
			 calendar.fullCalendar('unselect');
			}
 
		});
j'ai créé un fomulaire :

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
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
</head>
 
<FORM method=post action="cgi-bin/script.pl">
Réservation salle de réunion :
<TABLE BORDER=0>
<TR>
	<TD>Nom</TD>
	<TD>
	<INPUT type=text name="nom">
	</TD>
</TR>
 
<TR>
	<TD>Prénom</TD>
	<TD>
	<INPUT type=text name="prenom">
	</TD>
</TR>
 
<TR>
	<TD>Choix de la salle</TD>
	<TD>
	<SELECT name="Nom de salle">
		<OPTION VALUE="vide"></OPTION>
		<OPTION VALUE="brognard">Brognard</OPTION>
		<OPTION VALUE="malsaucy">Malsaucy</OPTION>
		<OPTION VALUE="r18">R18</OPTION>
		<OPTION VALUE="r19">R19</OPTION>
	</SELECT>
	</TD>
</TR>
 
<TR>
	<TD>Commentaires</TD>
	<TD>
	<TEXTAREA rows="3" name="commentaires">
	</TEXTAREA>
	</TD>
</TR>
 
<TR>
	<TD COLSPAN=2>
	<INPUT type="submit" value="Envoyer">
	</TD>
</TR>
</TABLE>
</FORM>
j'aurais voulu savoir s'il était possible d'inclure ce fichier qui permettrait l'envoie des données à la bdd, bien sûr il n'est pas correct je sais mais j'aimerais juste l'inclure dans mon code, pour quand je clique sur un jour de mon calendrier, le formulaire s'affiche à la place de la requête ajax.

Dans l'attente d'une réponse, bonne journée à vous !