Jump to content

php sql calendar add events


tom7890

Recommended Posts

I am working on a small project, creating a calendar based booking system which includes the following features: 1) A color coded key for Booked days, Available, Partly Booked, Off Days 2) Clickable days which open up a form with available time slots 3) When time slots selected another form which allows the user to enter details about the event and then book the day

I am using php, sql to complete the project. I am aware that there are scripts available online but i want to do this from scratch.

Stuck On
The code below is for a php calendar, above is what i need to achieve. Please can someone help me on how to complete this.

<?php
$monthNames = Array("January", "February", "March", "April", "May", "June", "July", 
"August", "September", "October", "November", "December");
?>

<?php
if (!isset($_REQUEST["month"])) $_REQUEST["month"] = date("n");
if (!isset($_REQUEST["year"])) $_REQUEST["year"] = date("Y");
?>

<?php
$cMonth = $_REQUEST["month"];
$cYear = $_REQUEST["year"];
 
$prev_year = $cYear;
$next_year = $cYear;
$prev_month = $cMonth-1;
$next_month = $cMonth+1;
 
if ($prev_month == 0 ) {
    $prev_month = 12;
    $prev_year = $cYear - 1;
}
if ($next_month == 13 ) {
    $next_month = 1;
    $next_year = $cYear + 1;
}
?>

<table width="400" border="5" align="center">
<tr align="center">
<td bgcolor="#999999" style="color:#FFFFFF">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" align="left">  <a href="<?php echo $_SERVER["PHP_SELF"] . "?month=". $prev_month . "&year=" . $prev_year; ?>" style="color:#FFFFFF">Previous</a></td>
<td width="50%" align="right"><a href="<?php echo $_SERVER["PHP_SELF"] . "?month=". $next_month . "&year=" . $next_year; ?>" style="color:#FFFFFF">Next</a>  </td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center">
<table width="100%" border="2" cellpadding="2" cellspacing="2">
<tr align="center">
<td colspan="7" bgcolor="#999999" style="color:#FFFFFF">
<strong> <?php echo $monthNames[$cMonth-1].' '.$cYear; ?> </strong>
</td>
</tr>
<tr>
<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>S</strong></td>
<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>M</strong></td>
<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>T</strong></td>
<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>W</strong></td>
<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>T</strong></td>
<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>F</strong></td>
<td align="center" bgcolor="#999999" style="color:#FFFFFF"><strong>S</strong></td>
</tr>


<?php 
$timestamp = mktime(0,0,0,$cMonth,1,$cYear);
$maxday = date("t",$timestamp);
$thismonth = getdate ($timestamp);
$startday = $thismonth['wday'];
for ($i=0; $i<($maxday+$startday); $i++) {
    if(($i % 7) == 0 ) echo "<tr> ";
    if($i < $startday) echo "<td></td> ";
    else echo "<td align='center' valign='middle' height='20px'>". ($i - $startday + 1) . "</td> ";
    if(($i % 7) == 6 ) echo "</tr> ";
}
?>
</table>
</td>
</tr>
</table>

Link to comment
Share on other sites

  • Replies 131
  • Created
  • Last Reply

Top Posters In This Topic

First recommendation is for you to use CSS styles EG

<style type="text/css">
table {
    border-collapse: collapse;
}
td.free {
    text-align: center;
    background-color: white;
    
}
td.booked {
    background-color: #FF8080;
}
</style>

When you move on to a new month, query your db for appointments in that month and store in an array, keyed by day number. Then it is easy to look up each day as you out put it in the table and give it the appropriate class name to style it.

 

Make each cell with a date clickable so you can display the form for that day (jquery is the easiest method).

Link to comment
Share on other sites

Bookings table 

id 

date 

start time

name

email

phone

comments 

 

Time slots table 

start time 

end time 

booked 

 

in the time slots table i want to have 30 mins slots per hour do i need to add them in the table?

 

<table width='400' border='0' cellpadding='2' cellspacing='0' id='booking'>
<tr>
<th width='150' align='left'>Start</th>
<th width='150' align='left'>End</th>
<th width='20' align='left'>Book</th> 
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>


<td>09:30:00</td>


<td>10:00:00</td>


<td><input data-val='09:30:00 - 10:00:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>10:00:00</td>


<td>10:30:00</td>


<td><input data-val='10:00:00 - 10:30:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>10:30:00</td>


<td>11:00:00</td>


<td><input data-val='10:30:00 - 11:00:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>11:00:00</td>


<td>11:30:00</td>


<td><input data-val='11:00:00 - 11:30:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>11:30:00</td>


<td>12:00:00</td>


