shadcn.io is not affiliated with official shadcn/ui
Time Off Calendar Team Block for Vue
A four-week grid of Monday to Friday for a shift-scheduling company, with the avatars of people away in each day, a coverage row under every week, the thinnest week flagged and the reasons listed in plain words.
Installation
Overview
A team time-off calendar for Vue with Ark UI, for Bellwood, a shift-scheduling company. A split puts the copy and the reasons at the start and a framed grid at the end, divided by a hairline. The grid is a real table of four weeks (this week, next week, week 3, week 4) by Monday to Friday, with no dates, so it is never out of date. Each day holds the small avatars of the people away, and a coverage row under every week counts them ("2 away" or "All in"). Only the week with the fewest people in is flagged, and the header says which one and how many are in on its busiest day. Under the header the nine absences are listed in plain words: who, why and which days. On a phone the grid comes first and scrolls sideways if it must, and the reasons follow it. It's built from Table, Avatar Group, Badge, Avatar and Guides, with your theme's tokens for every colour. For a team page, a manager's view or a staffing page. The people and the absences are invented.
FAQ
How do I change who is away?
Edit ABSENCES at the top of the file: each entry is a name, a reason, a week (0 for this week) and the first and last day (from and to, 0 for Monday). STAFF is how many people are on the rota in all. The grid, the coverage counts, the flag and the reasons list are all worked out from ABSENCES.
Why are there no dates?
The four weeks are always the coming four, so labelling them "This week", "Next week", "Week 3" and "Week 4" is true on any day. Add dates by computing them from the current Monday in the browser after the page loads; the table doesn't need them to work.
How is the flagged week chosen?
It is the week with the most people away on any one day, so the fewest people in. In the example that is Week 3, with 3 of 12 away on its busiest days, and only that week carries the "Fewest in" badge. A tie goes to the earlier week.
Is it a real table, and how does the keyboard work?
Yes: a table with a name, weeks as row headers and days as column headers. The avatars are decoration; each day also carries the names of the people away as text for screen readers ("No one away" when nobody is). It's a native table. Its scroll area is a labelled region that takes Tab, so the arrow keys can scroll the grid on a narrow screen.