pull hours and grey out time block?

techker · May 5, 2014

hey guys i wan't to make a type of booking calendar and was wondering what to look for in tutorial or examples?

i want to pull time slots from mysql lets say :10 to 3pm working with dan

so on the visual side i would like to make a time grid and grey out the time slots..

thx

trq · May 5, 2014

Tutorials?

css, html, js and php ought to cover it. Once you know those you wont need specific tutorials.

techker · May 5, 2014

Its the shading part im confused.

Shades between 10and 3pm

trq · May 5, 2014

That has what to do with MySQL?

techker · May 6, 2014

Well its part mysql cause the dates are in the database....

Barand · May 6, 2014

Here's a simple example pulling dates and times from a db an displaying in shaded areas in a table. CSS styles to denote whether a time period is "free" or "booked"

<?php
$db = new mysqli(HOST,USERNAME,PASSWORD,'test'); // use your credentials
error_reporting(-1);


/* 
THE TEST DATA 
+----+---------------------+---------------------+--------+
| id | startdate           | enddate             | client |
+----+---------------------+---------------------+--------+
|  1 | 2014-05-05 10:00:00 | 2014-05-05 15:00:00 | Dan    |
|  2 | 2014-05-05 16:00:00 | 2014-05-05 18:00:00 | Mary   |
|  3 | 2014-05-06 09:00:00 | 2014-05-06 11:00:00 | Harry  |
+----+---------------------+---------------------+--------+
*/

$sql = "SELECT DATE(startdate) as date
        , HOUR(startdate) as stime
        , HOUR(enddate) as etime
        , client
        FROM diary
        ORDER BY startdate, enddate";
$res = $db->query($sql);
// ARRAY OF THE DAILY TIME PERIODS
$periods = array_fill_keys(range(9,17), 'free');

$currentDate = '';
$tableData = '';
while (list($date, $stime, $etime, $client) = $res->fetch_row()) {
    // HAS DATE CHANGED?
    if ($date != $currentDate) {
        if ($currentDate) {
            // OUTPUT THE ROW FOR THE DAY
            $tableData .= "<tr><th>".date('D jS M', strtotime($currentDate))."</th>";
            foreach ($dayRow as $d) {
                $tableData .=  "<td class='$d'></td>";
            }
            $tableData .=  "</tr>\n";
        }
        $dayRow = $periods; // SET ROW ARRAY TO EMPTY TIME PERIODS ARRAY
        $currentDate = $date; //  SET CURRENT DATE TO NEW DATE VALUE
    }
    // SET TIME PERIODS AS BOOKED
    for ($h=$stime; $h<$etime; $h++) {
        $dayRow[$h] = 'booked';
    }
}
// OUTPUT DATA FOR THE FINAL DAY
$tableData .= "<tr><th>".date('D jS M', strtotime($currentDate))."</th>";
foreach ($dayRow as $d) {
    $tableData .=  "<td class='$d'></td>";
}
$tableData .=  "</tr>\n";

?>
<html>
<head>
<meta name="generator" content="PhpED 12.0 (Build 12010, 64bit)">
<title>sample diary</title>
<meta name="author" content="Barand">
<style type='text/css'>
table {
    border-collapse: collapse;
}
th {
    color: white;
    background-color: #888;
    padding: 5px;
}
td {
    height: 40px;
}
.free {
    background-color: #CFC;
}
.booked {
    background-color: #FCC;
}
</style>
</head>
<body>
    <table border='1'>
        <tr>
            <th>Day</th>
            <th>09-10</th>
            <th>10-11</th>
            <th>11-12</th>
            <th>12-13</th>
            <th>13-14</th>
            <th>14-15</th>
            <th>15-16</th>
            <th>16-17</th>
            <th>17-18</th>
        </tr>
        <?php echo $tableData; ?>
    </table>
</body>
</html>

output attached

techker · May 7, 2014

thx for the reply,think you can export your database?

i can't seem to be able to make it work..

Barand · May 7, 2014



DROP TABLE IF EXISTS `diary`;


CREATE TABLE `diary` (

  `id` int(11) NOT NULL AUTO_INCREMENT,

  `startdate` datetime DEFAULT NULL,

  `enddate` datetime DEFAULT NULL,

  `client` varchar(20) DEFAULT NULL,

  PRIMARY KEY (`id`)

);


