Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Medication Tracker Calendar Block for Vue

Today's doses for five medicines by four times of day as checkboxes, with missed doses worked out from the clock, fourteen adherence dots each and a refill date that moves as you tick.

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

Keep today's doses in view with this medication tracker calendar for Vue with Ark UI. A hairline frame with a plus mark on each corner opens with a strip of three counts, taken, missed and still due, and a table of five medicines by four times of day: morning 08:00, midday 13:00, evening 18:00 and night 22:00. Each dose due is a Checkbox; a dose whose time has passed before the fixed "now", Wednesday 14 October 09:30, and is still unticked reads "Missed", worked out from the clock time and the ticks. Every medicine has fourteen adherence dots and a refill date worked out from the pills left over the doses a day, which moves when you tick a dose, with a Badge saying "Refill soon" within seven days. On a phone each medicine becomes a card with its doses and times. The bands are ruled by Guides. The schedule is yours to set; this is example data, not medical advice. For pill organisers, care apps and any schedule that ends in a refill.

FAQ

How do I set the schedule?

Edit MEDS: each has a name, the times of day it is taken, the pills left at the fixed "now" and fourteen adherence marks. TIMES holds the four times of day and their clock times. The counts, the missed doses and the refill dates are derived; nothing is typed twice.

How is a dose missed?

A dose is missed when its clock time is earlier than the time in AS_OF and it is not ticked. Ticking it afterwards turns it into taken. A dose later in the day reads "Due". The page does not remind anyone or give any advice.

How is the refill date worked out?

The pills left, less what you have ticked since, divided by the doses a day and rounded down, counted from the fixed "now". Untick a dose and the pill goes back. Within seven days the row says "Refill soon".

How do I use it with the keyboard?

Every dose is a checkbox named with the medicine, the time of day and its clock time; Tab moves through them and Space ticks. The polite status line says what changed, how many doses are taken and what the refill date is now.

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

Ticks reset on reload; nothing is saved, ordered or sent, and it is not medical advice. To keep them, send each tick from tick to your own API and start taken from what it returns.

How does it look on a phone?

The table is replaced by one card per medicine: its name, the refill date, each dose with its time and the fourteen dots. The three counts stay on top.