techker Posted May 5, 2014 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/288250-pull-hours-and-grey-out-time-block/ Share on other sites More sharing options...
trq Posted May 5, 2014 Share Posted May 5, 2014 Tutorials? css, html, js and php ought to cover it. Once you know those you wont need specific tutorials. Quote Link to comment https://forums.phpfreaks.com/topic/288250-pull-hours-and-grey-out-time-block/#findComment-1478239 Share on other sites More sharing options...
techker Posted May 5, 2014 Author Share Posted May 5, 2014 Its the shading part im confused. Shades between 10and 3pm Quote Link to comment https://forums.phpfreaks.com/topic/288250-pull-hours-and-grey-out-time-block/#findComment-1478240 Share on other sites More sharing options...
trq Posted May 5, 2014 Share Posted May 5, 2014 That has what to do with MySQL? Quote Link to comment https://forums.phpfreaks.com/topic/288250-pull-hours-and-grey-out-time-block/#findComment-1478310 Share on other sites More sharing options...
techker Posted May 6, 2014 Author Share Posted May 6, 2014 Well its part mysql cause the dates are in the database.... Quote Link to comment https://forums.phpfreaks.com/topic/288250-pull-hours-and-grey-out-time-block/#findComment-1478371 Share on other sites More sharing options...
Barand Posted May 6, 2014 Share Posted 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 Quote Link to comment https://forums.phpfreaks.com/topic/288250-pull-hours-and-grey-out-time-block/#findComment-1478447 Share on other sites More sharing options...
techker Posted May 7, 2014 Author Share Posted May 7, 2014 thx for the reply,think you can export your database? i can't seem to be able to make it work.. Quote Link to comment https://forums.phpfreaks.com/topic/288250-pull-hours-and-grey-out-time-block/#findComment-1478594 Share on other sites More sharing options...
Barand Posted May 7, 2014 Share Posted 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'); Quote Link to comment https://forums.phpfreaks.com/topic/288250-pull-hours-and-grey-out-time-block/#findComment-1478598 Share on other sites More sharing options...
techker Posted May 7, 2014 Author Share Posted May 7, 2014 Great Thx! Quote Link to comment https://forums.phpfreaks.com/topic/288250-pull-hours-and-grey-out-time-block/#findComment-1478600 Share on other sites More sharing options...
techker Posted May 8, 2014 Author Share Posted May 8, 2014 how can i show the client name? Quote Link to comment https://forums.phpfreaks.com/topic/288250-pull-hours-and-grey-out-time-block/#findComment-1478708 Share on other sites More sharing options...
Barand Posted May 8, 2014 Share Posted 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. Quote Link to comment https://forums.phpfreaks.com/topic/288250-pull-hours-and-grey-out-time-block/#findComment-1478715 Share on other sites More sharing options...
Barand Posted May 8, 2014 Share Posted May 8, 2014 (edited) 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 Quote Link to comment https://forums.phpfreaks.com/topic/288250-pull-hours-and-grey-out-time-block/#findComment-1478724 Share on other sites More sharing options...
techker Posted May 8, 2014 Author Share Posted May 8, 2014 Ah.igot this now..lol thx for the help Quote Link to comment https://forums.phpfreaks.com/topic/288250-pull-hours-and-grey-out-time-block/#findComment-1478745 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.