Php javascript calendrier reservation

Fermé
lila - 18 mai 2008 à 01:06
 chezvotrehote.fr - 12 sept. 2009 à 14:15
Bonjour,
Bonjour,
donc je veux mettre dans ma page reservation un calendrier parnettant de selectionner les dates de darivé et de depart
je suis debutante donk je galère bokou
si pouviez mindiquer les erreurs de mon script cela m'aiderai bokou
c le script reservation
<html>
<head>
<title>Réserver un gîte</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<head>
<script type="text/javascript" language="JavaScript">
var NUM_CENTYEAR = 30;
var BUL_TIMECOMPONENT = false;
var BUL_YEARSCROLL = true;
var calendars = [];
var RE_NUM = /^\-?\d+$/;

function calendar1(obj_target) {


this.gen_date = cal_gen_date1;
this.gen_time = cal_gen_time1;
this.gen_tsmp = cal_gen_tsmp1;
this.prs_date = cal_prs_date1;
this.prs_time = cal_prs_time1;
this.prs_tsmp = cal_prs_tsmp1;
this.popup = cal_popup1;


if (!obj_target)
return cal_error("Error calling the calendar: no target control specified");
if (obj_target.value == null)
return cal_error("Error calling the calendar: parameter specified is not valid target control");
this.target = obj_target;
this.time_comp = BUL_TIMECOMPONENT;
this.year_scroll = BUL_YEARSCROLL;


this.id = calendars.length;
calendars[this.id] = this;
}

function cal_popup1 (str_datetime) {
if (str_datetime) {
this.dt_current = this.prs_tsmp(str_datetime);
}
else {
this.dt_current = this.prs_tsmp(this.target.value);
this.dt_selected = this.dt_current;
}
if (!this.dt_current) return;

var obj_calwindow = window.open(
'calendrierreserv.html?datetime=' + this.dt_current.valueOf()+ '&id=' + this.id,
'Calendrier', 'width=200,height='+(this.time_comp ? 215 : 190)+
',status=no,resizable=no,top=200,left=200,dependent=yes,alwaysRaised=yes'
);
obj_calwindow.opener = window;
obj_calwindow.focus();
}


function cal_gen_tsmp1 (dt_datetime) {
return(this.gen_date(dt_datetime) + ' ' + this.gen_time(dt_datetime));
}


function cal_gen_date1 (dt_datetime) {
return (
(dt_datetime.getDate() < 10 ? '0' : '') + dt_datetime.getDate() + "-"
+ (dt_datetime.getMonth() < 9 ? '0' : '') + (dt_datetime.getMonth() + 1) + "-"
+ dt_datetime.getFullYear()
);
}

function cal_gen_time1 (dt_datetime) {
return (
(dt_datetime.getHours() < 10 ? '0' : '') + dt_datetime.getHours() + ":"
+ (dt_datetime.getMinutes() < 10 ? '0' : '') + (dt_datetime.getMinutes()) + ":"
+ (dt_datetime.getSeconds() < 10 ? '0' : '') + (dt_datetime.getSeconds())
);
}


function cal_prs_tsmp1 (str_datetime) {
if (!str_datetime)
return (new Date());

if (RE_NUM.exec(str_datetime))
return new Date(str_datetime);

var arr_datetime = str_datetime.split(' ');
return this.prs_time(arr_datetime[1], this.prs_date(arr_datetime[0]));
}

