Partage
  • Partager sur Facebook
  • Partager sur Twitter

Calendrier de reservation

rwayne
    18 mars 2024 à 13:28:22

    Bonjour,

    je suis entrain de créer un calendrier de réservation pour la location d'un gite.

    J'ai récupéré la base d'un code open source et je suis entrain de le modifier à ma sauce.

    N'étant pas très bon en javascript, j'aimerais avoir de l'aide s'il vous plait.

    Le code fonctionne tres bien mais j'aimerais optimiser un peu le visuel.

    Je m'explique.

    Actuellement, le visuel est comme ceci :

    La personne rentre un cerneau de date et ça passe la couleur en jaune pour validation admin. Une fois validé les case devienne rouge.

    Une autre personne voulant s'inscrire peut le faire, sur l'exemple , a partir du 24 ou jusqu'au 18. SI la date ce trouve entre le 19 et le 23, il y a un message avertissant que ce n'est pas possible car il y a deja une option ou réserve.

    A ce niveau là, j'aimerais que le 1er jour et le dernier jour soir coloré que à moitié pour ne pas que la personne pense que le 24 au soir c'est occupé.

    genre comme ça :

    Je vous donne les codes qui vont bien :

    donc l'index.php

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Calendrier</title>
<link rel="stylesheet" type="text/css" href="stylecss.php">
<script>
	function casesuivante(encours, suivant, limite)
	{
	if (encours.value.length == limite)
	document.souhait[suivant].focus();
	}
</script>
</head>

<body>

<?php
date_default_timezone_set("Europe/Paris");
require_once 'function.php';

//if(isset($_GET['message'])) {
//$message2 = $_GET['message'];}
?>

<table>
	<tr><td id="lignemois" colspan="7"><a href="index.php?mois=<?php echo $num_mois-1; ?>&amp;annee=<?php echo $num_an; ?>"><<</a>&nbsp;&nbsp;<?php echo $tab_mois[$num_mois];  ?>&nbsp;&nbsp;<a href="index.php?mois=<?php echo $num_mois+1; ?>&amp;annee=<?php echo $num_an; ?>">>></a>
	<br /><a href="index.php?mois=<?php echo $num_mois; ?>&amp;annee=<?php echo $num_an-1; ?>"><<</a>&nbsp;&nbsp;<?php echo $num_an;  ?>&nbsp;&nbsp;<a href="index.php?mois=<?php echo $num_mois; ?>&amp;annee=<?php echo $num_an+1; ?>">>></a></td></tr>
<?php
	affichage($tab_jours, $tab_cal, $num_mois, $num_an);
?>
</table>
<h2>Indiquez vos dates prévisionnelles</h2>
<?php
global $message;
if (isset($_POST['submitsouhaits']))
{
	$result = checkData();

	if ($result['check']  && $result['check1']) 
	{
		saveData($result);
//echo $result['noms']."__".$result['email']."__".$result['event_date']."__".$result['event_date1'];
	}
	else
	{
//		echo '<p>Des erreurs se sont produites, veuillez les corriger.</p>';
	echo "<script type='text/javascript'> alert('".$message."');</script>";
	$message = "";
//		echo "<script type='text/javascript'>document.location.replace('index.php?mois=".$num_mois."&amp;annee=".$num_an."&amp;message=".$message."');</script>";
	} 
}


function saveData($result)
{	global $numid, $xml, $num_an, $num_mois, $monmail;
copy ('cal/calendrier.xml', 'cal/calendrier.xml.bak');
	$id = $numid+1;
	$eventdate = $result['event_date'];
	$eventdate1 = $result['event_date1'];
	$noms = $result['noms'];
	$mail = $result['email'];
	$tel = $result['teleph'];
	$comment = $result['comment'];
	$evenement = $xml->addChild('evenement');
	$evenement->addchild('id', $id);
	$evenement->addchild('noms', $noms);
	$evenement->addchild('email', $mail);
	$evenement->addchild('teleph', $tel);
	$evenement->addchild('eventdatedeb', $eventdate);
	$evenement->addchild('eventdatefin', $eventdate1);
	$evenement->addchild('coul', 2);
	$evenement->addchild('comment', $comment);
	$xml->asXML('cal/calendrier.xml');

	$dom = new DOMDocument('1.0'); 
    $dom->preserveWhiteSpace = false;
    $dom->formatOutput = true;
    $dom->loadXML($xml->asXML());
    $formatedXML = $dom->saveXML();
 
    $h = fopen('cal/calendrier.xml','w+');
    fwrite($h, $formatedXML);
    fclose($h);
	
	$to = $monmail;        // Adresse Mail à modifier dans le fichier cal/calendrier.xml
	$object = "souhait de reservation";
	$mes = $noms." ".$mail." Num tel ".$tel."\r\n a selectionne une periode du ".$eventdate." au ".$eventdate1;
	$mes = wordwrap($mes, 70, "\r\n");
	$headers = "From: ".$mail."\r\n" . 'X-Mailer: PHP/' . phpversion();
	mail($to, $object, $mes, $headers);
	
	$message = "Une notification est envoyée au propriétaire du site";
	echo "<script type='text/javascript'> alert('".$message."');</script>";
	$message = "";
	echo "<script type='text/javascript'>document.location.replace('index.php?mois=".$num_mois."&amp;annee=".$num_an."');</script>";
}

