React Cron Generator: Zeitpläne ohne Cron-Syntax

Du baust geplante Berichte, Backups oder Erinnerungen in eine App ein und brauchst einen React Cron Generator, damit deine Nutzer festlegen können, wann der Job läuft. Das Backend will 0 9 * * 1-5. Die Person im Formular will „jeden Werktag um 9 Uhr morgens“ und hat noch nie von crontab gehört. Ein einfaches Textfeld lässt sie im Stich, und ein Stapel Dropdowns, der die fünf Felder nachbildet, verschiebt die Syntax nur in eine andere Form. Dieser Guide zeigt, was eine Oberfläche für Cron-Ausdrücke können muss, welche Props im Cron Picker von Wingo UI zählen, wie du den Wert sicher speicherst und an welchen Cron-Regeln die meisten Zeitplaner scheitern.

Was muss ein React Cron Generator können?

Er lässt Menschen einen Zeitplan in ihren eigenen Worten wählen und zeigt ihn ihnen dann zur Kontrolle. Ein React Cron Editor, ein React Cron Builder und ein Schedule Picker für React-Formulare sind ein und dasselbe Element unter drei Namen, und die guten teilen fünf Eigenschaften:

1. Zuerst die Frequenz. Tabs für alle paar Minuten, stündlich, täglich, wöchentlich und monatlich decken die meisten echten Jobs ab. Jeder Tab zeigt nur die Felder, die er braucht.
2. Chips für Tage. Wochentage als sieben Chips und Tage des Monats als Raster von 1 bis 31, damit niemand 1,3,5 tippt.
3. Ein Satz, der die Auswahl vorliest. An „Mondays, Wednesdays, and Fridays at 8:30 AM“ prüft ein Mensch seine eigene Wahl.
4. Die nächsten Läufe. Konkrete Termine fangen ab, was ein Satz verbirgt: eine falsche Zeitzone, einen 30. Februar, der nie kommt, einen Job, der sechzigmal pro Stunde läuft.
5. Ein Notausgang. Ein Custom-Tab für alle, die Cron schon kennen, validiert während der Eingabe.

Welche React-Cron-Libraries gibt es?

Zwei Open-Source-Pakete erledigen dieselbe Aufgabe: react-js-cron auf Basis von Ant Design und react-cron-generator, das standardmäßig Quartz-Syntax nutzt. Die Fakten stammen aus dem GitHub-README des jeweiligen Projekts, Stand Oktober 2026.

Nutzt deine App schon Ant Design, passt react-js-cron direkt hinein. Läuft dein Scheduler mit Quartz oder Spring, spricht react-cron-generator dieses Format, der Cron Picker dagegen nicht. Der Rest dieses Guides behandelt den Cron Picker.

Welche Props braucht der Cron Picker?

Einen String. value (oder defaultValue, das 0 9 * * 1-5 ist, wenn du nichts übergibst) hält den Ausdruck, und onValueChange bekommt nach jeder Änderung an Tab, Chip oder Feld den neuen.

npx wingo-ui@latest add cron-picker

"use client";

import { useState } from "react";
import { CronPicker } from "@/components/ui/cron-picker";

export function BackupSchedule() {
  const [cron, setCron] = useState("0 2 * * 0");

  return (
    <CronPicker
      label="Backup ausführen"
      value={cron}
      onValueChange={setCron}
      frequencies={["daily", "weekly", "monthly", "custom"]}
      locale="en-US"
    />
  );
}

Der Picker öffnet den Tab, der zum Ausdruck passt. 0 2 * * 0 öffnet Weekly mit ausgewähltem Sonntag und liest sich als „Sundays at 2:00 AM“. Alles, was die Tabs nicht ausdrücken können, etwa */15 9-17 * * 1-5, öffnet Custom und übernimmt den Text unverändert. Die Props, die du am häufigsten änderst:

• frequencies: die Tabs, in ihrer Reihenfolge. Standard sind minutes, hourly, daily, weekly, monthly und custom; ergänz "yearly" für Termine wie den 1. Januar.
• minuteIntervals und hourIntervals: die Auswahl für alle N Minuten ([5, 10, 15, 30]) und alle N Stunden ([1, 2, 3, 4, 6, 12]).
• showNextRuns: wie viele kommende Läufe die Liste zeigt, standardmäßig 5, mit 0 blendest du sie aus.
• showSummary und showExpression: der Satz und der Chip mit dem Ausdruck in Monospace samt Kopieren-Button.
• allowCustom: der Custom-Tab, standardmäßig an.
• weekStartsOn: die Reihenfolge der Chips. -1 folgt der Locale, also beginnt en-US mit Sonntag.

