shadcn.io is not affiliated with official shadcn/ui
Rental Availability Calendar Block for Vue
Four holiday units by 14 nights with booked stays drawn as bars, a nights box that tints every free window that fits, the cheapest stay in each listed with its price, and a Held bar.
Installation
Overview
Find the gap that fits a guest, with this rental availability calendar for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a table of four units by the 14 nights from Friday 16 October. Each booked stay is a hatched bar across its nights with the guest's initials and "4 nights", and under each unit's name sit its weekday and weekend rates. Say how many nights (1 to 7) and press Find stays, the Shine Button: every free window that is long enough is tinted on the board, and the cheapest stay inside each is listed with its dates and price ("Cottage, Tue 20 to Fri 23 Oct, 3 nights, £480"). Hold puts a solid Held bar on the board and greys the stays that would overlap it; pressing Hold again releases it. When nothing fits an Empty state keeps the list's height. The table scrolls sideways under the unit names on a phone. The bands are ruled by Guides. It's built from Input, Button, Shine Button, Empty and Guides plus a native table, with a CSS entrance only. For channel managers, holiday lets and any inventory sold by the night.
FAQ
How do I fill it with my units and stays?
Edit UNITS: each has a name, a week and a weekend rate per night in cents (Friday and Saturday are the weekend) and booked stays as "first night|nights|initials", where the first night is counted from FIRST_NIGHT. The board has 14 nights; change NIGHTS for more. The free windows, the tint, the prices and the list are all worked out from that.
Why does it list one stay per window?
A free window of seven nights holds five different three-night stays, so the list shows the cheapest of them for each window (the earliest if two cost the same). The whole window is tinted on the board, so you can see the other choices. Money is summed in integer cents from each night's rate.
What does Hold do?
It places a Held bar on that unit's nights and greys any other stay that would share a night with it. Pressing Hold again, now labelled Held, releases it. Nothing is booked or sent; to make it real, post the hold from the handler and add the stay to booked from the response.
Is the board accessible?
It is a table with a caption, column heads for each night and a row head for each unit. Every cell says what it is in text for a screen reader: Free, Free and fits, Booked, or Held. The tint and the bars are never the only signal. The status line is polite.