Jump to content

pull hours and grey out time block?


techker

Recommended Posts

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

Link to comment
Share on other sites

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

 

post-3105-0-47732800-1399401178_thumb.png

Link to comment
Share on other sites


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');

Link to comment
Share on other sites

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

 

post-3105-0-42534000-1399555481_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.