Services
Opening Hours
Weekly schedule with live calendar dates and a real-time Open / Closed badge. Every day shows the actual date - “Monday • 28th April” - and the dates roll over at midnight automatically. The schedule is the source of truth for Pickup Scheduler, Cart, and the Order system, so keep it accurate and everything stays in sync.
One row per day, or all seven squeezed into a grid. Pick what fits the screen.
Switches to “Closed for orders” 20 minutes before closing - automatic, no config needed.
Available on all plans.
Four things worth knowing
Live order badge with a built-in cutoff
The badge reads “Open for orders” or “Closed for orders” and updates in real time. Orders cut off automatically 20 minutes before closing - no extra setup.
Holiday calendar for one-off closures
Tap a date in the Future Closed Days calendar to block it; tap again to unblock. Blocked dates show as “Closed” in the schedule, overriding normal hours. Only future dates are selectable. Saved to the backend on publish.
Today row highlight
Today’s row gets its own background colour so it stands out at a glance. Control it with highlightToday and todayHighlightColor.
Shared schedule across order components
Pickup Scheduler, Cart, and the Order system all read the same schedule. Edit here once - every connected component stays in sync after the next publish.
Find it, drop it, edit the schedule
Where to find itAdd it to any screen
- Component picker → Services → Opening Hours.
- Drop it on any business info or about screen.
- Display-only - no navigation props to wire up.
Before you publishThree things to check
- Edit hours in the opening-hours-schedule editor - one row per day, no manual prop entry.
- Mark holidays in the Future Closed Days calendar. Past dates are locked.
- Publish after any change so Pickup Scheduler and Cart pick it up.
Schedule, layout, and format
| Prop | Type | Default | Description |
|---|---|---|---|
schedule | opening-hours-schedule | Mon–Sun defaults | Weekly schedule - use the property panel editor. |
specialClosedDates | opening-hours-closed-dates | [] | One-off closed dates set via the calendar picker. |
title | string | ’Opening Hours’ | Section heading shown above the schedule. |
layout | select | ’list’ | list - one row per day. compact - 7-column grid. |
dayNameFormat | select | ’full’ | full (Monday) or short (Mon). |
timeFormat | select | ’24h’ | 12h (3:00 PM) or 24h (15:00). |
Make it yours
Every colour and visibility toggle below is yours to change. The defaults are a neutral starting point - adjust them to match the brand without touching anything else.
| Prop | Default | What it controls |
|---|---|---|
showTitle | true | Section heading visibility. |
showLiveIndicator | true | ”Open for orders” / “Closed for orders” badge. |
highlightToday | true | Today row highlight on / off. |
openIndicatorColor | #22C55E | ”Open for orders” badge colour. |
closedIndicatorColor | #EF4444 | ”Closed for orders” badge colour. |
closedColor | #EF4444 | Text colour for days marked closed. |
todayHighlightColor | #F0F9FF | Today row background colour. |
dayNameColor | #374151 | Day name label colour. |
timeColor | #1a1a1a | Opening time text colour. |
backgroundColor | #FFFFFF | Outer card background. |
cardBackgroundColor | #FFFFFF | Inner card background. |
Common mistakes to avoid
Publish after every change
Schedule edits and holiday blocks are saved to the backend on publish. Pickup Scheduler and Cart won’t see changes until you do.
Holiday calendar is for exceptions only
Use the weekly schedule toggle for days that are always closed. Reserve the calendar for one-offs - holidays, refurbishment days, special events.
The 20-min cutoff is always on
Orders stop 20 minutes before closing time. This is built in and cannot be disabled - factor it into the published closing time if it’s an issue.
Compact works best when space is tight
All seven days in one row. Good for business info screens that already have a lot going on. Use list when the schedule is the main focus.