shadcn.io is not affiliated with official shadcn/ui
Parking Reservation Calendar Block for Vue
A plan of 24 bays per level where a bay can be picked only if it is free on every weekday you tick, with a derived count, a type filter and a summary that totals the days in cents.
Installation
Overview
Reserve a parking space for several days at once, with this parking reservation calendar for Vue with Ark UI. A hairline frame with a plus mark on each corner holds the plan of a garage level, 24 bays, beside a summary. Tick the weekdays of 19 to 23 October you will be in and choose the level in a Native Select: a bay can be picked only if it is free on all of those days, so the others are hatched and say which day they are taken ("Taken Tue"). The count is worked out from the data ("12 bays free on all 3 days"), a filter narrows the plan to standard, EV charging or accessible bays, and each bay carries a shape and a word for its type so it never relies on color. The bays are one radio group, so the arrow keys move between them. The summary at the end names the bay, its type, the days and the total in pounds at the daily rate, and the Shine Button reserves it with a receipt and Undo. The bands are ruled by Guides. It's built from Native Select, Button, Shine Button and Guides plus native radios and checkboxes, with a CSS entrance only. For office blocks, campuses and any shared car park.
FAQ
How do I fill it with my bays?
Edit B1_LINES and B2_LINES (one per level, add more levels in LEVELS): each bay is "number|kind|days", where the kind is S, E or A and the days are the digits of the weekdays it is taken on, Monday being 0. WEEKDAYS sets the five days and dailyOf the daily rate per kind in cents. The free test, the count and the totals follow.
Why can I not pick some bays?
A bay is only offered when it is free on every day you ticked, which is the point of the block: a bay taken on Wednesday cannot be your bay for Tuesday to Thursday. Those bays stay in the plan, hatched, and say which day is taken. Untick a day and they come back.
Why can I not untick the last day?
A reservation needs at least one day, so the last ticked day stays on and the status line says so. The days lock while a reservation is held, and Undo unlocks them.
Is the plan accessible?
The bays are a native radio group with a legend, and a bay that is not free is marked as unavailable. Each bay's name is its number, its type word and whether it is free or which day it is taken. The type is a shape and a word, never a color. The status line is polite.