function checkData()
{
	global $message;
	$result = array();
	
	$day = isset($_POST['day']) && $_POST['day'] != '' ? $_POST['day'] : false;
	$month = isset($_POST['month']) && $_POST['month'] != ''  ? $_POST['month'] : false;
	$year = isset($_POST['year']) && $_POST['year'] != ''  ? $_POST['year'] : false;

	$day1 = isset($_POST['day1']) && $_POST['day1'] != '' ? $_POST['day1'] : false;
	$month1 = isset($_POST['month1']) && $_POST['month1'] != ''  ? $_POST['month1'] : false;
	$year1 = isset($_POST['year1']) && $_POST['year1'] != ''  ? $_POST['year1'] : false;
	
	$noms = $_POST['noms'];
	$mail = $_POST['email'];
	$tel = $_POST['teleph'];
	$comment = $_POST['comment'];
	
	$result['check'] = false;
	$result['event_date'] = $day.'-'.$month.'-'.$year;
	
	$result['check1'] = false;
	$result['event_date1'] = $day1.'-'.$month1.'-'.$year1;
	
	$result['noms'] = $noms;
	$result['email'] = $mail;
	$result['teleph'] = $tel;
	$result['comment'] = $comment;
	
		if ($year > $year1) { $result['check'] = boolval(0); 
			$message = "Vous avez fait une erreur dans les dates";}
		elseif ($year >= $year1 && $month > $month1) { $result['check'] = boolval(0);
			$message = "Vous avez fait une erreur dans les dates";}
		elseif ($year >= $year1 && $month >= $month1 && $day > $day1) { $result['check'] = boolval(0);
			$message = "Vous avez fait une erreur dans les dates";}

	else {
	if (checkdate($month, $day, $year)) { $result['check'] = true; }
		else { $$result['check'] = false;
			$message = "Vous avez fait une erreur dans les dates de début";}
		
	if (checkdate($month1, $day1, $year1)) { $result['check1'] = true; }
		else { $$result['check1'] = false;
			$message = "Vous avez fait une erreur dans les dates de fin";}
	}
	if ($message == ""){
		$message = periode_valid($month, $day, $year, $month1, $day1, $year1);
		if ($message != ""){
			$result['check'] = false;
		}
	}
	return $result;
}

?>
<?php
//global $message2;
//	if ($message2 != ""){
//		echo '<p>'.$message2.'</p>';
//		$message2 = "";
//	}
?>
<form name="souhait" id="form-souhait" method="post" action="">
	<p>
		<label for="day" >Date début &nbsp;&nbsp;:</label>
		<input type="text" id="day" name="day" size="1" minlength="2" onkeyup="casesuivante(this, 'month', 2)" autofocus/>
		/ <input type="text" id="month" name="month" size="1" minlength="2" onkeyup="casesuivante(this, 'year', 2)" />
		/ <input type="text" id="year" name="year" size="2" minlength="4" onkeyup="casesuivante(this, 'day1', 4)" />
		<br /><label for="day1">Date fin &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:</label>
		<input type="text" id="day1" name="day1" size="1" minlength="2" onkeyup="casesuivante(this, 'month1', 2)" />
		/ <input type="text" id="month1" name="month1" size="1" minlength="2" onkeyup="casesuivante(this, 'year1', 2)" />
		/ <input type="text" id="year1" name="year1" size="2" minlength="4" onkeyup="casesuivante(this, 'noms', 4)" />
		<br /><label for="noms">Votre nom* &nbsp;:</label>
		<input type="text" id="noms" name="noms" size="21" required="required" />
		<br /><label for="email">Adr e-mail* &nbsp;:</label>
		<input type="email" id="email" name="email" size="21" required="required" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
		<br /><label for="teleph">Téléphone* &nbsp;&nbsp;:</label>
		<input type="text" id="teleph" name="teleph" size="21" required="required" />
		<br /><label for="comment">Commentaire :</label>
		<br /><textarea id="comment" name="comment" rows="2" cols="30"></textarea>
	</p>
	<p><input type="submit" name="submitsouhaits" value="Vos souhaits"/></p>
