php sql calendar add events

tom7890 · January 16, 2015

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>

Barand · January 16, 2015

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

tom7890 · January 16, 2015

any help on how i can achieve what u have suggested above?

Barand · January 16, 2015

What does your data table/s look like?

Edited January 16, 2015 by Barand

tom7890 · January 16, 2015

data tables for the time slots?

Barand · January 16, 2015

yes, and bookings

tom7890 · January 16, 2015

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

tom7890 · January 16, 2015

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 January 17, 2015 by mac_gyver
code tags around posted code please

tom7890 · January 16, 2015

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 January 16, 2015 by tom7890

Strider64 · January 16, 2015

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

tom7890 · January 16, 2015

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?

Barand · January 16, 2015

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

tom7890 · January 16, 2015

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?

Barand · January 16, 2015

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"?

tom7890 · January 16, 2015

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 January 16, 2015 by tom7890

CroNiX · January 16, 2015

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 January 16, 2015 by CroNiX

tom7890 · January 16, 2015

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?

tom7890 · January 17, 2015

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 January 17, 2015 by tom7890

Barand · January 17, 2015

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

tom7890 · January 19, 2015

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.

tom7890 · January 19, 2015

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 January 19, 2015 by tom7890

Barand · January 19, 2015

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

Edited January 19, 2015 by Barand

tom7890 · January 19, 2015

thank you for ur example, this is not right for my target audience

tom7890 · January 19, 2015

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

Barand · January 19, 2015

There is an example of that in the code I posted

Sign In

php sql calendar add events

Recommended Posts

Link to comment

Share on other sites

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Posted Images

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information