INSERT INTO diary VALUES

(1, '2014-05-05 10:00:00', '2014-05-05 15:00:00', 'Dan'),

(2, '2014-05-05 16:00:00', '2014-05-05 18:00:00', 'Mary'),

(3, '2014-05-06 09:00:00', '2014-05-06 11:00:00', 'Harry');

techker · May 7, 2014

Great Thx!

techker · May 8, 2014

how can i show the client name?

Barand · May 8, 2014

Your original post was to show a different shading so I used the array for the CSS class names but you could always use the same array to store the client instead and set the class depending on whether or not there is a client name.

Barand · May 8, 2014

If it helps, I'd do like this

<?php

$db = new mysqli(HOST,USERNAME,PASSWORD,'test'); // use your credentials
error_reporting(-1);

/* 
THE TEST DATA 
+----+---------------------+---------------------+--------+
| id | startdate           | enddate             | client |
+----+---------------------+---------------------+--------+
|  1 | 2014-05-05 10:00:00 | 2014-05-05 15:00:00 | Dan    |
|  2 | 2014-05-05 16:00:00 | 2014-05-05 18:00:00 | Mary   |
|  3 | 2014-05-06 09:00:00 | 2014-05-06 11:00:00 | Harry  |
|  4 | 2014-05-06 15:00:00 | 2014-05-06 16:00:00 | Jane   |
+----+---------------------+---------------------+--------+
*/

$sql = "SELECT DATE(startdate) as date
        , HOUR(startdate) as stime
        , HOUR(enddate) as etime
        , client
        FROM diary
        ORDER BY startdate, enddate";
$res = $db->query($sql);
// ARRAY OF THE DAILY TIME PERIODS
$periods = array_fill_keys(range(9,17), '');

$currentDate = '';
$tableData = '';
while (list($date, $stime, $etime, $client) = $res->fetch_row()) {
    // HAS DATE CHANGED?
    if ($date != $currentDate) {
        if ($currentDate) {
            // OUTPUT THE ROW FOR THE DAY
            $tableData .= "<tr><th>".date('D jS M', strtotime($currentDate))."</th>";
            foreach ($dayRow as $name) {
                $cls = ($name=='') ? 'free' : 'booked';
                $tableData .=  "<td class='$cls'>$name</td>";
            }
            $tableData .=  "</tr>\n";
        }
        $dayRow = $periods; // SET ROW ARRAY TO EMPTY TIME PERIODS ARRAY
        $currentDate = $date; //  SET CURRENT DATE TO NEW DATE VALUE
    }
    // SET TIME PERIODS AS BOOKED
    for ($h=$stime, $first = 1; $h<$etime; $h++) {
        $dayRow[$h] = ($first) ? $client : ' '; // SHOW CLIENT IN FIRST CELL ONLY
        $first = 0;
    }
}
// OUTPUT DATA FOR THE FINAL DAY
$tableData .= "<tr><th>".date('D jS M', strtotime($currentDate))."</th>";
foreach ($dayRow as $name) {
    $cls = ($name=='') ? 'free' : 'booked';
    $tableData .=  "<td class='$cls'>$name</td>";
}
$tableData .=  "</tr>\n";

?>
<html>
<head>
<meta name="generator" content="PhpED 12.0 (Build 12010, 64bit)">
<title>sample diary</title>
<meta name="author" content="Barand">
<style type='text/css'>
table {
    border-collapse: collapse;
}
th {
    color: white;
    background-color: #888;
    padding: 5px;
}
td {
    height: 40px;
    padding: 5px;
}
.free {
    background-color: #CFC;
}
.booked {
    background-color: #FCC;
}
</style>
</head>
<body>
    <table border='1'>
        <tr>
            <th>Day</th>
            <th>09-10</th>
            <th>10-11</th>
            <th>11-12</th>
            <th>12-13</th>
            <th>13-14</th>
            <th>14-15</th>
            <th>15-16</th>
            <th>16-17</th>
            <th>17-18</th>
        </tr>
        <?php echo $tableData; ?>
    </table>

</body>
</html>

Giving this

Edited May 8, 2014 by Barand

techker · May 8, 2014

Ah.igot this now..lol thx for the help

Sign In

pull hours and grey out time block?

Recommended Posts

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