Opening hours

A shop's weekly hours in one quiet row — « Open now · closes at 5 pm » and today's hours — that unfolds into the whole week, today highlighted.

Web · ✓Mobile · n/aBureau · ✓BêtaAffichage de données

import { OpeningHours } from "@krizaka/ui/opening-hours";

Open nowCloses at 5 pm8 am – 12 pm, 1 pm – 5 pm

Web uniquement — React, depuis @krizaka/ui/opening-hours. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. Used by Akinaza.

Quand l’utiliser

A shop's page or a place's card: when it is open now, and the week for whoever wants it.

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { OpeningHours } from "@krizaka/ui/opening-hours";

Open now, closing at 5 pm, with the week unfolded and Tuesday marked.

Open nowCloses at 5 pm8 am – 12 pm, 1 pm – 5 pm

The weekly hours in one row — open now, closes at… — that unfolds into the week, today highlighted.

Prop	Type	Défaut	Description
`days`requis	`readonly OpeningDay[]`	—	The week, in reading order.
`label`requis	`string`	—	The name of the list (`Hours`), passed translated.
`status`requis	`OpeningStatus`	—	Open or closed right now, in words.
`today`	`string`	—	The id of today's day: its row is marked (`aria-current="date"`) and its hours show on the closed row.

A native details: the summary is the one control, named by the status, the detail and label.
Today's row is aria-current="date"; the status dot is decorative, the words say open or closed.

Touches	Action
`Enter or Space`	Unfolds or folds the week (a native disclosure).

Compute status from the hours, the shop's time zone and the current time on the server; the block only lays it out.
Pass each day's hours already formatted, with your word for closed when there are none (Closed).
Name today (today) so its row is marked; the closed row then shows today's hours on a wide screen.
Keep the row collapsed on a phone: the week is one tap away.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub