ShopHours

A standalone web app to configure a shop's opening hours — day by day, time slot by time slot — with live status, validation and export.

Live demo: mariosenese.github.io/ShopHours

---

What it is

ShopHours is a client-side web application for setting up a business's opening hours. You open it, configure the week, and export the result in ready-to-use formats. No build step and no external dependencies — plain HTML, CSS and ES modules running in the browser. The configuration is saved in the browser (localStorage), so it persists across reloads until you change it.

Features

• Weekly hours with an open/closed toggle for every day
• Multiple time slots per day (up to three: morning / afternoon / evening), added and removed dynamically
• Presets to fill the whole week in one click (standard shop, restaurant, pharmacy, gym, office)
• Copy a day onto other days (all days / weekdays / weekend / a single day)
• Real-time validation — flags inverted times and overlapping slots
• Live status — shows whether the business is open right now and the next change
• Exceptions & holidays — special dates with custom labels
• Export to JSON (storage/API), Schema.org (SEO / Google rich results) and plain text (email / print)
• Accessibility — native type="time" inputs, ARIA labels, WCAG AA contrast, keyboard-friendly dialogs

Usage

The app uses ES modules, so it must be served over HTTP — opening index.html directly from the file system (file://) won't work, because browsers block module imports there.

Run it from a local server (recommended for development):

npx serve .
# or
python3 -m http.server 8000

Then open the address shown in the terminal.

Structure

ShopHours/
├── index.html          # entry point (loads js/main.js as a module)
├── css/                # stylesheets
├── js/
│   ├── main.js         # state, rendering, events, persistence
│   ├── utils.js        # pure helpers (clone, validation, export)
│   └── constants.js    # static data (days, presets, schema map)
├── LICENSE
├── NOTICE
├── package.json
└── README.md

Export formats

• JSON — the raw configuration, ready to store or send to an API
• Schema.org — OpeningHoursSpecification markup, so search engines can read your hours
• Plain text — one readable line per day, for emails or print

License

Apache License 2.0 © 2022-2026 Mario Senese.

Free to use and modify, including commercially, provided the copyright notice and authorship are kept and any changes to the files are stated. The "ShopHours" name is not licensed as a trademark.