</form>
<?php
	echo "<a style='float:right;size:.6em;' href='admin.php?mois=".$num_mois."&amp;annee=".$num_an."'>admin</a>";
?>
</body>
</html>

     donc sur cette page, c'est la Fonction affichage qui donne le visu :" affichage($tab_jours, $tab_cal, $num_mois, $num_an);"

    la fonction est récupérer dans ce document fonction.php :

    <!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Fonctions du Calendrier</title>
</head>

<body>
<?php
date_default_timezone_set("Europe/Paris");
global $mes, $coul;
$flag = 0;

if(!isset($_GET['mois'])) {
$num_mois = date("n");
 }
 else
 {
 $num_mois = $_GET['mois']; }
 
if(!isset($_GET['annee'])) {
$num_an = date("Y"); 
}
else 
{
$num_an = $_GET['annee'];
}

if($num_mois < 1) { $num_mois = 12; $num_an = $num_an - 1; }
elseif($num_mois > 12) {	$num_mois = 1; $num_an = $num_an + 1; }

$int_nbj = date("t", mktime(0,0,0,$num_mois,1,$num_an));
$int_premj = date("w",mktime(0,0,0,$num_mois,1,$num_an));

$tab_jours = array("","Lu","Ma","Me","Je","Ve","Sa","Di");
$tab_mois = array("","&nbsp;&nbsp;Janvier&nbsp;&nbsp;","&nbsp;&nbsp;Février&nbsp;&nbsp;","&nbsp;&nbsp;&nbsp;&nbsp;Mars&nbsp;&nbsp;&nbsp;&nbsp;","&nbsp;&nbsp;&nbsp;Avril&nbsp;&nbsp;&nbsp;&nbsp;","&nbsp;&nbsp;&nbsp;&nbsp;Mai&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;","&nbsp;&nbsp;&nbsp;&nbsp;Juin&nbsp;&nbsp;&nbsp;&nbsp;","&nbsp;&nbsp;Juillet&nbsp;&nbsp;&nbsp;","&nbsp;&nbsp;&nbsp;&nbsp;Aout&nbsp;&nbsp;&nbsp;&nbsp;","Septembre;","&nbsp;Octobre&nbsp;&nbsp;","Novembre&nbsp;","Décembre&nbsp;");

$int_nbjAV = date("t", mktime(0,0,0,($num_mois-1<1)?12:$num_mois-1,1,$num_an)); // nb de jours du mois précédent
$int_nbjAP = date("t", mktime(0,0,0,($num_mois+1>12)?1:$num_mois+1,1,$num_an)); // nb de jours du mois suivant

