README

Business Hours is a Statamic addon that gives you the option to easily create, manage and display business hours in a modern and stylish layout.

Features

Set opening and closing times for each day of the week separately.
Fields to indicate if you are currently open or closed
Conditionals to display a text only when you are open or closed
Comes unstyled, bring your own styling
Supports special dates e.g: holidays, company wide vacations etc
Use different time zones and languages
Beautiful & user-friendly settings screen for you, or your client
Localizable fields for easy translation in any language

How to Install

You can search for this addon in the Tools > Addons section of the Statamic control panel and click install, or run the following command from your project root:

composer require lucky-media/business-hours

How to Use

On your frontend you can make use of the business_hours tag to iterate through the hours.

{{ business_hours }}
  
  {{ weekday }}

  {{ closed }}

  {{ 24_hours }}

  {{ start_time }}
  
  {{ end_time }}

  {{ is_open }}

{{ /business_hours }}

Params:

weekday (string)
- Weekday label
closed (boolean)
- Is the business closed on this day
24_hours (boolean)
- Is the business working 24hrs on this day
start_time (string)
- What time does the business start on this day
end_time (string)
- What time does the business end on this day
is_open (boolean)
- Is the business open at this moment

If you need to display the exeptions you can use the following:

{{ business_hours:exception }}

 {{ reason }}

 {{ start_date }}

 {{ end_date }}

{{ /business_hours:exception }}

Params:

reason (bard)
- Bard field to write down the reason for the exception
start_date (date)
- Start date of the exception
end_date (date)
- End date of the exception

Common Gotcha's

Make sure on your config/app.php you have the correct timezone.
You can either display times on 24 hour format or 12 hour format, you can change this on config/statamic/business_hours.php
Make sure on CP the start_time and end_time are entered in 24 hour format. There is also validation if the time is not in this format.

Examples

Check the example below and the code snippet. Please keep in mind that the examples use Tailwind CSS for styling.

<div>
    {{ business_hours:exception }}
        <div class="w-full p-5 mb-5 text-center text-white bg-red-600 rounded">
            {{ reason }}
        </div>
    {{ /business_hours:exception }}


    <div class="grid grid-cols-2 gap-4">
        {{ business_hours }}
            <p class="{{ is_past ?= 'line-through opacity-60' }}">
                {{ weekday }}
            </p>

            <p>
                {{ if closed }}
                    <span class="p-2 text-xs text-white uppercase bg-red-500 rounded">closed</span>
                {{ /if }}

                {{ if !closed and !24_hours }}
                    <span class="{{ is_past ?= 'line-through opacity-60' }}">
                        {{ start_time }} - {{ end_time }}
                    </span>
                {{ /if }}

                {{ if 24_hours }}
                    <span class="p-2 text-xs text-white uppercase bg-purple-500 rounded">
                        24hrs
                    </span>
                {{ /if }}

                {{ if is_open }}
                    <span class="p-2 text-xs text-white uppercase bg-green-500 rounded">
                        open now
                    </span>
                {{ /if }}
            </p>
        {{ /business_hours }}
    </div>
</div>

lucky-media / business-hours

Maintainers