Die Demo startet mit 0 9 * * 1-5 und öffnet daher Weekly mit Montag bis Freitag. Wähl per Tipp ein paar Tage ab und ändere die Uhrzeit. Satz, Ausdruck und nächste Läufe ziehen bei jeder Änderung mit.

Ist auf einem Weekly- oder Monthly-Tab nichts ausgewählt, setzt der Picker den Wert auf "" und zeigt „Pick at least one day“. So kann ein Formular das Speichern blockieren, statt einen leeren Zeitplan abzulegen.

Wie zeige ich die nächsten Läufe in der richtigen Zeitzone?

Übergib die Zone, die dein Scheduler nutzt. Ein Cron-Ausdruck hat keine eigene Zeitzone: Die Maschine, die ihn ausführt, entscheidet. Laut der Doku zu Vercel Cron Jobs (opens in a new tab) ist die Zeitzone immer UTC. Geplante Workflows (opens in a new tab) in GitHub Actions laufen standardmäßig in UTC und nehmen optional eine IANA-timezone an. Cronie liest laut der crontab-Manpage (opens in a new tab) pro crontab eine Variable CRON_TZ.

Setz timeZone auf diese Zone, dann berechnet und zeigt der Picker die nächsten Läufe darin, mit einem Badge, das sie nennt. Lässt du die Prop leer, nutzen die Läufe die Zone des Geräts, und das stimmt nur, wenn Server und Nutzer dieselbe haben.

<CronPicker
  value={cron}
  onValueChange={setCron}
  timeZone="America/New_York"
  description="Uhrzeit in New York, egal in welcher Zeitzone der Server läuft."
  layout="split"
  locale="en-US"
/>

layout="split" stellt die Felder links und Satz und Läufe rechts dar, sobald der Picker 672px breit ist. Das ist eine Container Query, also stapelt sich derselbe Picker auf dem Smartphone oder in einem schmalen Seitenpanel. hourCycle wechselt zwischen 12 und 24 Stunden (auto folgt der Locale), und now legt den Zeitpunkt fest, ab dem die Läufe zählen. So bleiben die Demos stabil.

Die Sommerzeit ist die andere Hälfte. Laut der cronie-Manpage treffen lokale Uhrzeiten, die durch die Umstellung übersprungen werden, nie zu, und Uhrzeiten, die doppelt vorkommen, laufen doppelt. Je nach Zone kann ein Job um 2:30 Uhr bei der Umstellung im Frühjahr ausfallen oder bei der im Herbst zweimal laufen. Wähl also für alles, was genau einmal laufen muss, eine Uhrzeit außerhalb der Umstellungsstunde.

Wie speichere ich den Zeitplan aus einem Formular?

Gib dem Picker einen name. Er rendert ein verstecktes Input-Feld mit dem Ausdruck, oder einen leeren Wert, solange der Ausdruck ungültig ist. So bekommt ein normaler Formular-Post oder eine Server Action einen String, den sie auf dem Server noch einmal prüft.

Die Helfer des Pickers (isValidCron, describeCron, getNextRuns) liegen in einer "use client"-Datei, also kann eine Server Action sie nicht aufrufen. Nimm einen Parser für den Server wie cron-parser (opens in a new tab) und achte auf genau fünf Felder, denn cron-parser akzeptiert auch ein Sekundenfeld. Der Picker akzeptiert im Custom-Tab Makros im Stil von @daily, und das README des Parsers nennt @midnight und @annually nicht. Deshalb wandelt die Action unten die Makros des Pickers in fünf Felder um, bevor sie irgendetwas prüft.

npm install cron-parser

// app/reports/actions.ts
"use server";

import { CronExpressionParser } from "cron-parser";

export type ScheduleState = { error: string; saved?: string };

