Jump to content
tom7890

php sql calendar add events

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>

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

What does your data table/s look like?

Edited by Barand

Share this post


Link to post
Share on other sites

i havent yet done the time slots and bookings tables. 

I will do them now and show u wen im done to get furthur help if u dont mind 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

i have amended my above post for the time slots html and all database tables are now complete. 

 

what would be the next step?

 

how do i make the clickable date cells?

Edited by tom7890

Share this post


Link to post
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 

Share this post


Link to post
Share on other sites

hiya, 

 

i was just thinking would it be better and easier to implement this 

 

hover over a date and it display time available, then click on the date and it will tak you to booking form??

 

can anyone help me implement this?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

okay i have taken that on board. 

 

please can you guide me on how to make the date cells clickable or how to hover over them to show the available time slots from the sql database?

Share this post


Link to post
Share on other sites

hiya, 

 

i was just thinking would it be better and easier to implement this 

 

hover over a date and it display time available, then click on the date and it will tak you to booking form??

 

can anyone help me implement this?

 

What makes you think that would be "easier"?

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

thanks Cronix for the advice, i will stick to the click and have a pop up form. 

 

im not too sure on how to code this, are u able to suggest anything to help me?

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
 




 


Hi thanks,  what im trying to do is firstly make all the dates on the calender clickable.. secondly once any day is selected it opens up a form. The form I have created in sql database oredi. But im stuck on how to accomplish this.


Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

can anyone tell me how i could possibly get a my current date highlighted on the calendar? 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

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.