Thursday, 12 October
Europe/Lisbon
Available times light up one after another until one is chosen, the button spins through booking, and the slot locks in green before the demo resets.
The import and the props worth knowing about, in one place.
import { Calendar34 } from "@/components/beste/piece/calendar34";
<Calendar34
dayLabel="Thursday, 12 October"
timezone="Europe/Lisbon"
slots={[
"09:00",
"10:30",
"13:00",
"15:30"
]}
pickIndex={2}
/>Appointment picker with a timezone caption and a grid of time pills, one active and a few disabled.
Book a session
A week strip where the selection highlight glides to a new day, one of three time slots fills in, and a confirmed row with a check fades in before the flow resets.
Stacked block of scheduled slots with tone-colored left rails and a from-to mono time column.
Today's schedule card with left-ruled event rows colored by accent and a leading start-time column.