Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Exercise Log Calendar Block for Vue

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Track your training with this exercise log calendar for Vue with Ark 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.

What stays local, and how do I wire it up?

Logs reset on reload; nothing is saved or sent, and it is example data, not advice. To keep them, send each add and remove from log and remove to your own API and start sessions from what it returns.

How does it look on a phone?

The table keeps its width and scrolls sideways inside a named region while the week total column stays pinned at the end; the day detail and the inline row stack underneath.