Open Hours Live · Documentation · Version 1.1
Open now, in the right time zone.
How to write the schedule, special days, time zones, status texts, layouts, the optional SEO data, and every setting. Free.
01
Start here.
Add it to your project. Open Open Hours Live on the Framer Marketplace, it’s free, and drop it on the page: in the footer, on the contact page, or next to a booking button.
Type your hours. Fill in Monday to Sunday, like 09:00–14:00, 17:00–20:30, or Closed. Add holidays in Special days.
Set the time zone. Write where the business is, like Europe/Madrid. The status is worked out there, whatever the visitor’s own time.
Make it yours. Pick a Layout, then set colours and fonts to match the site. Publish, and the status keeps itself up to date.
02
How it works.
Open Hours Live reads your weekly schedule and special days, checks the time where the business is, and shows a live status: Open now · closes at 16:00, Closes soon, or Closed · opens tomorrow at 13:00.
The status refreshes every 30 seconds and as soon as the visitor returns to the tab.
Everything runs in the page. No network requests, no API keys, nothing stored or sent anywhere.
On the Framer canvas the status is worked out once, with the time you open the project.
On the published site the status appears once the page has loaded in the visitor’s browser, so it’s never out of date from the moment the site was published.
| Monday | Closed |
|---|---|
| Tuesday | 13:00–16:00, 20:00–23:30 |
| Wednesday | 13:00–16:00, 20:00–23:30 |
| Thursday | 13:00–16:00, 20:00–23:30 |
| Friday | 13:00–16:00, 20:00–23:30 |
| Saturday | 13:00–16:00, 20:00–23:30 |
| Sunday | 13:00–16:30 |
Live component, computed in the venue’s time zone.
03
Schedule format.
One line per day. What you can write:
One shift
Split shift. Separate shifts with commas
The same, written other ways
12-hour times
Past midnight: open until 2 am the next day
Closed all day
Open all day
Dashes (– — -), to, until and till all work between times, with or without spaces.
A closing time earlier than the opening time runs into the next day. A Friday 20:00–02:00 keeps the bar open early on Saturday, and the status says so.
The day lines aren’t translated by Framer Localization, so a translator can’t break them. The way times are shown on the page still follows Time format and the site’s language.
If a line can’t be read, a dashed box on the canvas says which day and what it couldn’t read. It never shows on the published site.
04
Special days.
Holidays, events and one-off changes. Each one has:
As YYYY-MM-DD, like 2026-12-24.
Same format as the week, or Closed.
Christmas Day, Private event, Summer hours.
A special day replaces the usual hours for that date: in the status, in the Today line, and in the week table for the coming seven days, with its label under the hours.
With Full week, Compact week or Week strip, List special days shows the upcoming ones under the schedule, from today up to Days ahead (90 by default; 0 lists all of them). Past special days disappear on their own, so you can load a whole year at once.
If a special day is Closed but the day before has a shift past midnight, that late shift still finishes as planned.
05
Time zones.
Write the business’s time zone as an IANA name:
Europe/Madrid
Atlantic/Canary
Europe/London
Europe/Lisbon
Europe/Paris, Europe/Rome, Europe/Berlin
America/New_York
America/Mexico_City
A visitor in New York looking at a restaurant in Madrid sees whether it’s open in Madrid right now.
Summer and winter time are handled by the browser.
A name the browser doesn’t recognise falls back to the visitor’s own time, and the canvas shows a warning.
06
Status texts.
Open, more than Closes soon minutes left · Open now · closes at {time}
Open, within Closes soon minutes of closing · Closes soon · at {time}
Closed now, opens later today · Closed · opens at {time} today
Closed now, opens on another day · Closed · opens {day} at {time}
Open around the clock · Open 24 hours
Nothing in the next seven days · Closed
{time} is the closing or opening time, in your Time format.
{day} becomes tomorrow when it’s the next day, and the weekday otherwise, both in the site’s language: tomorrow, mañana, demain; Tuesday, martes, mardi.
Closes soon sets the minutes. 0 turns the warning off.
The status is always written out, never shown by colour alone.
07
Layouts
A pill with a coloured dot and the status. For the header, a hero or next to a reservation button.
The pill and one line with today’s hours: Today · 13:00–16:00, 20:00–23:30.
The status and a table with every day. Today’s row is highlighted. Upcoming special days are listed below.
Days with the same hours share a line: Tue–Sat 13:00–16:00, 20:00–23:30. For footers.
Seven days side by side, like the sign on a shop door, with each shift on its own line. Days wrap onto a new line when there isn’t room; Day width sets how narrow a day can get.
Status turns the pill on or off above Full week, Compact week and Week strip. Align puts everything on the left or in the centre. Week starts on Monday or Sunday. Day names writes Monday or Mon in the full table.
08
SEO
Google data adds your opening hours to the page’s code in schema.org format, the one Google reads for opening hours.
Business type. Local business, Restaurant, Café, Hotel, Shop, Law firm or Accountant.
Business name. As it appears on Google.
The weekly hours become openingHoursSpecification: days with the same hours share one entry, and a shift past midnight closes on the next day. Special days become specialOpeningHoursSpecification, with Closed written as opening and closing at 00:00.
Turn it on in one place only, usually the contact page. If your site, an SEO app or another component already adds LocalBusiness data, leave it off so Google doesn’t read two versions.
Off by default. Check the result with Google’s Rich Results Test after you publish.
09
Customize the look.
Colours
Open colour, Soon colour and Closed colour paint the dot. Turn on Colour text to paint the status text too, and check it still reads well on your background. Text and Muted text paint the table, with closed days in Muted text. Today row is the highlight behind today. Line colour draws the lines and the outline status. Status fill is the pill’s background.
Status
Status style: Filled (a pill with Status fill), Outline (a thin line) or Plain (just the dot and the text). Status radius rounds it: 999 makes a pill. Dot size sets the dot. Pulse adds a soft ring around the dot while open; visitors who prefer reduced motion see a still dot.
Card
Turn on Card to wrap everything in a card with its own background: Card colour, Card radius, Card padding, Card border (in Line colour) and Card shadow. Useful over photos and coloured sections.
Today
Today sets how today stands out in Full week, Compact week and Week strip. Fill puts the Today row colour behind it. Accent marks it with the status colour, green while open and red while closed, and sets it in bold.
Rows
Row radius rounds today’s highlight and the days of the Week strip. Row padding sets the height of every row. Lines draws a line under each row. Gap sets the space between the status, the table and the special days.
Type
Status font, Body font (days and hours) and Label font (special day labels, the Special hours title and the table headers).
Recipes
Compact week · Status style Plain · Status off · Today row transparent · Row padding 4 · Body font 14 px
Status only · Status style Outline · Dot size 6 · Status font 13 px · Pulse on
Full week · Lines on · Today row #F3F3F3 · Row radius 0 · Headers on · Google data on
Week strip · Today Accent · Status style Plain · Row radius 12 · Day width 112
Compact week · Card on · Card colour rgba(18,14,10,0.8) · Card border on · Status style Plain · Colour text on · Dark section colours
Status style Filled · Status fill rgba(255,255,255,0.08) · Text #FFFFFF · Muted text #A3A3A3 · Today row rgba(255,255,255,0.06) · Open colour #4ADE80
10
Settings reference.
In the order they appear in the property panel.
Layout
Status only, Status + today, Full week, Compact week or Week strip.
Left or Center.
Full week, Compact week and Week strip: show the pill above.
Week
Monday to Sunday — the hours for each day. See Schedule format.
Special days
Date, Hours, Label.
Full week, Compact week and Week strip.
How far ahead to list them. 0 lists all.
Time
IANA name, like Europe/Madrid.
24 hours, 12 hours or Site language.
Monday or Mon, in Full week.
Monday or Sunday.
Minutes before closing. 0 turns it off.
Text
Open text, Soon text, Opens today, Opens later — with {time} and {day}.
Closed text, 24 hours text.
Today text — Status + today, and the screen reader label for today in the Week strip.
Special title — above the list of special days.
Table name — the name screen readers give the table or the Week strip.
Headers, Day header, Hours header — Full week.
SEO
Google data — on or off.
Business type, Business name.
Style
Status style — Filled, Outline or Plain.
Open colour, Soon colour, Closed colour, Text, Muted text, Today row, Line colour, Status fill.
Colour text, Pulse, Dot size.
Row radius, Status radius, Row padding, Lines, Today (Fill or Accent), Day width (Week strip), Gap.
Card, Card colour, Card radius, Card padding, Card border, Card shadow.
Status font, Body font, Label font.
11
Languages
Status texts, labels and special day labels are properties, so Framer Localization translates them. Keep {time} and {day} in every language: Abierto · cierra a las {time}.
Day names, tomorrow, dates and times are written by the browser in the page’s language.
Day lines, dates and the time zone are never translated, so a translation can’t change your hours.
Time format on Site language uses each language’s habit: 1:00 PM in American English, 13:00 in Spanish.
12
Accessibility
The status is text, not only a coloured dot.
The status is a polite live region: when it changes (from open to closes soon, for example), screen readers hear it once, without moving focus. It isn’t announced on page load.
The full week is a real table with a name, column headers (hidden on screen unless Headers is on) and a header per row. Today’s row is marked as the current date.
Pulse stops for visitors who prefer reduced motion.
Check that Muted text and Colour text keep enough contrast with your background (4.5:1 for body text).
13
Troubleshooting
The time zone is missing or wrong. Use the business’s IANA name, like Europe/Madrid.
The line couldn’t be read. Look for the dashed warning on the canvas and check the separators: commas between shifts, a dash or to between times.
It should: 20:00–02:00 on Friday keeps Saturday open until 2:00. Don’t add 00:00–02:00 to Saturday as well.
The date must be YYYY-MM-DD, it must be today or later, and within Days ahead.
By design: it’s worked out in the visitor’s browser with their current time, never baked in when the site was published.
The canvas works it out once, when the project opens. The published site refreshes every 30 seconds.
Set Time format to 24 hours.
Google data is on in more than one place, or another tool adds them too. Keep one.
14
Updates
New versions are free and listed here. To update, insert the component again from the Marketplace page, which always has the latest version, and copy your settings across.
— Week strip layout, a Card with its own background, radius, padding, border and shadow, and an Accent style that marks today in the status colour.
— First release: live status in the business’s time zone, split shifts and hours past midnight, special days, four layouts, 12 and 24-hour times in the site’s language, optional schema.org data for Google, and full documentation.
15
Support and licence.
Open Hours Live is free.
Questions or a bug? Write to info@miguelrecio.es. A person replies within two business days (Mon–Fri, CET).
Use it in unlimited personal and client projects. Reselling or redistributing the component isn’t allowed.