Build a Current Day Highlighted Store Hours Display

July 17, 2013

One of our long-time clients at FliteHaus is getting a responsive makeover. While the brand and overall look will remain similar, I designed a new home page with the considerations required when building a responsive website.

As I was designing the new layout, I wanted to add an easy way for customers at the site to know very quickly whether the client’s office was open or not. At the very least, I wanted today’s hours to be front and center for both the desktop and the mobile device. With that in mind, this is what I wanted to accomplish in some way:

todays hours

This will be at the very top of the page – next to the logo – and display today’s hours.

this week's hours, today highlighted

This will be in the footer with today’s hours highlighted for easy spotting.

What We Hope to Achieve

What we would like to do, ideally, is to let the system decided what day of the week it is, correspond that with its numerical value (Monday=1, Tuesday=2, etc), and then grab the value for that key in a PHP array that matches this number. Luckily for us, PHP has a built in function that grabs dates – date() – and a date format – “N” – that provides the numerical equivalent for the day of the week.

Setting Up the Array

This should be pretty straight forward for anyone who’s even looked at PHP, but essentially we are assigning an array of values to a variable called $days.

PHP


$days = array(
    "1" => "Monday: 9am-5pm",
    "2" => "Tuesday: 9am-5pm",
    "3" => "Wednesday: 9am-3pm",
    "4" => "Thursday: 9am-12pm",
    "5" => "Friday: Closed"
);

In the next step, we’ll loop through this information, creating a list item for each and a special class of “today” when the number matches today’s number in PHP. Note here, that I’ve added keys to each of these (rather than let them be 0, 1, 2, etc) because the PHP date function starts with Monday being 1.

Count the Items and Loop Through

First we need to count the number of items in the array so our for loop will know when it’s done. Dynamically counting this gives us the flexibility to add Saturday/Sunday, but you could also just use the number 5 for the count.

PHP


    $count = count($days);

Now that we know the count of array items, we can loop through them and get this content on the page.

PHP


for ($i = 1; $i <= $count; $i++) {
		
    echo '<li class="';
    if(date("N") == $i){ echo " today"; }
    echo '">';

    echo $days[$i];

    echo '</li>';
}

As you can see, we’re starting with “$i = 1” and running through the loop until it hits the count. When we get to a value of $i where the array key is the same value as the numerical value for today, we add a class of “today”. We can then use this class to style the list item appropriately.

CSS


ul {
    background: #0073ad;
}
li {
    color: #fff;
}
li.today {
    color: #00b5cb;
}

That’s all there is to creating a listing of hours that highlights the current day of the week! As a bonus, having all that set up already makes it really easy to add the “Today’s Hours” feature up next to the logo.

PHP


$d = date("N");
echo '<p>Today\'s Hours: '.$days[$d].'</p>';

First, we set a variable ($d) with the value for the key we need to look up. Then we simply print the row in the array for that key to the page.

Wanna chat about this article or any others? Feel free to DM me or mention me on Twitter @marcusdburnette to start a conversation!

Leave a Reply

Your email address will not be published. Required fields are marked *