shadcn.io is not affiliated with official shadcn/ui
Shared Availability Calendar Block for Solid
A week of free-people counts by hour, Monday to Friday, with the best hour worked out, a readout of who is free and who is busy and why, and a hold you can place on an hour.
Installation
Overview
See when a whole team is free across offices, with this shared availability calendar for Solid with Ark UI. A hairline frame with a plus mark on each corner holds a heat table of Monday 19 to Friday 23 October by hour, 08:00 to 18:00 (UTC+1). Each cell is a button with the number of the six people who are free, on one of five foreground weights from empty to solid, so the digit and the weight say the same thing and no hue is used. The best hour is worked out from the typed busy hours and named above the table ("Best: Mon 14:00, 6 of 6") with a small word on its cell. Choose a cell with a click or the arrow keys, Home and End, and the readout at the end names the hour and lists the six people with a glyph and a word: free, or busy with the reason (in a meeting, lunch, focus time, out of office, visiting a customer). The outline Button "Hold this hour" marks the cell with a hatched square, and releases it again. The readout sits under the table on a phone. It's built from Button and Guides with a hand-built table, and a CSS entrance only. For distributed teams, rotas and anyone who needs one hour with everyone in it.
FAQ
How do I load real availability?
Each person in COLLEAGUES has one string per weekday, an hour per character from 08:00: a dot means free, and a letter says why not (m meeting, u lunch, f focus, o out of office, v visiting). Fill those from your calendar API; the counts, the five weights, the best hour and the readout are all worked out from them. reasonText turns a letter into words.
How is the best hour chosen?
It is the first cell, reading Monday to Friday and top to bottom, with the highest count of people free. When several hours tie, the earliest wins. It is labelled in the cell and above the table, so it does not rely on the weight alone.
Why are the cells weights and not colours?
A heat scale in hues fails for colour-blind readers and in a screenshot. Here five mixes of the foreground colour (empty, 9%, 20%, 38% and solid) carry the amount and every cell also shows the digit, so the table reads the same in light and dark and in print.
How do I use it with the keyboard?
The table is one tab stop. The arrow keys move between days and hours, Home and End go to the first and last hour of a day, and the chosen cell follows the focus. Each cell is a button named with its day and hour, how many are free, and whether it is the best hour or held. The polite status line repeats the count for the chosen hour.
What stays local, and how do I wire it up?
Everything. A hold only marks the cell in the page and says "Nobody was told"; nothing is reserved or sent, and a reload clears it. To make it real, send the held hour from hold to your calendar API, which should place a tentative event on each person's calendar. All times are UTC+1 and nothing is converted between offices.