Time Off Calendar Team Block for React

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.

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.

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.

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.

The grid keeps a minimum width and its area scrolls sideways, with the week column first. The header comes first, then the grid, then the reasons list, so the reasons sit under the grid as they do under the header on a desktop.