shadcn.io is not affiliated with official shadcn/ui
Exercise Log Calendar Block for React
Four weeks of training as squares darker for longer sessions with muscle-group letters, a weekly total and its change at the end of each row, and an inline row to log a session.
Installation
Overview
Track your training with this exercise log calendar for React with Base UI. A hairline frame with a plus mark on each corner holds four weeks, 21 September to 18 October, as a table of seven days by four rows. Each day is a square, darker for longer sessions, with the muscle groups worked as letters (U upper body, L lower body, C core, R a rest day), and each row ends in the week's minutes and its change against the week before; the running week counts the days so far against the same days last week. Choosing a day, with the arrow keys or a press, lists its sessions, and on a past day or today an inline row, a Select for the muscle group, a NumberInput for minutes and a Log button, adds one and re-derives every total. Future days are locked. The table scrolls sideways on a phone with the totals pinned at the end, and the bands are ruled by Guides. For training diaries, coaching tools and any log read by the week.
FAQ
How do I load my own sessions?
Edit START: each session has a day, a muscle group (U, L or C), minutes and an id. The squares, the letters, the weekly totals and their changes are all worked out from that list and from the fixed "now" in AS_OF; BEFORE holds the minutes of the week before the first row.
What is the change at the end of a row?
The week's minutes minus the previous week's. For the running week the page compares the days so far with the same days of the week before, and says "so far", so a partial week does not look like a bad one.
What makes a day a rest day?
A past day with no sessions reads R and is drawn with a dashed outline. Logging a session on it replaces the R with the group's letter. A day holds up to three sessions.
How do I use it with the keyboard?
The 28 days are one radio group, so the arrow keys move between them and skip locked days. The inline row is a select, a number field and a button; a refused log (minutes outside 5 to 180, or a fourth session) is answered in the polite status line.