# Business hours

Show a weekly timetable and an open or closed status in the business’s time zone. Add split shifts, overnight opening and special dates without changing the code.

Version: 1.0.0
Page: https://tools.stuffonscreen.com/business-hours
Script: https://tools.stuffonscreen.com/widgets/v1.0.0/business-hours.js
Integrity: sha384-vsJuX8kW6H6h0dUpUrlGQUBi263Vt7sF1p6s+KTmFRY2Opgz9DlzTP78sTocOoOq
Self-host ZIP: https://tools.stuffonscreen.com/widgets/v1.0.0/business-hours.zip
Licence: https://tools.stuffonscreen.com/licence

## Install

```html
<script src="https://tools.stuffonscreen.com/widgets/v1.0.0/business-hours.js" defer></script>
<sos-business-hours data-config="{&quot;name&quot;:&quot;Corner Studio&quot;,&quot;timezone&quot;:&quot;Australia/Perth&quot;,&quot;mon&quot;:&quot;09:00-17:00&quot;,&quot;tue&quot;:&quot;09:00-17:00&quot;,&quot;wed&quot;:&quot;09:00-17:00&quot;,&quot;thu&quot;:&quot;09:00-19:00&quot;,&quot;fri&quot;:&quot;09:00-17:00&quot;,&quot;sat&quot;:&quot;10:00-14:00&quot;,&quot;sun&quot;:&quot;closed&quot;,&quot;exceptions&quot;:&quot;{}&quot;}"></sos-business-hours>
```

Keep the built-in visible credit (nofollow is allowed). The licence does not require a credit on exported files. Include scripts once per page.

## Configuration

The data-config attribute is a JSON object containing string values. When writing HTML, escape the JSON as an HTML attribute. Do not interpolate raw untrusted text. When creating an element in JavaScript, use element.setAttribute('data-config', JSON.stringify(config)).

- name: Business name. 
- timezone: Business time zone. IANA name, e.g. Australia/Perth or Europe/London. Daylight saving follows the browser’s time-zone database.
- mon: Monday. 
- tue: Tuesday. 
- wed: Wednesday. 
- thu: Thursday. 
- fri: Friday. 
- sat: Saturday. 
- sun: Sunday. 
- exceptions: Special dates. JSON dates and hours, e.g. {"2026-12-25":"closed"}. Leave {} if there are none.

Default configuration:

```json
{
  "name": "Corner Studio",
  "timezone": "Australia/Perth",
  "mon": "09:00-17:00",
  "tue": "09:00-17:00",
  "wed": "09:00-17:00",
  "thu": "09:00-19:00",
  "fri": "09:00-17:00",
  "sat": "10:00-14:00",
  "sun": "closed",
  "exceptions": "{}"
}
```

## Behaviour and limits

- Use 09:00-17:00, split periods such as 09:00-12:00,13:00-17:00, or closed. 00:00-24:00 means all day.
- Overnight periods such as 22:00-02:00 start on the listed day. A special-date override replaces that entire date, including any overnight carryover.
- Status updates every minute using the visitor’s device clock. Add public holidays yourself; this does not use a holiday database.
- Invalid configurations show an error instead of a partial result. Updating data-config rerenders the component.
- Styling is isolated with Shadow DOM. There are no tracking cookies, paid API calls or remote configuration requests.
- Browser JavaScript is required. Essential business/event information should also be in normal HTML for indexing and no-JS users.

Framework/CSP instructions: https://tools.stuffonscreen.com/docs/implementation.md