<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" media="screen" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
</head>
	
<style>
.disabled span{
    color:black !important;
    background:#808080 !important;    
}
.enabled a{
    color:black !important;
    background:#9DEA3A !important;    
}

</style>
	
	
<script>
function unavailable(date)
{
	dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();

	if ($.inArray(dmy, unavailableDates) >= 0) 
    {
       return [false,"disabled","Indisponible"];
    }
	  
     else  return [true,"enabled","Libre"];
}

/*$(document).ready(function() 
{
	var selected_dates = new Array();
	selected_dates = getSelectedDates();
	alert(selected_dates);
	
	$('#reservation_datepicker').datepicker({
		
		/*dateFormat: "dd-mm-yy",
        numberOfMonths: 3,
		//beforeShowDay: unavailable,
	    showWeek: true,
		minDate: new Date(),
		altField: "#datepicker",
		closeText: 'Fermer',
		prevText: 'Précédent',
		nextText: 'Suivant',
		currentText: 'Aujourd\'hui',
		monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
		monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
		dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
		dayNamesShort: ['Dim.', 'Lun.', 'Mar.', 'Mer.', 'Jeu.', 'Ven.', 'Sam.'],
		dayNamesMin: ['D', 'L', 'M', 'M', 'J', 'V', 'S'],
		weekHeader: 'Sem.',
		firstDay: 1,*/
		
/*		beforeShowDay: function (date)
		{
			dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
		    if ($.inArray(dmy, selected_dates) >= 0) 
		    {
			  return [false,"disabled",""];   
		    }
	  		else  return [true,"enabled",""];
		},
	
	
	});
});*/

var myBadDates = new Array();
//myBadDates = getSelectedDates();
//alert(myBadDates);

$(function() {
$( "#reservation_datepicker" ).datepicker({
dateFormat: 'dd-mm-yy',
beforeShowDay: checkAvailability
});
})


var myBadDates = new Array("10-11-2014","21-12-2014","01-01-2015","12-01-2015");
function checkAvailability(mydate){

 var retour = true;
 var  retour_class ="available";
 
  var checkdate = $.datepicker.formatDate('dd-mm-yy', mydate);

	
    var test = myBadDates.indexOf(checkdate);
	if(test > 0)
  	 {
			  return [false,"disabled",""];   
		    }
	  		else  return [true,"enabled",""];
  
	/*for(var i = 0; i < myBadDates.length; i++) //myBadDates.length
	{
	
	
		if(myBadDates[i] == checkdate)
		{
			//alert("trace");
			  return [false,"disabled",""];   
		  }
	  		else  return [true,"enabled",""];
		
		/*{
			retour = false;
			retour_class= "unavailable";
		}*/
	/*}

	return [ retour, retour_class];*/
 
/*var $return=true;
var $returnclass ="available";
$checkdate = $.datepicker.formatDate('dd-mm-yy', mydate);
for(var i = 0; i < $myBadDates.length; i++)
{
if($myBadDates[i] == $checkdate)
{
$return = false;
$returnclass= "unavailable";
}
}
return [$return,$returnclass];*/
}

function getSelectedDates()
{
	var the_selected_dates = new Array();
    $.ajax(
    {
        url: 'calendrier_mysql.php',
        dataType: 'json',
        async: false,
        success: function(data)
        {	/*alert(data);
			$.each(data, function(n, val)
            {
                the_selected_dates[val.daten] = val;
            });*/
			the_selected_dates = data
        }
    });
	
    return the_selected_dates;
	
}  

</script>



	
<body>

<div id="reservation_datepicker" ></div>

</body>
</html>

