Live opening hours JS for Webflow

Custom code in page footer, setup guide below.

Read Docs

Clone in Webflow

Live Opening Hours Code Documentation

Introduction

The Live Opening Hours Code is a JavaScript code snippet that allows you to display the opening hours of a venue on your website. It dynamically updates the opening status based on the current time, making it easy for your visitors to know whether the venue is open, closed, or opening/closing soon.

Getting Started

To implement the Live Opening Hours Code on your website using Webflow or a similar site builder, follow the steps below:

Step 1: Create a New HTML Embed Element

In your Webflow project, locate the page where you want to display the opening hours. Add a new HTML Embed element to the desired section of the page. This element will contain the custom code for displaying the opening hours.

Step 2: Copy the Live Opening Hours Code

Copy the entire Live Opening Hours Code provided in the documentation above.

Step 3: Paste the Code into the HTML Embed Element

Paste the copied code into the HTML Embed element on your Webflow page. Ensure that the code is placed between the <script> tags.

Step 4: Customize the Code (Optional)

If you need to customize the opening hours for your specific venue, you can modify the schedule array within the code. Each object in the schedule array represents a day of the week and its corresponding opening and closing times. Update the open and close values to reflect the desired opening hours. You can also customize the openDisplay and closeDisplay values for each day.

Step 5: Save and Publish Your Changes

Save your changes in the Webflow editor and publish your website to make the opening hours code live on your site.

Code Explanation and Usage

The Live Opening Hours Code consists of two main parts: the schedule data and the displayOpeningHours function. Let's explore each part in detail:

1. Schedule Data

The schedule array contains the opening hours data for each day of the week. Each object in the array represents a day and has the following properties:

open: The opening time in 24-hour format (e.g., 15 for 3:00 PM).
close: The closing time in 24-hour format (e.g., 22 for 10:00 PM).
openDisplay: The opening time to be displayed (e.g., '3:00pm').
closeDisplay: The closing time to be displayed (e.g., '10:00pm').

Example:

javascriptCopy code

{
open: 15,
close: 22,
openDisplay: '3:00pm',
closeDisplay: '10:00pm'
}

To customize the opening hours, update the values in the schedule array according to your venue's schedule.

2. displayOpeningHours Function

The displayOpeningHours function is responsible for updating the opening status based on the current time. It performs the following tasks:

Calculates the current time in the Sydney timezone.
Determines the current day's schedule and the next open day.
Retrieves HTML elements for displaying the opening hours and status.
Checks the current time against the opening hours to determine the venue's status.
Updates the HTML elements with the appropriate information and styles.

Example usage:

javascriptCopy code

// Call the displayOpeningHours function when the window loads
window.onload = displayOpeningHours;

The displayOpeningHours function will be automatically executed when the window loads, ensuring that the opening hours are displayed correctly.

Conclusion

By following the steps outlined in this documentation and implementing the Live Opening Hours Code on your website using a site builder like Webflow, you can provide your visitors with real-time information about your venue's opening hours. Customize the code according to your specific schedule, and ensure that you save and publish your changes for the code to take effect on your live website.

Need help? 🤔

Get Help from ChatGPT

✨ Copy + Paste this Magic Prompt to get started ✨

Hello! I'm currently integrating the Live Opening Hours Code into my Webflow website, but I'm encountering some issues. I followed the documentation provided, but I need some additional guidance to resolve the problem. Could you please assist me?

Here are the steps I've taken so far:

I located the page on my Webflow project where I want to display the opening hours.
I added a new HTML Embed element to the desired section of the page. This HTML Embed element will contain the custom code for displaying the opening hours.
I copied the entire Live Opening Hours Code from the documentation.
I pasted the copied code into the HTML Embed element on my Webflow page, ensuring that it is placed between the <script> tags.
I saved my changes in the Webflow editor and published my website.

Despite following these steps, the opening hours are not displaying correctly on my website. I would greatly appreciate your assistance in troubleshooting this issue and getting the Live Opening Hours Code to function properly within my Webflow project.

Additionally, I have a few questions regarding the code and its customization:

How can I customize the opening hours for my specific venue using the schedule array?To customize the opening hours, you can modify the values in the schedule array provided in the code. Each object in the array represents a day of the week and its corresponding opening and closing times. Update the open and close values to reflect your desired opening hours. You can also customize the openDisplay and closeDisplay values for each day.
In the schedule array, which values should I update to reflect my desired opening hours?You should update the open and close values in the schedule array to reflect your desired opening hours. These values should be in a 24-hour format. For example, if your venue opens at 9:00 AM, you would set open: 9. If your venue closes at 10:00 PM, you would set close: 22.
Can I customize the text that is displayed for the opening and closing times? If so, how can I modify it?Yes, you can customize the text displayed for the opening and closing times. To modify the text, update the openDisplay and closeDisplay values in the schedule array. These values define the text that will be shown for the opening and closing times. For example, you can set openDisplay: '9:00am' and closeDisplay: '10:00pm' to display the times in a specific format.
Are there any other options for styling the opening status and background color? How can I customize the appearance to match my website's design?Yes, you can customize the styling of the opening status and background color. Within the code, you'll find different HTML elements that represent the opening hours and status. You can modify the styles of these elements using CSS. For example, you can update the color, borderColor, and backgroundColor properties to match your website's design.
How does the Live Opening Hours Code determine the current time in the Sydney timezone?The Live Opening Hours Code uses the Moment.js library to handle date and time calculations. It retrieves the current time in the visitor's timezone and then adjusts it to the Sydney timezone based on the offset. The offset takes into account daylight saving time, ensuring accurate opening hour calculations.
Can I display the opening hours for multiple locations using this code?Yes, you can display the opening hours for multiple locations by duplicating the HTML Embed element and customizing the code for each location. Make sure to update the schedule array and HTML element IDs for each location to avoid conflicts.
How often does the opening status update? Is it real-time?The opening status updates whenever the page is loaded or refreshed. It reflects the current time and updates accordingly. If a visitor remains on the page, the status will not automatically update in real-time. A page refresh is needed to see the updated status.
How can I add a message or notice when the venue is closed for holidays or special events?To add a message or notice when the venue is closed for holidays or special events, you can modify the code within the else condition of the displayOpeningHours function. You can update the text and styling of the htmlElementHours and htmlElementStatus elements to display a custom message indicating the closure.
Can I change the time zone to a different city or region?Yes, you can change the time zone to a different city or region by modifying the offset variable in the code. The offset value represents the number of hours ahead or behind the Sydney timezone. Adjust the offset according to the desired time zone. Note that the code is set to handle daylight saving time automatically for the Sydney timezone.
How can I change the language used for the opening status and time display?The code is currently set to display the opening status and time in English. If you wish to change the language, you can update the text within the innerHTML properties of the htmlElementHours and htmlElementStatus elements. Replace the English text with the desired language translation.
Can I modify the code to display the opening hours for multiple days at once, instead of just the current day?The current implementation of the code displays the opening hours for the current day only. If you wish to display the opening hours for multiple days at once, additional code modifications are required. This customization may require more advanced JavaScript programming skills.
Is there a way to hide the opening hours on specific pages or sections of my website?Yes, you can hide the opening hours on specific pages or sections of your website by modifying the CSS display property of the HTML element that contains the opening hours code. Set the display property to "none" to hide the element. You can apply this modification to specific pages or sections by targeting the element's CSS class or ID.

I hope this information helps! If you have any further questions or encounter any issues while implementing the Live Opening Hours Code in Webflow, please don't hesitate to ask. I'm here to assist you throughout the process!