$tab_cal = array(array(),array(),array(),array(),array(),array());
$int_premj = ($int_premj == 0)?7:$int_premj;
$t = 1; $p = "";
for ($i=0;$i<6;$i++) {
	for ($j=0;$j<7;$j++) {
		if($j+1 == $int_premj && $t == 1) { $tab_cal[$i][$j] = $t; $t++; } // mémorise le premier jour du mois
		elseif($t > 1 && $t <= $int_nbj) { $tab_cal[$i][$j] = $p.$t; $t++; } // on incrémente a chaque fois...
		elseif($t > $int_nbj) { $p="*"; $tab_cal[$i][$j] = $p."1"; $t = 2; } // mémorise les jours du mois suivant
		elseif($t == 1) { $tab_cal[$i][$j] = "*".($int_nbjAV-($int_premj-($j+1))+1); } // mémorise les jours du mois précédent
	}
}

	$xml=lecturevent();          // utilisation d'un fichier .xml pour stocker les données de style
		$nombre=count($xml->evenement);
		$k = 0; $total = 0; $p = 0;
		$arrayid = array(); $arraynom = array(); $arraydeb = array(); $arrayfin= array(); 
		$arrayecart = array(); $arraytotal = array(); $arrayevent = array(); $arrayeventtot = array();
		$arraynumid = array(); $arraymail = array(); $arraytel = array(); $arraycomment = array();
		$arraycoul = array(); $arraycoultot = array();
	$monmail = $xml->addmail->mail;
	foreach ($xml->evenement as $val)
	{
		array_push($arraynumid, $p);
		$p++;
		$id=$val->id;
		array_push($arrayid, $id);

		$noms = $val->noms;
		array_push($arraynom, $noms);
		
		$mail = $val->email;
		array_push($arraymail, $mail);
		
		$tel = $val->teleph;
		array_push($arraytel, $tel);
		
		$comment = $val->comment;
		array_push($arraycomment, $comment);
		
		$date1 = $val->eventdatedeb;
		array_push($arraydeb, $date1);
		$datedeb = date_create($date1);
		date_format($datedeb,'d-m-Y');

		$date2 = $val->eventdatefin;
		array_push($arrayfin, $date2);
		$datefin = date_create($date2);
		date_format($datefin,'d-m-Y');
		
		$ecart = date_diff($datedeb,$datefin)->format('%a');
		array_push($arrayecart, $ecart);

		$coul = $val->coul;
		array_push($arraycoul, $coul);
		if ($coul == 2 || $flag == 1){
			$mes = "Des souhaits sont en attente de validation";
			$flag = 1;
		} else {
			$mes ="";
			$flag = 0;
		}
		for ($c=0;$c<$ecart+1;$c++){
		array_push($arraycoultot, $coul);
		}

	$start = new DateTime($date1);
	$interval = new DateInterval('P1D');
	$end = new DateTime($date2);
	$period = new DatePeriod($start, $interval, $end);
	
	foreach ($period as $datetot) {
	array_push($arraytotal,date_format($datetot,"Y-m-d"));
	$total++;
	}
	array_push($arraytotal,date_format($datefin,"Y-m-d"));
	$total++;
	}
	if ($nombre == 0){
	$numid = 0;}
	else{
	$numid = $arrayid[$nombre-1];}

function lecturevent()
{
$fichierxml = "cal/calendrier.xml";
if(!file_exists($fichierxml))
{
	$table = "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n <calendrier>\n <evenement>\n <id>1</id>\n <noms>Dudule</noms>\n <email>dudule@mail.fr</email>\n <teleph>01 23 45 67 89</teleph>\n <eventdatedeb>01-07-2019</eventdatedeb>\n <eventdatefin>05-07-2019</eventdatefin>\n <coul>1</coul>\n </evenement>\n </calendrier>";
	file_put_contents($fichierxml, $table);
}
	$xml= simplexml_load_file($fichierxml);
	return $xml;
}

function affichage($tab_jours, $tab_cal, $num_mois, $num_an){ //affichage du calendrier

	echo'<tr>';
	for ($i = 1; $i <= 7; $i++){
		echo('<td id="taillejours">'.$tab_jours[$i].'</td>');
	}
	echo'</tr>';

	for($i=0;$i<6;$i++) {
		echo '<tr  id="taillejour">';
		for ($j=0;$j<7;$j++) {
			echo "<td".(($num_mois == date("n") && $num_an == date("Y") && $tab_cal[$i][$j] == date("j"))?' style="color: #FFFFFF; background-color: #0843F2;"':NULL)
			.$ecartevent = ecartevent($num_mois, $num_an, $tab_cal, $i, $j)
			.">".((strpos($tab_cal[$i][$j],"*")!==false)?'<font color=RGBA(60,60,60,0.5)>'
			.str_replace("*","",$tab_cal[$i][$j]).'</font>':$tab_cal[$i][$j])."</td>";
		}
		echo "</tr>";
	}
}