<td><input data-val='11:30:00 - 12:00:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>12:00:00</td>


<td>12:30:00</td>


<td><input data-val='12:00:00 - 12:30:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>12:30:00</td>


<td>13:00:00</td>


<td><input data-val='12:30:00 - 13:00:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>13:00:00</td>


<td>13:30:00</td>


<td><input data-val='13:00:00 - 13:30:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>13:30:00</td>


<td>14:00:00</td>


<td><input data-val='13:30:00 - 14:00:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>14:00:00</td>


<td>14:30:00</td>


<td><input data-val='14:00:00 - 14:30:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>14:30:00</td>


<td>15:00:00</td>


<td><input data-val='14:30:00 - 15:00:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>15:00:00</td>


<td>15:30:00</td>


<td><input data-val='15:00:00 - 15:30:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>15:30:00</td>


<td>16:00:00</td>


<td><input data-val='15:30:00 - 16:00:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>16:00:00</td>


<td>16:30:00</td>


<td><input data-val='16:00:00 - 16:30:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>16:30:00</td>


<td>17:00:00</td>


<td><input data-val='16:30:00 - 17:00:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>17:00:00</td>


<td>17:30:00</td>


<td><input data-val='17:00:00 - 17:30:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>17:30:00</td>


<td>18:00:00</td>


<td><input data-val='17:30:00 - 18:00:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>18:00:00</td>


<td>18:30:00</td>


<td><input data-val='18:00:00 - 18:30:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>18:30:00</td>


<td>19:00:00</td>


<td><input data-val='18:30:00 - 19:00:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr>
<tr>


<td>19:00:00</td>


<td>19:30:00</td>


<td><input data-val='19:00:00 - 19:30:00' class='fields' type='checkbox'></td>


<td width='110'> </td>
</tr></table></div>
</body>
</html>
Edited by mac_gyver
code tags around posted code please
Link to comment
Share on other sites

You might want to consider using a form with individual time slots for the input, I have done something similar and can be seen by clicking on my signature link. Anyways, I have tried using contenteditable on tables in the past and it's a pain in the you-know-what. Loops can help you on in writing a form, I know this isn't exactly what you're talking about, but here is an example of what I'm talking about:

  <form class="appointmentBook" action="appointment.php" method="post">
    <fieldset class="appFieldSet">
      <legend class="appLegend"><?php echo $displayDate->format('F j, Y');  ?></legend>      
        <?php
        $counter = 0;
        foreach ( $data as $appBook) {
          $output = (object) $appBook;         
          echo '<input type="hidden" name="data[' . $counter . '][date]" value="' . $output->date . '">' . "\n";
          echo '<input type="hidden" name="data[' . $counter . '][time]" value="' . $output->time . '">' . "\n";
          echo '<input type="hidden" name="data[' . $counter . '][name]" value="' . $output->name . '">' . "\n";
          echo '<label class="appLabel">' . $output->time . '</label>' . "\n";
          echo '<input class="appText" type="text" name="data[' . $counter . '][info]" value="' . $output->info . '" ' . $readonly . '>' . "\n";
          $counter++;
        }
        /* Don't show the submit button if no one is logged in */
        if ($user) {      
          echo '<input type="submit" name="submit" value="Submit" class="appSubmitBtn">' . "\n";
        }
      ?>
    </fieldset>
  </form>

You can style forms to look like you want to in CSS and you can even make them look like tables if you so want.

 

HTH John 

Link to comment
Share on other sites

Use the <> button in the toolbar when posting code.

 

Your timeslot table should just define the daily timeslots. This then defines the times for your time booking form and by comparing these times with booked times on a day you know if there are spare unbooked slots.

 

Have a user table to store name, phone etc - don't repeat in every booking.

 

So you tables would look like this

post-3105-0-51468800-1421443049_thumb.png

Link to comment
Share on other sites

i meant easier for the user so they dont have to keep on clicking on the data and have a form come up, instead they can hover over see whats available and select the date. 

 

i dont mind either one will do. 


Edited by tom7890
Link to comment
Share on other sites

It would probably be much better for the user to be able to see the times available directly on the calendar within each day rather than having to hover over each day to see it. They just want to know what's available so they can book and appointment, right? It would also be a lot more user friendly to just have a form that pops up when clicking on a day (actually clicking on the available timeslot they want to book for) to create an appointment. The same popup can be used for all days, and you can grab the year/month/day/time they selected from the calendar depending on what they clicked on.

Edited by CroNiX
Link to comment
Share on other sites

can i use a jquery version on how to get clickable cells in the calendar like this 