function cal_prs_date1 (str_date) {

var arr_date = str_date.split('-');

if (arr_date.length != 3) return cal_error ("Invalid date format: '" + str_date + "'.\nFormat accepted is dd-mm-yyyy.");
if (!arr_date[0]) return cal_error ("Invalid date format: '" + str_date + "'.\nNo day of month value can be found.");
if (!RE_NUM.exec(arr_date[0])) return cal_error ("Invalid day of month value: '" + arr_date[0] + "'.\nAllowed values are unsigned integers.");
if (!arr_date[1]) return cal_error ("Invalid date format: '" + str_date + "'.\nNo month value can be found.");
if (!RE_NUM.exec(arr_date[1])) return cal_error ("Invalid month value: '" + arr_date[1] + "'.\nAllowed values are unsigned integers.");
if (!arr_date[2]) return cal_error ("Invalid date format: '" + str_date + "'.\nNo year value can be found.");
if (!RE_NUM.exec(arr_date[2])) return cal_error ("Invalid year value: '" + arr_date[2] + "'.\nAllowed values are unsigned integers.");

var dt_date = new Date();
dt_date.setDate(1);

if (arr_date[1] < 1 || arr_date[1] > 12) return cal_error ("Invalid month value: '" + arr_date[1] + "'.\nAllowed range is 01-12.");
dt_date.setMonth(arr_date[1]-1);

if (arr_date[2] < 100) arr_date[2] = Number(arr_date[2]) + (arr_date[2] < NUM_CENTYEAR ? 2000 : 1900);
dt_date.setFullYear(arr_date[2]);

var dt_numdays = new Date(arr_date[2], arr_date[1], 0);
dt_date.setDate(arr_date[0]);
if (dt_date.getMonth() != (arr_date[1]-1)) return cal_error ("Invalid day of month value: '" + arr_date[0] + "'.\nAllowed range is 01-"+dt_numdays.getDate()+".");

return (dt_date)
}


function cal_error (str_message) {
alert (str_message);
return null;
}
</script>
</head>


<body class="bost">
<!-- ImageReady Slices (Sans titre-1) -->
<div align="center">
<table id="Tableau_01" width="800" height="373" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="202" colspan="2"> <img src="images/BANNIERE.gif" width="800" height="202" alt=""></td>
</tr>
<tr background="images/index_02.gif">
<td height="23" colspan="2">
<p><font color="#FFFFFF">Bienvenue sur LES GÎTE DU VERTIGE : </font></p></td>
</tr>
<tr>
<td width="193" height="148" bgcolor="#950000"><ul>
<li></li>
</ul></td>
<td width="607"><div align="center">
<center>
<div align="center">
<center>
<table border="0" cellspacing="1" width="100%">
<tr>
<td width="22%" valign="top" align="center"><img border="0" src="images/queribus-p.jpg" width="149" height="96"><br>
<font size="3">Château de Quéribus</font></td>
<td width="60%" valign="top" align="center"> <p align="center"><b><font face="Verdana"><font size="6">Les
Gîtes du Vertige</font><font size="7"><br>
</font></font><font size="6"><img border="0" src="images/nav/bienvenue-anim.gif" width="292" height="93"></font></b></td>
<td width="18%" valign="top" align="center"> <p align="center"><a href="mailto:gites.du.vertige@free.fr"><img border="0" src="../images/nav/mail-jaune-tournant.gif" width="90" height="70"></a><br>
<b><font size="3">Nous contacter</font></b></td>
</tr>
</table>
</center>
</div>
<div align="center"> </div>
<b>FORMULAiRE DE RESERVATION</b> <br/>

<form name=reserver method=GETonsubmit="return Verif(this.form)"action=transfert.php

<br/>
<table>
<tr>
<td> Nom : </td>
<td> <input type ="text" name="nomcl" /> </td>
</tr>
<tr>
<td> Prénom : </td>
<td> <input type ="text" name="prenomcl" /> </td>

</tr>
<tr>
<td> Adresse :</td>
<td> <input type ="text" name="adressecl" /> </td>
</tr>
<tr>
<td> Saisir votre mot de passe : </td>
<td> <input type ="password" name="mp" /> </td>
</tr>
<tr>
<td> Confirmer votre mot de passe : </td>
<td> <input type ="password" name="mp2" /> </td>
</tr>
<tr>
</table>
<table>
<br/>
<br/>

<b> Sélectionnez votre gîte : </b> <br/>
<br/>
<select name="gite">
<?php
$resultat=mysql_query("SELECT NoGite,NomGite FROM gite");
if (! $resultat) { echo "Erreur requete"; exit;}
while ($ligne=mysql_fetch_array($resultat))
{
?>
<option><?php echo ''.$ligne['NoGite'].'- '.$ligne['NomGite'];?> </option>
<?php
}
mysql_close($connexion);
?>
</select>
<br/>
<br/>
<b> Veuillez indiquer la durée de réservation : </b> <br/>

