I have a booking system and I want help in applying my idea. as you can see here is the table for booking. when the user picks a room from the checkbox and picks a time and presses submit. in the modal, I want to fill the timeslot field and the room by the choices he chooses.
Here is my code
php
function timeslots($duration, $cleanup, $start, $end){
$start = new DateTime($start);
$end = new DateTime($end);
$interval = new DateInterval("PT".$duration."M");
$cleanupInterval = new DateInterval("PT".$cleanup."M");
$slots = array();
for($intStart = $start; $intStart<$end; $intStart->add($interval)->add($cleanupInterval)){
$endPeriod = clone $intStart;
$endPeriod->add($interval);
if($endPeriod>$end){
break;
}
$slots[] = $intStart->format("H:iA")." - ". $endPeriod->format("H:iA");
}
return $slots;
}
function build_calendar($month, $year) {
$mysqli = new mysqli('localhost', 'root', '', 'pmudb');
/*$stmt = $mysqli->prepare("select * from bookings where MONTH(date) = ? AND YEAR(date)=?");
$stmt->bind_param('ss', $month, $year);
$bookings = array();
if($stmt->execute()){
$result = $stmt->get_result();
if($result->num_rows>0){
while($row = $result->fetch_assoc()){
$bookings[] = $row['date'];
}
$stmt->close();
}
}*/
$calendar = "<table class='table table-bordered'>";
$calendar .= "<center><h2>test</h2>";
$calendar .= "
<tr>";
$duration = 60;
$cleanup = 0;
$start = "08:00";
$end = "17:00";
$timeslots = timeslots($duration, $cleanup, $start, $end);
$calendar .= "<th class='header'>Room#</th>";
// Create the calendar headers
foreach($timeslots as $day) {
$calendar .= "<th class='header'>$day</th>";
}
$row=0;
$calendar .= "
</tr>";
$query = "SELECT name FROM rooms ";
$result = mysqli_query($mysqli, $query);
if($result && mysqli_num_rows($result)>0){
$user_info = mysqli_fetch_assoc($result);
foreach ($result as $val) {
$calendar .="<tr>";
$calendar .= "<td class='empty'>$val[name]</td>";
foreach($timeslots as $rows) {
$row++;
$calendar.="<td>
<input type='checkbox' class='btn-check' name='room' id='box$row' autocomplete='off' value='box$row'>
<label class='btn btn-outline-success' style='border-radius: 5px;' for='box$row'>Book</label>
</td>";
}
}
$calendar .= "
</tr>";
}
$calendar .= "</tr>";
$calendar .= "</table>";
return $calendar;
}
Modal
<!-- Modal -->
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<form action="" method="post">
<div class="form-group">
<label for="">Time Slot</label>
<input readonly type="text" class="form-control" id="timeslot" name="timeslot">
</div>
<div class="form-group">
<label for="">Name</label>
<input required type="text" class="form-control" name="name" "disabled>
</div>
<div class="form-group;>
<label for="">Email</label>
<input required type="email" class="form-control" name="email" "disabled>
</div>
<div class="form-group;>
<label for="">Room</label>
<input required type="email" class="form-control" name="email" "disabled>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
can u please help me , thank u
My Answer:
"PT" . $duration . "M");_ $cleanupInterval = new DateInterval("PT" . $cleanup . "M");_ $slots = array();_ for($intStart = $start; $intStart < $end; $intStart->add($interval)->add($cleanupInterval)){_ $endPeriod = clone $intStart;_ $endPeriod->add($interval);_ if($endPeriod > $end){_ break;_ }_ $slots[] = $intStart->format('H:i') . '-' . $endPeriod->format('H:i');_ }_ return $slots;_}_$timeslots = timeslots(30, 10, '09:00', '17:00');_foreach($timeslots as $slot){_ echo '' . $slot . '
';_}_?>__In the modal, you can use JavaScript to fill the timeslot and room fields based on the user's choices. You can add an event listener to the submit button that retrieves the selected room and timeslot values from the checkboxes and fills them into the corresponding fields in the modal. Here is an example of how you can do this:_
Rate this post
4 of 5 based on 3983 votesComments