John Davidson

Message:

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 the booking table

And here is the Modal

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">&times;</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:_