<br/>
Date d'arrivée (jours-mois-années)<br>
<input type="Text" name="input1" value="" size="20">
<a href="javascript:cal1.popup();"><img src="images/cal.gif" width="16" height="16" border="0" alt="Cliquez ici pour obtenir la date."></a><br>
<br/>
Date de départ (jours-mois-années)<br>
<input type="Text" name="input1" value="" size="20">
<a href="javascript:cal_popup1();"><img src="images/cal.gif" width="16" height="16" border="0" alt="Cliquez ici pour obtenir la date."></a><br>
<br/>
<input type ="submit" VALUE="Envoyer" name="Envoyer"/>
</form>
<script language="JavaScript">
var cal1 = new calendar1(document.forms['reserver'].elements['input1']);
cal1.year_scroll = true;
cal1.time_comp = false;
</script>
</table>
<form action="pagedacceuil.html" >
<input type ="submit" VALUE="Retour à l'acceuil" name='bouton'/>
<br/>
</form>
</center>
</div>
<p align="center"> </p> </td>
</tr>
</table>
<!-- End ImageReady Slices -->
</div>
</body>
</html>
et la c le script du calendrier

<html>
<head>
<title>Choisir la date</title>
<style>
td {font-family: Tahoma, Verdana, sans-serif; font-size: 12px;}
</style>
<script language="JavaScript">


var ARR_MONTHS = ["Janvier", "Février", "Mars", "Avril", "Mai", "Juin",
"Juillet", "Août", "Septembre", "Octobre", "Novembre", "Décembre"];

var ARR_WEEKDAYS = ["Di", "Lu", "Ma", "Me", "Je", "Ve", "Sa"];

var NUM_WEEKSTART = 1;
var STR_ICONPATH = '../images/calendrier/img/';

var re_url = new RegExp('datetime=(\\-?\\d+)');
var dt_current = (re_url.exec(String(window.location))
? new Date(new Number(RegExp.$1)) : new Date());
var re_id = new RegExp('id=(\\d+)');
var num_id = (re_id.exec(String(window.location))
? new Number(RegExp.$1) : 0);
var obj_caller = (window.opener ? window.opener.calendars[num_id] : null);

if (obj_caller && obj_caller.year_scroll) {

var dt_prev_year = new Date(dt_current);
dt_prev_year.setFullYear(dt_prev_year.getFullYear() - 1);
if (dt_prev_year.getDate() != dt_current.getDate())
dt_prev_year.setDate(0);


var dt_next_year = new Date(dt_current);
dt_next_year.setFullYear(dt_next_year.getFullYear() + 1);
if (dt_next_year.getDate() != dt_current.getDate())
dt_next_year.setDate(0);
}


var dt_prev_month = new Date(dt_current);
dt_prev_month.setMonth(dt_prev_month.getMonth() - 1);
if (dt_prev_month.getDate() != dt_current.getDate())
dt_prev_month.setDate(0);


var dt_next_month = new Date(dt_current);
dt_next_month.setMonth(dt_next_month.getMonth() + 1);
if (dt_next_month.getDate() != dt_current.getDate())
dt_next_month.setDate(0);


var dt_firstday = new Date(dt_current);
dt_firstday.setDate(1);
dt_firstday.setDate(1 - (7 + dt_firstday.getDay() - NUM_WEEKSTART) % 7);


function set_datetime(n_datetime, b_close) {
if (!obj_caller) return;

var dt_datetime = obj_caller.prs_time(
(document.cal ? document.cal.time.value : ''),
new Date(n_datetime)
);

if (!dt_datetime) return;
if (b_close) {

obj_caller.target.value = (document.cal
? obj_caller.gen_tsmp(dt_datetime)
: obj_caller.gen_date(dt_datetime)
);window.close();
}
else obj_caller.popup(dt_datetime.valueOf());
}

