Payment Calendar React component
See a month of money going out: every due date with its amount, heavier days shaded darker, what's overdue, and pay from the same screen.
About the Payment Calendar component
Payment Calendar shows when money leaves the account, not just how much. Each due date carries its amount, and the heavier days are shaded darker, so a tight week is easy to spot.
Overdue payments show in red and are totalled at the top. Pick a day to see what's due and pay it without leaving the screen.
When to use it
Use it for bills, subscriptions, payroll and supplier payments.
It shows one month. For long-range planning, a forecast chart suits better.
Installation
Add the Payment Calendar component to your project with the shadcn CLI. It lands in components/payment-calendar.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/payment-calendarProps
<PaymentCalendar /> accepts 7 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Payments" |
| year | number | 2026 |
| month From 0 to 11. | number | 2 |
| today Today's date in that month. | number | 12 |
| payments | { id: string; name: string; date: number; amount: number; status: PaymentStatus; autopay?: boolean }[] | DEFAULT_PAYMENTS |
| onPay | (payment: CalendarPayment) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Payments"
- yearnumberDefault: 2026
- month
From 0 to 11.
numberDefault: 2 - today
Today's date in that month.
numberDefault: 12 - payments{ id: string; name: string; date: number; amount: number; status: PaymentStatus; autopay?: boolean }[]Default: DEFAULT_PAYMENTS
- onPay(payment: CalendarPayment) => void
Payment Calendar FAQ
- Does Pay now take a payment?
- No. onPay gives you the payment, and your app handles it.
- Why don't autopay items have a button?
- They pay themselves on the day, so there's nothing to press.
- Why pass today as a prop?
- So the server and browser agree, and you decide which time zone counts.
- Does the height change between days?
- No. Every day shares one grid cell.
