TrainingCalendar

Full-month training view with session chips (zone-colored), nutrition compliance bars, daily TSS load bars, and plan adherence dots. Built for endurance athletes.

Preview

Usage

import { TrainingCalendar } from '@ramtt/ui'

<TrainingCalendar
  month={3}
  year={2026}
  sessions={sessions}
  nutritionOverlay
  loadOverlay
  planOverlay
  onMonthChange={(m, y) => setView({ month: m, year: y })}
  onSessionClick={(s) => openSession(s.id)}
/>

Props

Prop	Type	Default	Description
month	`number`	—	0-indexed month (0 = January)
year	`number`	—	Four-digit year
sessions	`CalendarSession[]`	—	Session data — date, zone, duration, planned, completed, fuelScore
nutritionOverlay	`boolean`	false	Show 3px CHO compliance bar at the bottom of each day
loadOverlay	`boolean`	false	Show vertical TSS bar on the right of each day (proportional to week max)
planOverlay	`boolean`	false	Show filled/hollow dot in top-right (planned-completed vs planned-missed)
onMonthChange	`(month, year) => void`	—	Fires on ◁ ▷ navigation, arrow keys, or "T" to jump to today
onDayClick	`(date: Date) => void`	—	Fires when clicking the empty area of a day cell or "+N more"
onSessionClick	`(session) => void`	—	Fires when clicking a session chip
weekStartsOn	`0 \| 1`	1	0 = Sunday, 1 = Monday
view	`'month' \| 'week'`	'month'	Month grid (6 rows) or single-week strip
today	`Date`	—	Today reference for highlighting and past/future logic