<script>
        $(document).ready( function() {
            $(this).on("click", function(e) {
                alert( $(e.target).text());
            });
    </script>
 
 
how would i use this with my calendar code i have posted in the first post?
 
is there another way doing this?
Edited by tom7890
Link to comment
Share on other sites

This query will give the info you need for each date in the bookings table for the current year/month

SELECT b.date 
, SUM(IF(t.timeslot_id IS NULL,0,1)) as bookedcount
, free.freeslots
FROM booking b
    LEFT JOIN
    (
    SELECT
     date 
     , GROUP_CONCAT(DISTINCT TIME_FORMAT(x.start_time, '%H:%i') 
        ORDER BY start_time SEPARATOR ', ') as freeslots 
    FROM (
        SELECT DISTINCT b.date
        , t.timeslot_id
        , t.start_time
        FROM booking b
        CROSS JOIN timeslot t
        WHERE YEAR (b.date) = '2015' 
            AND MONTH(b.date) = 1
        ) as x
        LEFT JOIN booking b USING (date,timeslot_id)
    WHERE b.timeslot_id IS NULL
    GROUP BY date   
    ) as free USING (date)
    LEFT JOIN timeslot t USING (timeslot_id)
    WHERE YEAR (b.date) = '2015' 
        AND MONTH(b.date) = 1
GROUP BY b.date;

EG
+------------+-------------+---------------------------------------------+
| date       | bookedcount | freeslots                                   |
+------------+-------------+---------------------------------------------+
| 2015-01-19 |           7 | 09:00, 10:30, 11:30, 13:00, 13:30, 14:00,   |
|            |             | 15:30, 16:00, 16:30, 17:00, 17:30           |
+------------+-------------+---------------------------------------------+
| 2015-01-20 |           4 | 10:30, 11:00, 11:30, 12:00, 12:30, 13:00,   |
|            |             | 13:30, 14:00, 14:30, 15:00, 15:30, 16:30,   |
|            |             | 17:00, 17:30                                |
+------------+-------------+---------------------------------------------+
| 2015-01-21 |           3 | 09:00, 10:30, 11:00, 11:30, 12:00, 12:30,   |
|            |             | 13:00, 13:30, 14:00, 14:30, 15:00, 15:30,   |
|            |             | 16:30, 17:00, 17:30                         |
+------------+-------------+---------------------------------------------+
| 2015-01-23 |          18 | NULL                                        |
+------------+-------------+---------------------------------------------+

This will enable you to colour-code your days to show whether fully booked, partially booked or completely free by applying the appropriate class name. If you also apply a classname of, say, "date" for non-blank cells you can apply a click function to all ".date" cells which passes the cell's date to your booking form page

Link to comment
Share on other sites

Can anyone help me.. I have achieved what i wanted with the clickable dates but it is given me double dates i cant figure out why. my code is:



if(($i % 7) == 0 ) echo "<tr>";
if($i < $startday) echo "<td style='background-color:gray;'></td>";

else if(($i - $startday +1 ==$today) and ($cMonth == date("n")) and ($cYear

== date("Y"))) echo "<td id='timer.php?day=".($i - $startday +
1)."&month=$cMonth&year=$cYear' align='center' valign='middle' height='20px'

style='background-color:#F2054D;'>".($i - $startday + 1)."</td>";


else echo "<td id='timer.php?day=".($i - $startday +
1)."&month=$cMonth&year=$cYear' align='center' valign='middle' height='20px'
style='background-color:gray;'>".($i - $startday + 1)."</td>";
echo '<td align="center" valign="middle" height="80px"
width="80px"><a href="timeslots.html?date='.($i - $startday + 1).'-
'.$cMonth.'- '.$cYear.'">'. ($i - $startday + 1) . '</a>
<br>'.$result["title"].'</td>';


if(($i % 7) == 6 ) echo "</tr>";
}

?>

I think the error is in this code here



else echo "<td id='timer.php?day=".($i - $startday +

1)."&month=$cMonth&year=$cYear' align='center' valign='middle' height='20px'
style='background-color:gray;'>".($i - $startday + 1)."</td>";


echo '<td align="center" valign="middle" height="80px" width="80px"><a
href="timeslots.html?date='.($i - $startday + 1).'-'.$cMonth.'-
'.$cYear.'">'.
($i - $startday + 1) . '</a><br>'.$result["title"].'</td>';


if(($i % 7) == 6 ) echo "</tr>";
}
Edited by tom7890
Link to comment
Share on other sites

