Jump to content


Photo

pull hours and grey out time block?


  • Please log in to reply
12 replies to this topic

#1 techker

techker

    Advanced Member

  • Members
  • PipPipPip
  • 690 posts

Posted 05 May 2014 - 06:34 AM

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



#2 trq

trq

    Advanced Member

  • Administrators
  • 31,016 posts
  • LocationSydney, Australia.

Posted 05 May 2014 - 09:32 AM

Tutorials?

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

http://thorpesystems.com | http://proemframework.org | http://github.com/trq

SmtpCatcher - A very simple mock sendmail useful for testing PHP mail scripts.
OPM - My Linux package manager.


#3 techker

techker

    Advanced Member

  • Members
  • PipPipPip
  • 690 posts

Posted 05 May 2014 - 09:38 AM

Its the shading part im confused.

Shades between 10and 3pm

#4 trq

trq

    Advanced Member

  • Administrators
  • 31,016 posts
  • LocationSydney, Australia.

Posted 05 May 2014 - 05:56 PM

That has what to do with MySQL?

http://thorpesystems.com | http://proemframework.org | http://github.com/trq

SmtpCatcher - A very simple mock sendmail useful for testing PHP mail scripts.
OPM - My Linux package manager.


#5 techker

techker

    Advanced Member

  • Members
  • PipPipPip
  • 690 posts

Posted 06 May 2014 - 08:40 AM

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

#6 Barand

Barand

    Sen . ( ile || sei )

  • Gurus
  • 14,361 posts
  • LocationCheshire, UK

Posted 06 May 2014 - 01:33 PM

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

 

Attached Files


moon.png

|baaGrid| easy data tables - and more
|baaChart| easy line, column and pie charts
|baaSelect| generate js and php code for dynamic linked dropdowns

 


#7 techker

techker

    Advanced Member

  • Members
  • PipPipPip
  • 690 posts

Posted 07 May 2014 - 11:58 AM

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

 

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



#8 Barand

Barand

    Sen . ( ile || sei )

  • Gurus
  • 14,361 posts
  • LocationCheshire, UK

Posted 07 May 2014 - 12:29 PM

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


moon.png

|baaGrid| easy data tables - and more
|baaChart| easy line, column and pie charts
|baaSelect| generate js and php code for dynamic linked dropdowns

 


#9 techker

techker

    Advanced Member

  • Members
  • PipPipPip
  • 690 posts

Posted 07 May 2014 - 12:33 PM

Great Thx!



#10 techker

techker

    Advanced Member

  • Members
  • PipPipPip
  • 690 posts

Posted 08 May 2014 - 06:41 AM

how can i show the client name?



#11 Barand

Barand

    Sen . ( ile || sei )

  • Gurus
  • 14,361 posts
  • LocationCheshire, UK

Posted 08 May 2014 - 07:39 AM

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.


moon.png

|baaGrid| easy data tables - and more
|baaChart| easy line, column and pie charts
|baaSelect| generate js and php code for dynamic linked dropdowns

 


#12 Barand

Barand

    Sen . ( ile || sei )

  • Gurus
  • 14,361 posts
  • LocationCheshire, UK

Posted 08 May 2014 - 08:22 AM

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 : '&nbsp;'; // 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

 

Attached Files


Edited by Barand, 08 May 2014 - 08:24 AM.

moon.png

|baaGrid| easy data tables - and more
|baaChart| easy line, column and pie charts
|baaSelect| generate js and php code for dynamic linked dropdowns

 


#13 techker

techker

    Advanced Member

  • Members
  • PipPipPip
  • 690 posts

Posted 08 May 2014 - 09:01 AM

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






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime

AlphaBit.com