// die Makros, die der Picker akzeptiert, als fünf Felder
const MACROS: Record<string, string> = {
  "@yearly": "0 0 1 1 *",
  "@annually": "0 0 1 1 *",
  "@monthly": "0 0 1 * *",
  "@weekly": "0 0 * * 0",
  "@daily": "0 0 * * *",
  "@midnight": "0 0 * * *",
  "@hourly": "0 * * * *",
};

export async function saveSchedule(_prev: ScheduleState, formData: FormData): Promise<ScheduleState> {
  const raw = String(formData.get("schedule") ?? "").trim();
  const schedule = MACROS[raw.toLowerCase()] ?? raw;
  // das versteckte Feld ist leer, solange der Picker einen Fehler zeigt
  if (schedule.split(/\s+/).length !== 5) return { error: "Wähl zuerst einen Zeitplan" };
  try {
    CronExpressionParser.parse(schedule, { tz: "America/New_York" }).next();
  } catch {
    return { error: "Dieser Zeitplan ist kein gültiger Cron-Ausdruck" };
  }
  // hier mit deiner eigenen Datenschicht speichern
  return { error: "", saved: schedule };
}

// app/reports/schedule-form.tsx
"use client";

import { useActionState, useState } from "react";
import { Button } from "@/components/ui/button";
import { CronPicker } from "@/components/ui/cron-picker";
import { saveSchedule } from "./actions";

export function ReportScheduleForm() {
  const [cron, setCron] = useState("0 9 * * 1-5");
  const [state, formAction, pending] = useActionState(saveSchedule, { error: "" });

  return (
    <form action={formAction} className="flex flex-col gap-4">
      <CronPicker
        name="schedule"
        label="Bericht senden"
        value={cron}
        onValueChange={setCron}
        timeZone="America/New_York"
        locale="en-US"
        error={state.error || undefined}
      />
      <Button type="submit" loading={pending}>
        Zeitplan speichern
      </Button>
    </form>
  );
}

Enter im Minutenfeld des Pickers und in den Custom-Eingaben schickt das umgebende Formular nie ab. Wer die Minute bearbeitet oder einen Ausdruck tippt, speichert also keinen halben Zeitplan. Das Zeitfeld ist ein normaler Time Picker: Am Desktop übernimmt Enter dort die Uhrzeit und schickt dann wie jedes Textfeld das Formular ab. Für eine Liste gespeicherter Jobs entfernt readOnly die Felder und behält nur den Satz und den Ausdruck mit Kopieren-Button: <CronPicker value={job.cron} readOnly size="sm" /> passt in eine Tabellenzeile.

Wie validiert der Custom-Tab Cron?

Während der Eingabe, mit einer Meldung pro Problem. Der Custom-Tab nimmt einen rohen Ausdruck an oder, unter By field, fünf kleine beschriftete Felder. Eine Stunde 25 meldet „Hour must be between 0 and 23“. Vier Felder melden „Use 5 fields: minute, hour, day, month, weekday“. Bei einem L im Tagesfeld nennt die Meldung die Formen, die das Feld akzeptiert. @daily, @weekly und die anderen zeitbasierten Makros sind erlaubt, @reboot wird abgelehnt.

Dieselben Regeln gibt es als Funktionen für deinen eigenen Code: validateCron liefert Feld und Grenzen eines Fehlers, cronErrorMessage macht daraus einen Satz, und detectFrequency sagt dir, welchen Tab ein Ausdruck öffnen würde.

Ist der Cron Picker barrierefrei und auf dem Smartphone nutzbar?

Ja. Die Frequenz-Tabs sind ein Segmented Control: Pfeiltasten wechseln zwischen ihnen, und wenn die vollen Namen nicht passen, etwa auf dem Smartphone, zeigen sie Kurzformen (Min, Hour, Day). Die Chips für Wochentage und Tage sind eine Toggle Group: Die Leertaste schaltet einen Chip um, Pfeiltasten springen zwischen den Chips. Chips sind bei sm, md und lg 32, 36 oder 40px groß und auf Touchscreens 44px.

Die Auswahl für alle N Minuten ist ein Select, das sich auf dem Smartphone als Bottom Sheet öffnet. Die Uhrzeit öffnet am Desktop Spalten und auf dem Smartphone ein Sheet mit Rädern, aus dem Time Picker, den der Guide zum React Time Picker ausführlich behandelt. Screenreader hören den neuen Satz eine halbe Sekunde nach der letzten Änderung über eine Live-Region im Modus polite, also wird eine Folge von Chip-Taps nur einmal angesagt. Ein Klick auf das Label fokussiert die Tabs, und bei reduzierter Bewegung werden aus den Slide-Animationen Überblendungen.

