Hello I'm trying to create a calendar with booked dates for a while now but with no succes I was wondering if someone else could see what is going wrong. I have alreasy tried 2 ways.
first one is a very big calendar on the website that shows booked dates. Though it does do the job its just not exactly what I want to have.
it's more like my second version.
an input type of text what when you click on it will show a calendar with dates that you can pick.
this is the source code:
<?php include "config.php"; ?>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Display multiple months</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<?php
$huis_ID = "1";
$sql = "SELECT * FROM reserveringen WHERE huis_ID = ?";
$stmt = $conn->prepare($sql);
$stmt->bind_param("i", $huis_ID);
$stmt->execute();
$result = $stmt->get_result();
$data = $result->fetch_all(MYSQLI_ASSOC);
if ($data):
?>
<?php foreach($data as $row): ?>
<?php
$start_datum = date('d-m-Y', strtotime($row['start_datum']));
echo $start_datum , "<br>";
$eind_datum = date('d-m-Y', strtotime($row['eind_datum']));
echo $eind_datum , "<br>";
?>
<?php endforeach ?>
<?php else: ?>
No data found
<?php endif ?>
<script>
$(function() {
$( "#datepicker" ).datepicker({
numberOfMonths: 1,
minDate:0,
showButtonPanel: true,
});
});
$(function() {
$( "#datepicker1" ).datepicker({
numberOfMonths: 1,
minDate:1,
showButtonPanel: true,
});
});
</script>
</head>
<body>
<p>start_date: <input type="text" id="datepicker" name ="datepicker"></p>
<p>end_date: <input type="text" id="datepicker1" name ="datepicker1"></p>
</body>
</html>
what it does is it shows the calendar and you are not allowed to go back in months. this is what I want to have but now I want to have blocked (in red) dates. based on the booked dates that are in the db
in the foreach loop you will see the dates shown now I want to use these dates to create the blocked (in red) dates how do I fix this?
What I have tried:
So first I tried to make a big calendar but this just showed booked dates I don't want that. I want kinda what I have now but with the booked dates
Submit an article or tip