Discussion :

[yagrasdemonde]

Bonjour

Je souhaite afficher un calendrier sur une année pour indiquer les disponibilités pour une location d'un appartement.
J'affiche un calednrier via datepicker de jQuery sur 12 mois.

Je stocke en base de données la date d'arrivée et la date de départ.
L'idée est d'afficher cet espace temps entre les 2 dates d'une manière colorée sur le calendrier.
Mais avant d'arriver là je bloque sur la construction de mon tableau après la requete SQL.
En effet, je dois récupérer la date d'arrivée et la date de départ et insérer les dates intermediaires en php, afin de les mettre dans mon datepicker pour stipuler que durant cette période, l'appartement est réservé.
Voici la construction de mon tableau,
Pouvez vous me donner les pistes afin que je puisse ajouter les dates intermediaires pour après envoyé un ensemble de date en JSON a mon datepicker

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
//Enregistrements en BDD
//Ligne 1 date_arrivee = 2014-02-02 / date-depart = 2014-02-05
//Ligne 2 date_arrivee = 2014-11-26 / date-depart = 2014-11-30
while ($row = mysql_fetch_assoc($sql_result)) {
	$unavailable[] = $row['date_arrivee'].','.$row['date_depart'];
}

[Invité]

Il me semble que tu peux définir une plage de date non cliquable (en grisé) avec datepicker, non ?

[yagrasdemonde]

Oui c'est dans le datepicker, que je lui indique les dates réservées stockées en base de données en JSON. C'est justement pour créer ma liste de date que je galère.

[yagrasdemonde]

J'avance j'avance... mais je trouve que mon code n'est pas simple et clair. J'ai besoin de vos conseils et recommendations pour l'optimiser.

Pour rappel, mon objectif est d'afficher via un datepicker un calendrier qui permet de voir les dates (non disponibles) de reservation.

Mon code HTML

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<section class="mydatepicker"> 
    <div class="row"> 
            <div class="col-sm-1 col-lg-6"> 
                <div id="calendar" class="calendar"></div> 
            </div> 
    </div> 
</section>

Mon code JS

Code javascript :

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
var currentDate = new Date(); 
var currentMonth = currentDate.getMonth(); 
var currentDate = currentDate.getDate(); 
var currentYear = currentDate.getFullYear(); 
var nextYear = currentYear + 1; 
var dateEnd = new Date(nextYear, currentMonth, currentDate); 
var i = null; 
var j = null; 
jQuery.ajax({url: '/php/loadDate.php', dataType: 'json'}) 
    .done(function(data, text, jqxhr){ 
        jQuery('#calendar').datepicker({  
            numberOfMonths: [3, 4], 
            minDate: 0, 
            maxDate: dateEnd, 
            hideIfNoPrevNext: true, 
            beforeShowDay: function (date){ 
                for (i = 0; i < data.length; i++) { 
                    for (j = 0; j < data[i].length; j++) { 
                        if (date.getMonth() == data[i][j][5]+data[i][j][6] - 1 && date.getDate() == data[i][j][8]+data[i][j][9] && date.getFullYear() == data[i][j][0]+data[i][j][1]+data[i][j][2]+data[i][j][3]) {   
                            return [false,'ui-state-active','Not available']; 
                        } 
                    } 
                } 
                return [true, '', 'Available'];//enable all other days 
            }   
        }) 
})

Mon code PHP

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
$Link = mysql_connect($Host, $User, $Password) or die("error"); 
$db = mysql_select_db($Base) or die("error"); 
//Request 
$fetch = mysql_query("SELECT date_arrival, date_departure, statut_reservation FROM clients WHERE statut_reservation = '0'");  
//Variable Declaration 
$return_arr = array(); 
//Function Declaration 
function addDates($start_date, $end_date){//Add dates to make a daterange. 
    $dateDeb = strtotime($start_date);   
    $dateFin = strtotime($end_date); 
        while ($dateDeb <= $dateFin){ 
            $date[] = date('Y-m-d', $dateDeb); 
            $dateDeb = strtotime('+1 day', $dateDeb); 
        } 
    return $date; 
} 
//Construct Array for an encod in JSON 
while ($row = mysql_fetch_array($fetch, MYSQL_ASSOC)) { 
    $row_array['date_arrival'] = $row['date_arrival']; 
    $row_array['date_departure'] = $row['date_departure']; 
 
    array_push($return_arr,$row_array); 
} 
//I make 'n' sub array, depending the number of daterange I had 
for( $i = 0; $i < count($return_arr); $i++ ){ 
    $var_name[] = "sub_tab" . $i; //Make variable variable 
    ${$var_name[$i]}  = array_slice($return_arr, $i, 1); //Value of variable variable 
    $date_arrival = ${$var_name[$i]}[0]['date_arrival']; 
    $date_departure = ${$var_name[$i]}[0]['date_departure']; 
    $result[$i] = addDates($date_arrival, $date_departure);//Call to function to make the daterange 
} 
//export in JSON 
echo(json_encode($result));

Mon JSON retourné

Array(
    [0] => Array(
            [0] => 2014-02-02
            [1] => 2014-02-03
            [2] => 2014-02-04
            [3] => 2014-02-05
        )
    [1] => Array(
            [0] => 2014-11-26
            [1] => 2014-11-27
            [2] => 2014-11-28
            [3] => 2014-11-29
            [4] => 2014-11-30
        )
    [2] => Array(
            [0] => 2014-11-23
            [1] => 2014-11-24
            [2] => 2014-11-25
            [3] => 2014-11-26
        )
    [3] => Array(
            [0] => 2015-01-31
            [1] => 2015-02-01
            [2] => 2015-02-02
        )
)

Ce code fonctionne bien, mais étant dedans depuis 2 jours, je ne vois plus très bien ce qui peut etre optimisé.

Je compte sur vos remarques et coup de mains

Merci

[mandrake_of_mandregas]

Bonjour,

tu devrais plutot prendre la date de d'arrivée et incrémenter jusqu'a atteindre la date de départ et puis tu insère chaque valeur dasn ton tableau.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$inc_date=date_arrivee
while($inc_date<=$date_depart)
	{
 
$TABLEAU[]=inc_date;
		$inc_date1=strtotime(date("Y-m-d", strtotime($inc_date)) . "+1 DAY");
		$inc_date=date("Y-m-d",$inc_date1);
 
	}

[yagrasdemonde]

Oui c'est ce que je fais dans ma fonction addDates.
Tu le sortirais de la fonction ?

[Spartacusply]

Je comprends pas ton problème, tu te compliques grandement la vie, ils existent les options minDate et maxDate pour spécifier les dates autorisées dans ton datepicker..

[yagrasdemonde]

Oui mais dans mon cas minDate et maxDate ne me servent pas puisqu'ils configurent en quelque sorte les dates de début et de fin du calendrier. Ou du moins les dates qu'on ne peut sélectionner.
Dans mon cas j'affiche avec un fond en couleur des dates de réservation, et pour ça je dois utiliser beforeShowDay.
Tu comprends mieux Spartacusply ?

[Spartacusply]

Ok je comprends.

Par contre du coup je comprends pas pourquoi tu t'embêtes à faire des sous-tableaux dans $result. Un jour est coloré ou pas, ça correspond à quoi l'index de la deuxième dimension de ton tableau ?