function ecartevent($num_mois, $num_an, $tab_cal , $i, $j) {     //mémorise les périodes de réservation
		global $xml, $nombre, $total, $arraydeb, $arrayfin, $arraytotal, $ecartevent, $arraycoultot; 

		for ($k=0;$k<$total;$k++){
			$detaildeb = explode("-", $arraytotal[$k]);
			if ($detaildeb[0] == $num_an && $detaildeb[1] == $num_mois && $detaildeb[2] == $tab_cal[$i][$j]) {
				if ($arraycoultot[$k] == 1){
				$ecartevent = ' id="ecart" style="color: #000000; "';
				} else {
				$ecartevent = ' id="ecart2" style="color: #000000; "';
				}
				return $ecartevent;
			} else {
				$ecartevent = NULL;
			}
		}
		return $ecartevent;
}
function periode_valid($month, $day, $year, $month1, $day1, $year1){
	global $nombre, $arraydeb, $arrayfin, $message;
		$souhaitdeb = mktime(0, 0, 0, $month, $day, $year);
		$souhaitfin = mktime(0, 0, 0, $month1, $day1, $year1);
		$nbrjours1 = $souhaitfin - $souhaitdeb;
		$nbrjours = $nbrjours1/86400 + 1;
		for ($l=0;$l<$nombre;$l++){
			list($jour, $mois, $annee) = explode('-', $arraydeb[$l]);
			list($jour1, $mois1, $annee1) = explode('-', $arrayfin[$l]);
			$times = mktime(0, 0, 0, $mois, $jour, $annee);
			$times1 = mktime(0, 0, 0, $mois1, $jour1, $annee1);
			for ($m=0;$m<$nbrjours;$m++){
				$souhait = $souhaitdeb + $m*86400;
				if ($souhait > $times){
					if ($souhait < $times1){
						$message = "Des journées souhaitées ont déjà été sélectionnées";
					 return $message;
					 break;
					}
				} else { $message = "";}
			}
		}
		$limite = time()+(2*365*24*60*60);
		if ($souhaitdeb > $limite){
			$message = "Vous ne pouvez pas aller au delà de 2 ans";
				return $message;}
}
?>

</body>
</html>

    Et je vous donne le CSS :

    <?php   //remplace le fichier css, permet de modifier les valeurs avec style.php
header("Content-type: text/css; charset=UTF-8");
	$fichierstyle = 'style.xml';
	$xmlstyle = simplexml_load_file($fichierstyle);
	
	foreach($xmlstyle->style2 as $stylecss) {
	$couleur_entet = $stylecss->lignemoisan->background;
	$width_case = $stylecss->thtd->width;
	$height_case = $stylecss->thtd->height;
	$couleur_fond = $stylecss->tablethtd->background;
	$couleur_ecart = $stylecss->ecart->background;
	$couleur_ecart2 = $stylecss->ecart2->background;
	$taille_text = $stylecss->texte->fontsize;
	$couleur_text = $stylecss->texte->color;
	$titre = "Studio";
	}
?>
table, th, td {
	margin: auto;
	border-collapse: collapse;
	border: 1px solid black;
	background-color: <?php echo $couleur_fond ;?>;
}
th, td {
	width: <?php echo $width_case ;?>; height: <?php echo $height_case ;?>;
	padding: 3px;
	color: <?php echo $couleur_text ;?>;
}
h1, h2, table, th, tr, td, p, echo{
	text-align: center;
}
a, p{
	font-size: 20px;
 }

#admin {text-align: center; display: block; font-size: 1.5em;}
#lignemois {background-color:<?php echo $couleur_entet; ?>;background-color:<?php echo $couleur_entet; ?>; color: #000000; font-size:<?php echo $taille_text ;?>;}
#ligneannee {background-color:rgba(255,255,0,0.3);}
#ecart {background-color:<?php echo $couleur_ecart ;?>;}
#ecart2 {background-color:<?php echo $couleur_ecart2 ;?>;}
#taillejour {font-size:<?php echo $taille_text ;?>;}
#taillejours {font-size:<?php echo $taille_text ;?>; color: #000000;}

    Franchement si vous arrivez a trouver comment faire chapeau. Je galère comme pas possible. Ca dépasse tout simplement mes compétences.

    En vous remerciant



    -
    Edité par rwayne 18 mars 2024 à 13:30:01

    • Partager sur Facebook
    • Partager sur Twitter
    Domi65
      22 mars 2024 à 15:43:13

      Bonjour. Fouiller dans du PHP pour résoudre du JS, c'est compliqué !

      Donnes le code HTML renvoyé par le PHP, on y verra plus clair !

      • Partager sur Facebook
      • Partager sur Twitter
      GBNet
        22 mars 2024 à 16:02:06

        Bonjour, 

        pourquoi pas appliquer un triangle css en background ?

        • Partager sur Facebook
        • Partager sur Twitter

        gb-net.fr

        Calendrier de reservation

        × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
        • Editeur ●
        • Markdown