jal-co/ui3

Cron Schedule

Visual cron expression display with field breakdown, human-readable summary, and optional next-run preview. Designed for dashboards, serverless function docs, and scheduling UIs.

Preview

Daily Standup Reminder

At 9:00 AM, Mon through Fri

0 9 * * 1-5
Minute00
Hour99
Day (Month)*every
Month*every
Day (Week)1-5Mon, Tue, Wed, Thu, Fri

Next 3 runs

  1. 1Thu, Mar 12 at 9:00 AM
  2. 2Fri, Mar 13 at 9:00 AM
  3. 3Mon, Mar 16 at 9:00 AM

Installation

$ shadcn add https://ui.justinlevine.me/r/cron-schedule.json

Usage

import { CronSchedule } from "@/components/cron-schedule"
<CronSchedule expression="0 9 * * 1-5" title="Daily Standup" />

Pass a standard 5-field cron expression. The component parses it into a human-readable summary and a visual field breakdown. Optionally show upcoming run times with showNextRuns.

Examples

Common schedules

Every 15 minutes

Health Check

Every 15 minutes

*/15 * * * *
Minute*/15every 15
Hour*every
Day (Month)*every
Month*every
Day (Week)*every

Weekdays at 9 AM

Daily Standup Reminder

At 9:00 AM, Mon through Fri

0 9 * * 1-5
Minute00
Hour99
Day (Month)*every
Month*every
Day (Week)1-5Mon, Tue, Wed, Thu, Fri

Midnight on the 1st

Monthly Cleanup

At 12:00 AM, on day 1 of the month

0 0 1 * *
Minute00
Hour00
Day (Month)11
Month*every
Day (Week)*every

Every hour

Cache Refresh

At minute 0

0 * * * *
Minute00
Hour*every
Day (Month)*every
Month*every
Day (Week)*every

With next runs

Set showNextRuns to display upcoming execution times. Pass referenceDate to control the starting point (defaults to now).

Next 5 runs

Notification Digest

At 8:30 AM, 12:30 PM, and 5:30 PM, Mon through Fri

30 8,12,17 * * 1-5
Minute3030
Hour8,12,178, 12, 17
Day (Month)*every
Month*every
Day (Week)1-5Mon, Tue, Wed, Thu, Fri

Next 5 runs

  1. 1Wed, Mar 11 at 12:30 PM
  2. 2Wed, Mar 11 at 5:30 PM
  3. 3Thu, Mar 12 at 8:30 AM
  4. 4Thu, Mar 12 at 12:30 PM
  5. 5Thu, Mar 12 at 5:30 PM

Next 3 runs — every 6 hours

Data Sync

Every 6 hours

0 */6 * * *
Minute00
Hour*/6every 6
Day (Month)*every
Month*every
Day (Week)*every

Next 3 runs

  1. 1Wed, Mar 11 at 12:00 PM
  2. 2Wed, Mar 11 at 6:00 PM
  3. 3Thu, Mar 12 at 12:00 AM

Complex expressions

Quarterly report — 1st of Jan, Apr, Jul, Oct at 6 AM

Quarterly Report

At 6:00 AM, on day 1 of the month, in Jan, Apr, Jul, and Oct

0 6 1 1,4,7,10 *
Minute00
Hour66
Day (Month)11
Month1,4,7,10Jan, Apr, Jul, Oct
Day (Week)*every

Next 4 runs

  1. 1Wed, Apr 1 at 6:00 AM
  2. 2Wed, Jul 1 at 6:00 AM
  3. 3Thu, Oct 1 at 6:00 AM
  4. 4Fri, Jan 1 at 6:00 AM

Weekends only — Sat and Sun at noon

Weekend Batch

At 12:00 PM, Sun and Sat

0 12 * * 0,6
Minute00
Hour1212
Day (Month)*every
Month*every
Day (Week)0,6Sun, Sat

Without title

Omit the title for a compact display that shows only the summary and field breakdown.

Minimal

Every 5 minutes

*/5 * * * *
Minute*/5every 5
Hour*every
Day (Month)*every
Month*every
Day (Week)*every

API Reference

CronSchedule

PropType

Cron syntax reference

FieldValuesSpecials
Minute0–59* , - /
Hour0–23* , - /
Day (Month)1–31* , - /
Month1–12* , - /
Day (Week)0–6 (Sun–Sat)* , - /

Notes

  • Server component. No "use client" — renders entirely on the server with zero client JS.
  • Standard 5-field only. Supports minute, hour, day-of-month, month, and day-of-week. Does not support seconds, years, or non-standard extensions like L, W, or #.
  • No dependencies. Cron parsing and next-run computation are built-in. No external scheduling library required.
  • Next-run accuracy. Runs are computed by iterating minute-by-minute from the reference date, capped at ~1 year of lookahead. This is suitable for display purposes — not a production scheduler.
  • Timezone. Next-run times use the server's local timezone (or the timezone of the provided referenceDate). No timezone conversion is applied.