Here is my solution (uses the tables I suggested earlier in #12)

 

 

 

<?php
include("db_inc.php"); // defines DB credentials (HOST etc)
$db = new mysqli(HOST,USERNAME,PASSWORD,DATABASE);

function getBookings($db, DateTime $d)
{
    $currY = $d->format('Y');
    $currM = $d->format('n');
    $sql = "SELECT b.date 
            , SUM(IF(t.timeslot_id IS NULL,0,1)) as bookedcount
            , free.freeslots
            FROM booking b
                LEFT JOIN
                (
                SELECT
                 date 
                 , GROUP_CONCAT(DISTINCT TIME_FORMAT(x.start_time, '%H:%i') 
                    ORDER BY start_time SEPARATOR ', ') as freeslots 
                FROM (
                    SELECT DISTINCT b.date
                    , t.timeslot_id
                    , t.start_time
                    FROM booking b
                    CROSS JOIN timeslot t
                    WHERE YEAR (b.date) = $currY 
                        AND MONTH(b.date) = $currM
                    ) as x
                    LEFT JOIN booking b USING (date,timeslot_id)
                WHERE b.timeslot_id IS NULL
                GROUP BY date   
                ) as free USING (date)
                LEFT JOIN timeslot t USING (timeslot_id)
                WHERE YEAR (b.date) = $currY 
                    AND MONTH(b.date) = $currM
            GROUP BY b.date" ;
    $books = array();
    $res = $db->query($sql);
    while (list($dt,$tot,$free) = $res->fetch_row()) {
        $books[$dt] = array($tot, $free);
    }
    return $books;
}

function makeCalendar(mysqli $db, DateTime $currdate)
{
    $dateStart = new DateTime($currdate->format('Y-m-01'));
    $bookings = getBookings($db, $dateStart);
    
    $di = new DateInterval('P1M');
    $prevDate = clone $dateStart;
    $nextDate = clone $dateStart;
    $prev = $prevDate->sub($di)->format('Y-m-d');
    $next = $nextDate->add($di)->format('Y-m-d');
    
    $dateEnd = new DateTime($dateStart->format('Y-m-t'));
    $dateEnd->modify('+1 days');
    $dp = new DatePeriod($dateStart, new DateInterval('P1D'), $dateEnd);
    $calArray = array_fill(0,7,'');    // dates in the calendar row
    $clsArray = array_fill(0,7,'');    // cell classes in the row
    $idarray = array_fill(0,7,'');     // cell ids in the row
    $tit =  array_fill(0,7,'');        // titles (tooltips) for the row
    
    /*******************************************
    * Create the calendar headings
    ********************************************/
    
    echo "<table border='1'>";
    echo "<tr><th><a href='?date=$prev'>«</a></th>
        <th colspan='5'>" . $dateStart->format('F Y') . "</th>
        <th><a href='?date=$next'>»</a></th></tr>";
    $days = array('Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa');
    echo "<tr>";
    foreach ($days as $k=>$v) {
        $cls = ($k==0)||($k==6) ? "class=' day we'":"class='day'";
        echo "<th $cls>$v</th>";
    }
    echo "</tr>\n";
    
    /*******************************************
    * Create the calendar rows
    ********************************************/
    foreach ($dp as $d) {
        $now = $d == $currdate ? ' now':'';
        $dow = $d->format('w');
        $tit[$dow] = '';
        $idarray[$dow] = $d->format('Y-m-d');
        $calArray[$dow] = $d->format('j');
        $clsArray[$dow] = ($dow==0)||($dow==6) ? "class='we $now'":"class='day $now'";
        if (isset($bookings[$d->format('Y-m-d')])) {
            $tit[$dow] = wordwrap($bookings[$d->format('Y-m-d')][1],34);
            if ($bookings[$d->format('Y-m-d')][1])
                $clsArray[$dow] = "class='day partial $now'";
            else
                $clsArray[$dow] = "class='day full $now'";
        }
        if ($dow==6) {
            echo '<tr>';
            foreach ($calArray as $k=>$v) {
                $dcls = $v=='' ? "class='blank'" : $clsArray[$k];
                echo "<td title='{$tit[$k]}' id='{$idarray[$k]}' $dcls>$v</td>";
            }
            echo "</tr>\n";
            $calArray = array_fill(0,7,'');
            $clsArray = array_fill(0,7,'');
            $idarray = array_fill(0,7,'');
            $tit =  array_fill(0,7,'');
        }
    }
    if ($dow!= 6) {
        echo '<tr>';
        foreach ($calArray as $k=>$v) {
                $dcls = $v=='' ? "class='day blank'" : $clsArray[$k];
                echo "<td title='{$tit[$k]}' id='{$idarray[$k]}' $dcls>$v</td>";
            }
        echo "</tr>\n";
    }
    
    echo "</table>\n";
}



function bookingForm($db, DateTime $date)
{
    /*******************************************
    * Create the options for the user menu
    ********************************************/
    $userOpts = "<option value=''>- select user -</option>\n";
    $sql = "SELECT user_id, name
            FROM user
            ORDER BY name";
    $res = $db->query($sql);
    while (list($i, $n) = $res->fetch_row()) {
        $userOpts .= "<option value='$i'>$n</option>\n";
    }
    
    /*******************************************
    * Get the bookings for each of the day's 
    * timeslote
    ********************************************/
    $dt = $date->format('Y-m-d');
    $sql = "SELECT t.timeslot_id
            , TIME_FORMAT(start_time, '%H:%i')
            , TIME_FORMAT(end_time, '%H:%i')
            , booking_id
            , u.name
            , comments
            FROM timeslot t
                LEFT JOIN booking b 
                    ON t.timeslot_id = b.timeslot_id
                    AND b.date = '$dt'
                LEFT JOIN user u 
                    ON b.user_id = u.user_id
            ORDER BY t.start_time";
    $res = $db->query($sql);
    while (list($tid, $st, $et, $bid, $nm, $com) = $res->fetch_row()) {
        $cbox = $bid ? "<input type='checkbox' name='cancel' value='$bid'>":'';
        $cls  = $bid ?  '' : "class='we'";
        $user = $bid ? $nm : "<select name='user[$tid]'>$userOpts</select>";
        $dis  = $bid ? 'disabled' : '';
        
        echo "<tr>
            <td $cls>$st</td>
            <td $cls>$et</td>
            <td $cls>$user</td>
            <td $cls><input type='text' name='comment[$tid]' value='$com' size='60' $dis></td>
            <td $cls>$cbox</td>
            </tr>\n";
    }
}


//
// CHECK FOR CHANGE OF DATE
//
$currdate = isset($_GET['date']) ? 
                new DateTime($_GET['date']) : 
                new DateTime();


?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="PhpED 14.0 (Build 14039, 64bit)">
<title>Bookings Calendar</title>
<meta name="author" content="Barand">
<meta name="creation-date" content="01/18/2015">
<style type="text/css">
div.month {
    float: left;
}
div.form {
    float: left;
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid gray;
    min-width: 450px;
}
table {
    border-collapse: collapse;
    width: 100%;
}
th,td {
    font-family: sans-serif;
    font-size: 9pt;
    text-align: center;
    width:23px;
    height: 18px;
    border: 1px solid black;
    white-space: nowrap;
}
th {
    background-color: #999;
    color: white;
    padding: 5px;
}
th.we {
    background-color: #3A883A;
    color: white;
}
td.comment {
    background-color: #999;
    text-align: left;
    color: black;
    padding: 5px;
}
td {
    background-color: #C4E5C4;
}
td.day {
    /*width:23px;
    height: 15px;*/
    text-align: center;
    padding: 2px;
    border: 1px solid black;
    cursor: pointer;
}
td.blank {
    background-color: #FFF;
}
td.we {
    background-color: #CCC;
}
td.now {
    border: 4px solid #883A66;
    width: 19px;
    height: 11px;
    padding: 0;
}
td.full {
    background-color: red;
    color: white;
    font-weight: 600;
}
td.partial {
    background-color: yellow;
    color: black;
    font-weight: 600;
}
a {
    font-size: 12pt;
    color: white;
    text-decoration: none;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
    //********************************************
    // Create the on-click function for each
    // clickable cell (class = day)
    // to resubmit the page with clicked date
    //********************************************
    $().ready(function(){
        $(".day").click(function(){
            location.href="?date="+$(this).attr("id");
        })
    })
</script>
</head>
<body>
<h3>Bookings - <?= $currdate->format('F jS, Y')?></h3>
    <div class="month">
    <?php
        makeCalendar($db, $currdate);           // output the calendar
    ?>
    </div>
    <div class="form">
        <form action="cal_update.php" method="post">
        <table border="1">
            <tr>
                <th>Start<br>Time</th>
                <th>End<br>Time</th>
                <th>User</th>
                <th>Comments</th>
                <th>Cancel</th>
            </tr>
            <?php
                bookingForm($db, $currdate);    // output the form
            ?>
        </table><br>
        <input type="submit" name="btnSubmit" value="Update">
        </form>
    </div>
</body>
</html>

 

 

 

Yellow cells are partially booked, red cells fully booked, green have no bookings. Hovering over yellow shows the available slots.

 

Output attached

post-3105-0-04314400-1421682640_thumb.png

Edited by Barand
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.