Highlight with PHP and jQuery
Highlight today’s hours of operations with PHP and jQuery

The Problem and the Approach:

I recently worked on a website where I need to highlight the current day’s hours of operations. I couldn’t find any tutorials on this subject, so here you are. I used the approach using PHP and jQuery, knowing this would be the easiest since I would need to be using data off the server.

Decidedly, I set the HTML structure as an unordered list with each li class set to a day of the week (Sunday – Saturday) and printed results using PHP from the SQL table. Finally, jQuery uses the addClass to replace the class of any li element that matches today and highlights that element.

Without showing you my table where the times are stored, the concept is this: You need an open and close time for each day of the week, I set the open and close times to 00:00 if the store is closed that day. Additionally, I ensured the times are set up for the correct time zone and use 24-hour time format.

 

PHP Query from Table:

First, you need to pull the data from your table and assign it to variables for use later in the code. You can name your variables anything you want, but this was easiest for me.

<?php
$today = date('D'); // Gets current day of week and display as "Monday"

//Query the table
$query = mysql_query("SELECT * FROM hours"); //Select all data from table
while($row = mysql_fetch_array($query)){
//Get time from table and structure as 9:00am
$d0_o = date('g:ia',strtotime($row['d0_o'])); //Sun Open
$d0_c = date('g:ia',strtotime($row['d0_c'])); //Sun Close
$d1_o = date('g:ia',strtotime($row['d1_o'])); //Mon Open
$d1_c = date('g:ia',strtotime($row['d1_c'])); //Mon Close
$d2_o = date('g:ia',strtotime($row['d2_o'])); //Tues Open
$d2_c = date('g:ia',strtotime($row['d2_c'])); //Tues Close
$d3_o = date('g:ia',strtotime($row['d3_o'])); //Wed Open
$d3_c = date('g:ia',strtotime($row['d3_c'])); //Wed Close
$d4_o = date('g:ia',strtotime($row['d4_o'])); //Thu Open
$d4_c = date('g:ia',strtotime($row['d4_c'])); //Thu Close
$d5_o = date('g:ia',strtotime($row['d5_o'])); //Fri Open
$d5_c = date('g:ia',strtotime($row['d5_c'])); //Fri Close
$d6_o = date('g:ia',strtotime($row['d6_o'])); //Sat Open
$d6_c = date('g:ia',strtotime($row['d6_c'])); //Sat Close
?>

CSS:

You can embed this line of code into your pre-existing style sheet; it’s only this one line. You can modify your class name if needed.

<style type="text/css">
.highlight{ background-color: #6699CC; }
</style>

HTML and PHP:

<ul class='hours'>
<!-- Each Class reflects a day, the styling will change from jQuery -->
<li class='Sunday'> S: <?php print "$d0_o - $d0_c"; ?></li>
<li class='Monday'> M: <?php print "$d1_o - $d1_c"; ?> </li>
<li class='Tuesday'> T: <?php print "$d2_o - $d2_c"; ?> </li>
<li class='Wednesday'> W: <?php print "$d3_o - $d3_c"; ?> </li>
<li class='Thursday'> T: <?php print "$d4_o - $d4_c"; ?> <li>
<li class='Friday'> F: <?php print "$d5_o - $d5_c"; ?> </li>
<li class='Saturday'> S: <?php print "$d6_o - $d6_c"; ?> </li>
</ul>

If certain days are closed you can use an IF statement to replace the text inside the li elements. Example:

<?php 
if($d0_o == "00:00"){ print "Closed"; } else { print "d0_o - d0_c"; }
?>

jQuery:

<script language="javascript">
$(document).ready(function() {
//Switch PHP $today to highlight - Example: .Monday to .highlight
//When $today matches li class replace the date with highlight class for styling.
$('<?php print ".$today"; ?>').addClass('highlight');
});
</script>

 

That’s it. If you have any questions, leave a comment and I will help out.

Leave a Reply

Your email address will not be published.