</script>
</head>
<body bgcolor="#FFFFFF" marginheight="5" marginwidth="5" topmargin="5" leftmargin="5" rightmargin="5">
<table class="clsOTable" cellspacing="0" border="0" width="100%">
<tr><td bgcolor="#4682B4">
<table cellspacing="1" cellpadding="3" border="0" width="100%">
<tr><td colspan="7"><table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<script language="JavaScript">
document.write(
'<td>'+(obj_caller&&obj_caller.year_scroll?'<a href="javascript:set_datetime('+dt_prev_year.valueOf()+')"><img src="'+STR_ICONPATH+'prev_year.gif" width="16" height="16" border="0" alt="Année précédente"></a> ':'')+'<a href="javascript:set_datetime('+dt_prev_month.valueOf()+')"><img src="'+STR_ICONPATH+'prev.gif" width="16" height="16" border="0" alt="Mois précédent"></a></td>'+
'<td align="center" width="100%"><font color="#ffffff">'+ARR_MONTHS[dt_current.getMonth()]+' '+dt_current.getFullYear() + '</font></td>'+
'<td><a href="javascript:set_datetime('+dt_next_month.valueOf()+')"><img src="'+STR_ICONPATH+'next.gif" width="16" height="16" border="0" alt="Mois prochain"></a>'+(obj_caller && obj_caller.year_scroll?' <a href="javascript:set_datetime('+dt_next_year.valueOf()+')"><img src="'+STR_ICONPATH+'next_year.gif" width="16" height="16" border="0" alt="Année prochaine"></a>':'')+'</td>'
);
</script>
</tr>
</table></td></tr>
<tr>
<script language="JavaScript">


for (var n=0; n<7; n++)
document.write('<td bgcolor="#87cefa" align="center"><font color="#ffffff">'+ARR_WEEKDAYS[(NUM_WEEKSTART+n)%7]+'</font></td>');
document.write('</tr>');


var dt_current_day = new Date(dt_firstday);
while (dt_current_day.getMonth() == dt_current.getMonth() ||
dt_current_day.getMonth() == dt_firstday.getMonth()) {
document.write('<tr>');
for (var n_current_wday=0; n_current_wday<7; n_current_wday++) {
if (dt_current_day.getDate() == dt_current.getDate() &&
dt_current_day.getMonth() == dt_current.getMonth())
document.write('<td bgcolor="#ffb6c1" align="center" width="14%">');
else if (dt_current_day.getDay() == 0 || dt_current_day.getDay() == 6)
document.write('<td bgcolor="#dbeaf5" align="center" width="14%">');
else
document.write('<td bgcolor="#ffffff" align="center" width="14%">');

document.write('<a href="javascript:set_datetime('+dt_current_day.valueOf() +', true);">');

if (dt_current_day.getMonth() == this.dt_current.getMonth())
document.write('<font color="#000000">');
else

document.write('<font color="#606060">');

document.write(dt_current_day.getDate()+'</font></a></td>');
dt_current_day.setDate(dt_current_day.getDate()+1);
}
document.write('</tr>');
}
if (obj_caller && obj_caller.time_comp)
document.write('<form onsubmit="javascript:set_datetime('+dt_current.valueOf()+', true)" name="cal"><tr><td colspan="7" bgcolor="#87CEFA"><font color="White" face="tahoma, verdana" size="2">Heure : <input type="text" name="time" value="'+obj_caller.gen_time(this.dt_current)+'" size="8" maxlength="8"></font></td></tr></form>');
</script>
</table></tr></td>
</table>
</body>
</html>

4 réponses

Hello,

Si vous voulez vous pouvez essayer le calendrier de réservations en php que j'ai développé. On peut l'inclure gratuitement sur son site perso.

Pour cela, rendez-vous sur https://www.shared-house.com/ , créez un compte, une location et utilisez l'option "Webmaster". Vous pourrez alors copier/coller le code HTML proposé sur votre site perso et aurez ainsi un calendrier des réservations / disponibilités.

Toutes les explications sont sur cette page:
https://www.shared-house.com/index_booking_calendar.php

Sinon, bon courage!

Xav
11