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) :
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
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>
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 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'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.
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>
Dans l'attente d'une réponse, bonne journée à vous !
Partager