Recurring Jobs Calendar React component
A month of scheduled bot runs at a glance: a dot for every run, red where one failed, and pick any day to see what ran or will run.
About the Recurring Jobs Calendar component
Recurring Jobs Calendar shows when your bots run without reading a single cron line. Every run is a dot on its day, and failures turn red, so a bad night stands out in the month.
Pick a day to see what ran or what's coming, or hide a job to clear the view.
When to use it
Use it for scheduled agents, backups, reports and any repeating work.
For jobs that run many times an hour, show a summary instead. A dot per run won't fit.
Installation
Add the Recurring Jobs Calendar component to your project with the shadcn CLI. It lands in components/recurring-jobs-calendar.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/recurring-jobs-calendarProps
<RecurringJobsCalendar /> 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 | "Scheduled runs" |
| year | number | 2026 |
| month From 0 to 11. | number | 2 |
| today Today's date in that month. | number | 12 |
| jobs | { id: string; name: string; time: string; schedule: string; weekdays?: number[]; dates?: number[]; failedOn?: number[] }[] | DEFAULT_JOBS |
| onSelectDay | (date: number) => void | — |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Scheduled runs"
- yearnumberDefault: 2026
- month
From 0 to 11.
numberDefault: 2 - today
Today's date in that month.
numberDefault: 12 - jobs{ id: string; name: string; time: string; schedule: string; weekdays?: number[]; dates?: number[]; failedOn?: number[] }[]Default: DEFAULT_JOBS
- onSelectDay(date: number) => void
Recurring Jobs Calendar FAQ
- How do I set a schedule?
- Use weekdays, with 0 as Monday, or dates of the month, or both.
- Why pass today as a prop?
- So the server and browser agree, and you decide which time zone counts.
- Which day does the week start on?
- Monday.
- Does the height change between days?
- No. Every day shares one grid cell.
