DaVinc1 Posted July 2, 2023 Author Share Posted July 2, 2023 I did it on the input but what about the table? Is there even a way? Code: https://forum.gizmola.com/pastebin/?a80e035284914286#7WNuEdvT6aP9uzYoSqEXNH4KAay2S5n1P7XEShY3JrdT Quote Link to comment Share on other sites More sharing options...
gizmola Posted July 2, 2023 Share Posted July 2, 2023 I don't understand the question. You created the table with code to have a range of days and times. Your code created the table. What would you want to be different about the days or times output? Quote Link to comment Share on other sites More sharing options...
DaVinc1 Posted July 3, 2023 Author Share Posted July 3, 2023 The point of dates is to make a reservation, so I need the past dates (dates before today) to be unclickable because of course it doesn't make sense to make a reservation for yesterday. But can't do it. Quote Link to comment Share on other sites More sharing options...
gizmola Posted July 3, 2023 Share Posted July 3, 2023 1 hour ago, DaVinc1 said: The point of dates is to make a reservation, so I need the past dates (dates before today) to be unclickable because of course it doesn't make sense to make a reservation for yesterday. But can't do it. Add some extra checks in to prevent the rendering of dates in the table if they are in the past. This should work: <section class="content" id="termin"> <?php $dt = new DateTime; $thisWeek = $dt->format('W'); $thisYear = $dt->format('o'); if (isset($_GET['year']) && $_GET['year'] >= $thisYear && isset($_GET['week']) && $_GET['week'] >= $thisWeek ) { $dt->setISODate($_GET['year'], $_GET['week']); } else { $dt->setISODate($dt->format('o'), $dt->format('W')); } $year = $dt->format('o'); $week = $dt->format('W'); ?> 1 Quote Link to comment Share on other sites More sharing options...
Barand Posted July 3, 2023 Share Posted July 3, 2023 I was offering up a method rather than a spoonfed solution. This is a fuller solution incorporating the dates <?php $duration = 45; $cleanup = 0; $start = "10:00"; $end = "15:15"; ################################################################################ # Default week commence date # ################################################################################ $d1 = new DateTime(); if ($d1->format('w') <> 1) { $d1->modify('last monday'); } $wkcomm = $_GET['week'] ?? $d1->format('Y-m-d'); $d1 = new DateTime($wkcomm); $week1 = $d1->sub(new DateInterval('P7D'))->format('Y-m-d'); $week2 = $d1->add(new DateInterval('P14D'))->format('Y-m-d'); function timeslots($duration, $cleanup, $start, $end) { $start = new DateTime($start); $end = new DateTime($end); $duration += $cleanup; $interval = new DateInterval("PT".$duration."M"); return new DatePeriod($start, $interval, $end); } function daysOfWeek($comm) { $d1 = new DateTime($comm); return new DatePeriod($d1, new DateInterval('P1D'), 6); } ?> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <title>Tehnički pregled</title> <script type='text/javascript'> $(function() { // when page has loaded $(".tslot").click(function() { // define click event listener $("#tVreme").val( $(this).data("timeslot") ) }) }) </script> <style type='text/css'> td, th { padding: 4px; text-align: center; } th { background-color: black; color: white; } </style> </head> <body> <section class="header"> <div class="navbar"> <div class="logo"> <img src="images/logo.png"> <span>Tehnički pregled</span> </div> <div class="nav-links" id="navLinks"> <ul> <li><a aria-current="page" href="index.php">Naslovna</a></li> <li><a href="galerija.php">Galerija</a></li> </ul> </div> </div> <div class="headline"> <h1>Tehnički pregled</h1> <p>Odaberite termin i zakažite tehnički pregled svog vozila brzo i jednostavno na našem sajtu.</p> <a href="#termin" class="btn">Zakažite termin</a> </div> </section> <div id="myModal" class="modal"> <div class="login-box"> <p>Zakazivanje termina</p> <form method="POST"> <div class="user-box"> <input name="tIme" type="text" required="Please"> <label>Ime</label> </div> <div class="user-box"> <input name="tPrezime" type="text" required> <label>Prezime</label> </div> <div class="user-box"> <input name="tTelefon" type="text" required> <label>Broj telefona</label> </div> <div class="user-box"> <input name="tVreme" id="tVreme" type="text" required readonly> <label>Datum i vrijeme</label> </div> <br> <input type='submit' value='POŠALJI'> </form> </div> </div> <section class="content" id="termin"> <br><br> <a href='?week=<?=$week1?>'>Previous Week</a>   <a href='?week=<?=$week2?>'>Next Week</a> <br><br> <table> <?php #################################################################### # BUILD THE TABLE OF TIMESLOTS # #################################################################### $days = daysOfWeek($wkcomm); $times = timeslots($duration, $cleanup, $start, $end); $today = new DateTime(); // table headings echo "<tr>"; foreach ($days as $d) { echo '<th>' . $d->format('l<\b\r>d M Y') . '</th>'; } echo "</tr>\n"; // times foreach ($times as $t) { $ts = $t->format('H:i'); echo "<tr>"; foreach ($days as $d) { if ($d > $today) { $dt = $d->format('Y-m-d') . ' ' . $ts; echo "<td><a href='#' class='tslot' data-timeslot='$dt' >$ts h</a><?td>"; } else { echo "<td> </td>"; } } echo "</tr>\n"; } ?> </table> <span>Odaberite željeno vreme.</span> </section> <section class="footer"> <div class="social"> <ul> <li><a href="#"><img src="images/facebook.png" alt=""></a></li> <li><a href="#"><img src="images/twitter.png" alt=""></a></li> <li><a href="#"><img src="images/gmail.png" alt=""></a></li> </ul> </div> <span>Designed by Filip Glišović ©2023. - All rights reserved.</span> </section> </body> </html> 1 Quote Link to comment Share on other sites More sharing options...
DaVinc1 Posted July 4, 2023 Author Share Posted July 4, 2023 (edited) On 7/3/2023 at 5:20 AM, gizmola said: Add some extra checks in to prevent the rendering of dates in the table if they are in the past. This should work: <section class="content" id="termin"> <?php $dt = new DateTime; $thisWeek = $dt->format('W'); $thisYear = $dt->format('o'); if (isset($_GET['year']) && $_GET['year'] >= $thisYear && isset($_GET['week']) && $_GET['week'] >= $thisWeek ) { $dt->setISODate($_GET['year'], $_GET['week']); } else { $dt->setISODate($dt->format('o'), $dt->format('W')); } $year = $dt->format('o'); $week = $dt->format('W'); ?> Omg are you a god? 🤩 Is there maybe a way to make the times (hours) that are reserved or that passed unclickable? To elaborate, when I make a reservation at 10 o'clock, no one else should be able to, or if the current time is for example 11:42, no one should be able to make reservation at 10:00, 10:45, etc... Edited July 4, 2023 by DaVinc1 Quote Link to comment Share on other sites More sharing options...
Barand Posted July 4, 2023 Share Posted July 4, 2023 2 hours ago, DaVinc1 said: when I make a reservation at 10 o'clock, no one else should be able to Query your existing bookings and create an array... function getBookedSlots($pdo, $wkcomm) { $res = $pdo->prepare("SELECT datum , vreme FROM tehnicki WHERE datum BETWEEN ? AND ? + INTERVAL 6 DAY "); $res->execute([ $wkcomm, $wkcomm ]); $data = []; foreach ($res as $r) { $data[$r['datum']][$r['vreme']] = 1; } return $data; } $bookings [ '2023-07-05'][ '10:00' ] = 1; $bookings [ '2023-07-06'][ '11:30' ] = 1 then if ($d > $today && !isset($bookings[$dt][$ts])) { // clickable if not booked Incorporating into my previous code... <?php $duration = 45; $cleanup = 0; $start = "10:00"; $end = "15:15"; ################################################################################ # Default week commence date # ################################################################################ $d1 = new DateTime(); if ($d1->format('w') <> 1) { $d1->modify('last monday'); } $wkcomm = $_GET['week'] ?? $d1->format('Y-m-d'); $d1 = new DateTime($wkcomm); $week1 = $d1->sub(new DateInterval('P7D'))->format('Y-m-d'); $week2 = $d1->add(new DateInterval('P14D'))->format('Y-m-d'); function getBookedSlots($pdo, $wkcomm) { $res = $pdo->prepare("SELECT datum , vreme FROM tehnicki WHERE datum BETWEEN ? AND ? + INTERVAL 6 DAY "); $res->execute([ $wkcomm, $wkcomm ]); $data = []; foreach ($res as $r) { $data[$r['datum']][$r['vreme']] = 1; } return $data; } function timeslots($duration, $cleanup, $start, $end) { $start = new DateTime($start); $end = new DateTime($end); $duration += $cleanup; $interval = new DateInterval("PT".$duration."M"); return new DatePeriod($start, $interval, $end); } function daysOfWeek($comm) { $d1 = new DateTime($comm); return new DatePeriod($d1, new DateInterval('P1D'), 6); } ?> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <title>Tehnički pregled</title> <script type='text/javascript'> $(function() { // when page has loaded $(".tslot").click(function() { // define click event listener $("#tVreme").val( $(this).data("timeslot") ) $(".tslot").css('background-color', '#fff') $(this).css('background-color', '#ccc') }) }) </script> <style type='text/css'> td, th { padding: 4px; text-align: center; } th { background-color: black; color: white; } td { color: #999; } </style> </head> <body> <section class="header"> <div class="navbar"> <div class="logo"> <img src="images/logo.png"> <span>Tehnički pregled</span> </div> <div class="nav-links" id="navLinks"> <ul> <li><a aria-current="page" href="index.php">Naslovna</a></li> <li><a href="galerija.php">Galerija</a></li> </ul> </div> </div> <div class="headline"> <h1>Tehnički pregled</h1> <p>Odaberite termin i zakažite tehnički pregled svog vozila brzo i jednostavno na našem sajtu.</p> <a href="#termin" class="btn">Zakažite termin</a> </div> </section> <div id="myModal" class="modal"> <div class="login-box"> <p>Zakazivanje termina</p> <form method="POST"> <div class="user-box"> <input name="tIme" type="text" required="Please"> <label>Ime</label> </div> <div class="user-box"> <input name="tPrezime" type="text" required> <label>Prezime</label> </div> <div class="user-box"> <input name="tTelefon" type="text" required> <label>Broj telefona</label> </div> <div class="user-box"> <input name="tVreme" id="tVreme" type="text" required readonly> <label>Datum i vrijeme</label> </div> <br> <input type='submit' value='POŠALJI'> </form> </div> </div> <section class="content" id="termin"> <br><br> <a href='?week=<?=$week1?>'>Previous Week</a>   <a href='?week=<?=$week2?>'>Next Week</a> <br><br> <table> <?php #################################################################### # BUILD THE TABLE OF TIMESLOTS # #################################################################### $days = daysOfWeek($wkcomm); $times = timeslots($duration, $cleanup, $start, $end); $bookings = getBookedSlots($pdo, $wkcomm); // get current bookings $today = new DateTime(); // table headings echo "<tr>"; foreach ($days as $d) { echo '<th>' . $d->format('l<\b\r>d M Y') . '</th>'; } echo "</tr>\n"; // times foreach ($times as $t) { $ts = $t->format('H:i'); echo "<tr>"; foreach ($days as $d) { $dt = $d->format('Y-m-d'); if ($d > $today && !isset($bookings[$dt][$ts])) { // clickable if not booked $dt = $dt . ' ' . $ts; echo "<td><a href='#' class='tslot' data-timeslot='$dt' >$ts h</a><?td>"; } else { echo "<td>$ts</td>"; } } echo "</tr>\n"; } ?> </table> <span>Odaberite željeno vreme.</span> </section> <section class="footer"> <div class="social"> <ul> <li><a href="#"><img src="images/facebook.png" alt=""></a></li> <li><a href="#"><img src="images/twitter.png" alt=""></a></li> <li><a href="#"><img src="images/gmail.png" alt=""></a></li> </ul> </div> <span>Designed by Filip Glišović ©2023. - All rights reserved.</span> </section> </body> </html> 2 Quote Link to comment Share on other sites More sharing options...
DaVinc1 Posted July 5, 2023 Author Share Posted July 5, 2023 Thank you soo much! I know I am coming off as spoiled and rude here, and I am so sorry for that, but is there a way to implement it in my code since everything is working perfectly and I'm afraid to touch anything... I would totally understand if you can't/won't because you've done soo much already and thank you for that from the bottom of my heart. <?php $duration = 45; $cleanup = 0; $start = "10:00"; $end = "15:15"; 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:i")." h "; } return $slots; } ?> <?php if (isset($_POST['tIme']) || isset($_POST['tPrezime']) || isset($_POST['tTelefon']) || isset($_POST['tDatum']) || isset($_POST['tVreme'])) { $con = mysqli_connect('localhost', 'root', '','tpozdb'); $tIme = $_POST['tIme']; $tPrezime = $_POST['tPrezime']; $tTelefon = $_POST['tTelefon']; $tDatum = $_POST['tDatum']; $tVreme = $_POST['tVreme']; $sql = "INSERT INTO `tehnicki` (`Id`, `Ime`, `Prezime`, `Telefon`, `Datum`, `Vreme`) VALUES ('0', '$tIme', '$tPrezime', '$tTelefon', '$tDatum', '$tVreme')"; $rs = mysqli_query($con, $sql); } ?> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tehnički pregled</title> <link rel="stylesheet" href="css/style.css"> <link rel="icon" type="img/png" href="images/logo.png"> <meta name="author" content="Filip Glišović, glisovic01@gmail.com"> <!-- Rubik font --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Moment --> <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script> </head> <body> <section class="header"> <div class="navbar"> <div class="logo"> <img src="images/logo.png"> <span>Tehnički pregled</span> </div> <div class="nav-links" id="navLinks"> <ul> <li><a aria-current="page" href="index.php">Naslovna</a></li> <li><a href="galerija.php">Galerija</a></li> </ul> </div> </div> <div class="headline"> <h1>Tehnički pregled</h1> <p>Odaberite termin i zakažite tehnički pregled svog vozila brzo i jednostavno na našem sajtu.</p> <a href="#termin" class="btn">Zakažite termin</a> </div> </section> <div id="myModal" class="modal"> <div class="login-box"> <p>Zakazivanje termina</p> <form method="POST"> <div class="user-box"> <input name="tIme" type="text" required> <label>Ime</label> </div> <div class="user-box"> <input name="tPrezime" type="text" required> <label>Prezime</label> </div> <div class="user-box"> <input name="tTelefon" type="text" required> <label>Broj telefona</label> </div> <div class="user-box"> <input name="tDatum" type="date" onkeydown="return false" required readonly> </div> <div class="user-box"> <input name="tVreme" id="tVreme" type="text" onkeydown="return false" required readonly> </div> <a href="#" onclick="this.closest('form').submit();"> <span></span> <span></span> <span></span> <span></span> POŠALJI </a> </form> </div> </div> <section class="content" id="termin"> <?php $dt = new DateTime; $thisWeek = $dt->format('W'); $thisYear = $dt->format('o'); if (isset($_GET['year']) && $_GET['year'] >= $thisYear && isset($_GET['week']) && $_GET['week'] >= $thisWeek ) { $dt->setISODate($_GET['year'], $_GET['week']); } else { $dt->setISODate($dt->format('o'), $dt->format('W')); } $year = $dt->format('o'); $week = $dt->format('W'); ?> <a href="<?php echo $_SERVER['PHP_SELF'].'?week='.($week-1).'&year='.$year; ?>">Prethodna Nedelja</a> <a href="<?php echo $_SERVER['PHP_SELF'].'?week='.($week+1).'&year='.$year; ?>">Sledeća Nedelja</a> <table id="myTable"> <tr> <?php do { if($dt->format('d m Y') == date('d m Y')){ echo "<td id='danas'>" . $dt->format('d m Y') . "<br>" . "~~~" . "</td>\n"; }else{ echo "<td>" . $dt->format('d m Y') . "<br>" . "~~~" . "</td>\n"; } $dt->modify('+1 day'); } while ($week == $dt->format('W')); ?> </tr> <?php $timeslots = timeslots($duration, $cleanup, $start, $end); foreach($timeslots as $ts){ ?> <tr> <td><a href="#" onclick="MyFunction(0, '<?php echo $ts; ?>');return false;"><?php echo $ts; ?></a></td> <td><a href="#" onclick="MyFunction(1, '<?php echo $ts; ?>');return false;"><?php echo $ts; ?></a></td> <td><a href="#" onclick="MyFunction(2, '<?php echo $ts; ?>');return false;"><?php echo $ts; ?></a></td> <td><a href="#" onclick="MyFunction(3, '<?php echo $ts; ?>');return false;"><?php echo $ts; ?></a></td> <td><a href="#" onclick="MyFunction(4, '<?php echo $ts; ?>');return false;"><?php echo $ts; ?></a></td> <td><a href="#" onclick="MyFunction(5, '<?php echo $ts; ?>');return false;"><?php echo $ts; ?></a></td> <td><a href="#" onclick="MyFunction(6, '<?php echo $ts; ?>');return false;"><?php echo $ts; ?></a></td> </tr> <?php } ?> </table> <span>Odaberite željeno vreme.</span> </section> <section class="footer"> <div class="social"> <ul> <li><a href="#"><img src="images/facebook.png" alt=""></a></li> <li><a href="#"><img src="images/twitter.png" alt=""></a></li> <li><a href="#"><img src="images/gmail.png" alt=""></a></li> </ul> </div> <span>Designed by Filip Glišović ©2023. - All rights reserved.</span> </section> <script src="app.js"></script> <script type='text/javascript'> function MyFunction(col, time) { modal.style.display = "block"; const tbl = document.getElementById("myTable"); let dateValue = tbl.rows[0].cells[col].innerHTML; dateValue = dateValue.replace(/\D/g,''); dateValue = moment(dateValue,"DDMMYYYY").format("YYYY-MM-DD") let dateEl = document.getElementsByName("tDatum"); let timeEl = document.getElementsByName("tVreme"); dateEl[0].value = dateValue; timeEl[0].value = time; console.log('dateValue: ' + dateValue); console.log('Time: ' + time); } </script> </body> </html> Quote Link to comment Share on other sites More sharing options...
aarti789 Posted July 6, 2023 Share Posted July 6, 2023 Well, there are some error in your code and you need to update below sections of your code: <td> elements in the timeslots loop: <td><a href="#" onclick="MyFunction('<?php echo $ts; ?>'); return false;"><?php echo $ts; ?></a></td> <td><a href="#" onclick="MyFunction('<?php echo $ts; ?>'); return false;"><?php echo $ts; ?></a></td> <td><a href="#" onclick="MyFunction('<?php echo $ts; ?>'); return false;"><?php echo $ts; ?></a></td> <td><a href="#" onclick="MyFunction('<?php echo $ts; ?>'); return false;"><?php echo $ts; ?></a></td> <td><a href="#" onclick="MyFunction('<?php echo $ts; ?>'); return false;"><?php echo $ts; ?></a></td> <td><a href="#" onclick="MyFunction('<?php echo $ts; ?>'); return false;"><?php echo $ts; ?></a></td> <td><a href="#" onclick="MyFunction('<?php echo $ts; ?>'); return false;"><?php echo $ts; ?></a></td> I hope it will help you. Thanks Quote Link to comment Share on other sites More sharing options...
DaVinc1 Posted July 9, 2023 Author Share Posted July 9, 2023 I made some huge progress recently, all reserved and past timeslots are blocked, but then I came to the final error. When you click a certain timeslot, the time gets filled into time input in my modal perfectly, but the date that get's filled into date input is random and I can't figure out why. For example: Under the date 10.7.2023. you select any time (timeslot) and it get's filled into the time input perfectly, but the date that get's filled into date input is 14.7.2023. Please help 🥺 index.php <?php $duration = 45; $cleanup = 0; $start = "10:00"; $end = "14:30"; require_once 'functions.php'; require_once 'db_connection.php'; if ($_SERVER['REQUEST_METHOD'] === 'POST') { handleFormSubmission(); } $dt = getCurrentDateTime(); $year = getYearFromRequest($dt); $week = getWeekFromRequest($dt); ?> <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tehnički pregled</title> <link rel="stylesheet" href="css/style.css"> <link rel="icon" type="image/png" href="images/logo.png"> <meta name="author" content="Filip Glišović, glisovic01@gmail.com"> <!-- Rubik font --> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap" rel="stylesheet"> <!-- Moment --> <script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/moment.min.js"></script> </head> <body> <section class="header"> <div class="navbar"> <div class="logo"> <img src="images/logo.png" alt=""> <span>Tehnički pregled</span> </div> <div class="nav-links" id="navLinks"> <ul> <li><a aria-current="page" href="index.php">Naslovna</a></li> <li><a href="galerija.php">Galerija</a></li> </ul> </div> </div> <div class="headline"> <h1>Tehnički pregled</h1> <p>Odaberite termin i zakažite tehnički pregled svog vozila brzo i jednostavno na našem sajtu.</p> <a href="#termin" class="btn">Zakažite termin</a> </div> </section> <div id="myModal" class="modal"> <div class="login-box"> <p>Zakazivanje termina</p> <form method="POST"> <div class="user-box"> <input name="tIme" type="text" required> <label>Ime</label> </div> <div class="user-box"> <input name="tPrezime" type="text" required> <label>Prezime</label> </div> <div class="user-box"> <input name="tTelefon" type="text" required> <label>Broj telefona</label> </div> <div class="user-box"> <input name="tDatum" type="date" onkeydown="return false" required readonly> </div> <div class="user-box"> <input name="tVreme" id="tVreme" type="text" onkeydown="return false" required readonly> </div> <a href="#" onclick="this.closest('form').submit();alert('Uspešno ste zakazali termin!')"> <span></span> <span></span> <span></span> <span></span> POŠALJI </a> </form> </div> </div> <section class="content" id="termin"> <?php include 'time_table.php'; ?> <span>Odaberite željeno vreme.</span> <p>* Vremena su nedostupna/zauzeta.</p> </section> <section class="footer"> <div class="social"> <ul> <li><a href="#"><img src="images/facebook.png" alt=""></a></li> <li><a href="#"><img src="images/twitter.png" alt=""></a></li> <li><a href="#"><img src="images/gmail.png" alt=""></a></li> </ul> </div> <span>Designed by Filip Glišović ©2023. - All rights reserved.</span> </section> <script src="app.js"></script> </body> </html> functions.php <?php function timeslots($duration, $cleanup, $start, $end) { $startDateTime = new DateTime($start); $endDateTime = new DateTime($end); $interval = new DateInterval("PT" . $duration . "M"); $cleanupInterval = new DateInterval("PT" . $cleanup . "M"); $slots = array(); $currentDateTime = clone $startDateTime; while ($currentDateTime <= $endDateTime) { $slots[] = $currentDateTime->format("H:i") . " h"; $currentDateTime->add($interval)->add($cleanupInterval); } return $slots; } function checkTimeslotRegistration($timeslot, $date) { global $con; $query = "SELECT COUNT(*) FROM `tehnicki` WHERE `Vreme` = ? AND DATE(`Datum`) = ?"; $stmt = mysqli_prepare($con, $query); mysqli_stmt_bind_param($stmt, 'ss', $timeslot, $date); mysqli_stmt_execute($stmt); mysqli_stmt_bind_result($stmt, $countResult); mysqli_stmt_fetch($stmt); mysqli_stmt_close($stmt); $count = $countResult; return $count > 0; } function handleFormSubmission() { global $con; $tIme = $_POST['tIme'] ?? ''; $tPrezime = $_POST['tPrezime'] ?? ''; $tTelefon = $_POST['tTelefon'] ?? ''; $tDatum = $_POST['tDatum'] ?? ''; $tVreme = $_POST['tVreme'] ?? ''; $stmt = mysqli_prepare($con, "INSERT INTO `tehnicki` (`Id`, `Ime`, `Prezime`, `Telefon`, `Datum`, `Vreme`) VALUES (?, ?, ?, ?, ?, ?)"); mysqli_stmt_bind_param($stmt, 'isssss', $id, $tIme, $tPrezime, $tTelefon, $tDatum, $tVreme); $id = 0; if (mysqli_stmt_execute($stmt)) { mysqli_stmt_close($stmt); mysqli_close($con); header("Location: index.php"); exit(); } else { mysqli_stmt_close($stmt); mysqli_close($con); die("Error: " . mysqli_error($con)); } } function getCurrentDateTime() { $timezone = new DateTimeZone('Europe/Belgrade'); return new DateTime('now', $timezone); } function getYearFromRequest($dt) { $thisYear = $dt->format('o'); return isset($_GET['year']) && $_GET['year'] >= $thisYear ? $_GET['year'] : $thisYear; } function getWeekFromRequest($dt) { $thisWeek = $dt->format('W'); return isset($_GET['week']) && $_GET['week'] >= $thisWeek ? $_GET['week'] : $thisWeek; } ?> time_table.php <?php $dt = new DateTime(); $thisWeek = $dt->format('W'); $thisYear = $dt->format('o'); if (isset($_GET['year']) && $_GET['year'] >= $thisYear && isset($_GET['week']) && $_GET['week'] >= $thisWeek ) { $dt->setISODate($_GET['year'], $_GET['week']); } else { $dt->setISODate($dt->format('o'), $dt->format('W')); } $year = $dt->format('o'); $week = $dt->format('W'); ?> <a href="<?php echo $_SERVER['PHP_SELF'] . '?week=' . ($week - 1) . '&year=' . $year; ?>">Prethodna Nedelja</a> <a href="<?php echo $_SERVER['PHP_SELF'] . '?week=' . ($week + 1) . '&year=' . $year; ?>">Sledeća Nedelja</a> <table id="myTable"> <tr> <?php $weekStart = clone $dt; $weekStart->modify('Monday this week'); $weekEnd = clone $weekStart; $weekEnd->modify('+6 days'); $currentDate = clone $weekStart; while ($currentDate <= $weekEnd) { if ($currentDate->format('d m Y') == date('d m Y')) { echo "<td id='danas'>" . $currentDate->format('d.m.Y.') . "<br>~~~</td>"; } else { echo "<td>" . $currentDate->format('d.m.Y.') . "<br>~~~</td>"; } $currentDate->modify('+1 day'); } ?> </tr> <?php $timeslots = timeslots($duration, $cleanup, $start, $end); $colIndex = 0; $currentDateTime = new DateTime(); $currentDateTime->setTimezone(new DateTimeZone('Europe/Belgrade')); foreach ($timeslots as $timeslot) { echo "<tr>"; $currentDate = clone $weekStart; $endDate = clone $weekEnd; while ($currentDate <= $endDate) { $currentDateString = $currentDate->format('Y-m-d'); $timeslot = rtrim($timeslot, ' h'); $timeslotDateTime = DateTime::createFromFormat('H:i', $timeslot); if ($timeslotDateTime === false) { echo "Invalid timeslot format: " . $timeslot; continue; } $timeslotDateTime->setDate($currentDate->format('Y'), $currentDate->format('m'), $currentDate->format('d')); $formattedTimeslot = $timeslotDateTime->format("H:i"); $isRegistered = checkTimeslotRegistration($timeslot, $currentDateString); $isPast = $timeslotDateTime <= $currentDateTime; if ($isRegistered || $isPast) { echo "<td class='unavailable'>" . $timeslot . " h" . "</td>\n"; } else { echo "<td><a href='#' onclick=\"MyFunction(" . $colIndex . ", '" . $formattedTimeslot . "'); return false;\">" . $timeslot . " h" . "</a></td>\n"; } $currentDate->modify('+1 day'); } $colIndex++; echo "</tr>"; } ?> </table> app.js var now = new Date(); var y = now.getFullYear(); var m = now.getMonth() + 1; var d = now.getDate(); m = m < 10 ? "0" + m : m; d = d < 10 ? "0" + d : d; document.querySelector('input[name="tDatum"]').value = y + "-" + m + "-" + d; var modal = document.getElementById("myModal"); window.onclick = function (event) { if (event.target == modal) { modal.style.display = "none"; } }; function MyFunction(col, time) { const tbl = document.getElementById("myTable"); if (tbl.rows.length > 0 && col < tbl.rows[0].cells.length) { let dateValue = tbl.rows[0].cells[col].innerText; dateValue = dateValue.replace(/\D/g, ''); dateValue = moment(dateValue, "DDMMYYYY").format("YYYY-MM-DD"); let dateEl = document.getElementsByName("tDatum"); let timeEl = document.getElementsByName("tVreme"); dateEl[0].value = dateValue; timeEl[0].value = time; modal.style.display = "block"; } } Quote Link to comment Share on other sites More sharing options...
aarti789 Posted July 28, 2023 Share Posted July 28, 2023 Well, there are some error in function. Here is the correct code: <?php $duration = 45; $cleanup = 0; $start = "10:00"; $end = "15:15"; 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:i")." h "; } return $slots; } if ($_SERVER['REQUEST_METHOD'] === 'POST') { $con = mysqli_connect('localhost', 'root', '', 'tpozdb'); if (mysqli_connect_errno()) { die("Failed to connect to MySQL: " . mysqli_connect_error()); } $tIme = $_POST['tIme']; $tPrezime = $_POST['tPrezime']; $tTelefon = $_POST['tTelefon']; $tDatum = $_POST['tDatum']; $tVreme = $_POST['tVreme']; // Use prepared statement to prevent SQL injection $sql = "INSERT INTO `tehnicki` (`Id`, `Ime`, `Prezime`, `Telefon`, `Datum`, `Vreme`) VALUES (?, ?, ?, ?, ?, ?)"; $stmt = mysqli_prepare($con, $sql); mysqli_stmt_bind_param($stmt, "isssss", $id, $tIme, $tPrezime, $tTelefon, $tDatum, $tVreme); // Set the initial value of $id to 0 $id = 0; // Execute the prepared statement if (mysqli_stmt_execute($stmt)) { // Success echo "Appointment successfully scheduled."; } else { // Error handling echo "Error: " . mysqli_error($con); } // Close the statement and connection mysqli_stmt_close($stmt); mysqli_close($con); } ?> <!DOCTYPE html> <html lang="en"> <head> <!-- Rest of your head section... --> </head> <body> <!-- Your HTML content... --> <div id="myModal" class="modal"> <!-- Your modal content... --> </div> <section class="content" id="termin"> <?php // Your PHP code for displaying calendar and time slots goes here... ?> <table> <!-- Your table content... --> </table> <span>Odaberite željeno vreme.</span> </section> <script src="app.js"></script> </body> </html> Thanks Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.