I am currently using the jQuery UI Datepicker script in order to display availability dates for a rental. I used the recommended way to feed the script am an array of disabled days but my problem is that the day rental ends should also be available as a start date for a new rental. The client asked for a red triangle on the first and last day to show it should be available. How can I achieve that with this plugin?
$(function() {
<?php
$date_range = array();
$select = mysql_query("SELECT * FROM reservation WHERE cid='$chalet[id]' and status='1'");
while ($r = mysql_fetch_array($select)) {
$date_range1 = createDateRangeArray(date("Y-m-d", $r[arrive]), date("Y-m-d", $r[depart]));
// How can i use those 2 arrays to detect the right triangle to display and make sure the day is selectable
$first[] = reset($date_range1);
$last[] = end($date_range1);
$date_range = array_merge($date_range, $date_range1);
}
foreach ($date_range as $key => $values) {
$dates .= '"' . $values . '", ';
}
if ($dates) {
echo 'var disableddates = [' . substr($dates, 0, -2) . "];\n";
} else {
echo "var disableddates = [];\n";
}
?>
function DisableSpecificDates(date) {
var string = jQuery.datepicker.formatDate('dd-mm-yy', date);
return [disableddates.indexOf(string) == -1];
}
$( "#calendrier" ).datepicker({
beforeShowDay: DisableSpecificDates
});
});
The above code renders the following
I need it to look like this:
Hope u'll get the idea, pardon if there are any errors as its written straight from brain without any testing. This adds .arrival / .departure classes to given day.
PHP:
$arrivals = $departures = $disabledDates = array();
while ($r = mysql_fetch_array($select)) {
$arrivals[] = $r['arrive'];
$departures[] = $r['departure'];
$disabledDates[] = ....
JS
var arrivals = <?=json_encode($arrivals)?>;
var departures = <?=json_encode($departures)?>;
var disabledDates = <?=json_encode($disabledDates)?>;
$( "#calendrier" ).datepicker({
beforeShowDay: function(date){
var myDate = jQuery.datepicker.formatDate('YYYY-mm-dd', date);
if($.inArray(myDate, disabledDates))
return [false];
else if($.inArray(myDate, arrivals))
return [true, 'arrival', 'Arrival day'];
else if($.inArray(myDate, departures))
return [true, 'departure', 'Departure day'];
else
return [true];
}
}