KQ-636 · DIVIDEND/CALENDAR

Dividend Calendar

A month of payouts on the days they land. Every paying day carries a drawn coin that drops from a shift above its cell and lands on recoil, staggered by cascade so a busy month stays inside the choreography budget, and the month total rolls on snap between months — up when the new month pays more. It is a real grid: arrows walk the days, Home and End reach the ends of a week, PageUp and PageDown change month, and pressing a day pins its reading until Escape.

KQ-636 · DIVIDEND/CALENDAR

Waylight Pay · income calendar

6 payoutsSeptember

MTWTFSS

Sep · 6 payouts · total $77.00 · reading —

Install

One command — the source lands in your repo. Or copy it from the Code tab.

$ pnpm dlx shadcn@latest add @kinetiq/dividend-calendar

Props

months: DividendMonth[]; default —; The months the arrows walk: id, label, days, the weekday the 1st falls on, and the payouts.
value / defaultValue: string; default first month's id; Controlled or initial month id.
onValueChange: (id: string) => void; default —; Fires from the arrow or key that changed month.
onDayRead: (day: number | null, payout: DividendPayout | null) => void; default —; Fires from the pointer, focus or press that changed what the header reads; null when nothing is being read.
format: (value: number) => string; default USD, 2dp; Formats every amount, including the month total.
weekdays: string[]; default ["M","T","W","T","F","S","S"]; Seven column headers, Monday first.
label: React.ReactNode; default —; Visible heading; omit it and pass aria-label.

Prop	Type	Default	Description
months	DividendMonth[]	—	The months the arrows walk: id, label, days, the weekday the 1st falls on, and the payouts.
value / defaultValue	string	first month's id	Controlled or initial month id.
onValueChange	(id: string) => void	—	Fires from the arrow or key that changed month.
onDayRead	(day: number \| null, payout: DividendPayout \| null) => void	—	Fires from the pointer, focus or press that changed what the header reads; null when nothing is being read.
format	(value: number) => string	USD, 2dp	Formats every amount, including the month total.
weekdays	string[]	["M","T","W","T","F","S","S"]	Seven column headers, Monday first.
label	React.ReactNode	—	Visible heading; omit it and pass aria-label.