An welchen Cron-Regeln scheitern Zeitplan-Builder?

Vier tauchen immer wieder auf, und der Picker geht mit jeder auf eine bestimmte Art um.

• Tag des Monats ODER Wochentag. Sind beide Tagesfelder eingeschränkt, läuft der Job, sobald eines von beiden passt. 0 9 13 * 5 liest sich als „At 9:00 AM on the 13th of the month or on Fridays“, was selten gemeint ist. Die Tabs schreiben nie beide Felder, und das hält die Ausgabe auch auf Vercel gültig, wo ein Ausdruck mit beiden abgelehnt wird.
• Namen auf Plattformen, die sie ablehnen. Vercel akzeptiert weder MON noch JAN. Die Tabs schreiben immer Zahlen (1-5). Ein in Custom getippter Ausdruck bleibt, wie er getippt wurde, Namen kommen dort also durch.
• Termine, die nie kommen. 0 0 30 2 * ist gültige Syntax, und die Liste der Läufe meldet „No runs in the next 4 years“, statt zu schweigen.
• Ein zu volles Stundenfeld. * 2 * * * bedeutet jede Minute von 2:00 bis 2:59 und wird als „Every minute during hour 2“ zurückgelesen. GitHub Actions begrenzt Zeitpläne außerdem auf höchstens einmal alle 5 Minuten, und die Standardwerte von minuteIntervals beginnen bei 5.

Wie baue ich ihn in mein Projekt ein?

Führ npx wingo-ui@latest add cron-picker aus. Die CLI kopiert den Quellcode nach components/ui, ergänzt Field, Select, Segmented Control, Toggle Group, Time Picker und die anderen Teile, die er importiert, und installiert motion und lucide-react. Der Cron Picker ist eine Pro-Komponente (Preise). Baust du einen ganzen Automatisierungs-Screen, nutzt die Automation Builder Page ihn bereits für geplante Trigger, wie der Guide zum React Workflow Builder zeigt. Weitere Deep Dives zu einzelnen Komponenten findest du in der Kategorie Komponenten-Guides, und der Guide zu React-Formularkomponenten behandelt die Labels, Fehler und Smartphone-Regeln, die jedes Feld in diesem Formular teilt.

Häufige Fragen

Was ist ein React Cron Generator?

Ein Formularelement, das einen Cron-Ausdruck aus verständlichen Eingaben wie einer Frequenz, einer Liste von Wochentagen und einer Uhrzeit baut. So können Nutzer einen Job planen, ohne die fünf Felder zu lernen. Die meisten zeigen außerdem den Ausdruck und eine Beschreibung in Klartext.

Sollte ein Cron Builder die nächsten Läufe anzeigen?

Ja. Ein Satz wie „Every weekday at 9:00 AM“ kann immer noch eine falsche Zeitzone oder ein Datum verbergen, das nie kommt, während fünf konkrete Termine den Fehler sofort zeigen. Der Cron Picker von Wingo UI listet über showNextRuns standardmäßig fünf davon.

Was passiert in Cron, wenn Tag des Monats und Wochentag beide gesetzt sind?

Standard-Cron führt den Job aus, sobald eines der beiden Felder passt, also läuft 0 9 13 * 5 am 13. und an jedem Freitag. Die crontab-Manpage von cronie beschreibt diese Regel, und Vercel Cron Jobs lehnen Ausdrücke ab, die beide setzen.

Unterstützt der Cron Picker von Wingo UI Quartz-Cron-Ausdrücke?

Nein. Er liest und schreibt Unix-Cron mit 5 Feldern, inklusive Listen, Bereichen, Schritten, Namen wie MON und JAN und Makros wie @daily. Quartz-Ausdrücke mit sechs oder sieben Feldern zeigen im Custom-Tab den Fehler „Use 5 fields“.

Ist der Cron Picker von Wingo UI kostenlos?

Nein, er ist eine Pro-Komponente. Select, Segmented Control, Field und Copy Button, auf denen er aufbaut, sind kostenlos.