# React Cron Generator: Zeitpläne ohne Cron-Syntax

> Ein React Cron Generator, mit dem Nutzer einen Zeitplan über Frequenz-Tabs und Wochentag-Chips wählen. Er liest ihn als Satz vor und listet die nächsten Läufe.

- Autor: [Serban Rusu](https://wingo-ui.com/blog/authors/serban), Founder of Wingo UI
- Veröffentlicht: 19. Okt. 2026
- Kategorie: [Komponenten-Guides](https://wingo-ui.com/de/blog/category/components)
- Lesezeit: 9 Min.
- Kanonische URL: https://wingo-ui.com/de/blog/react-cron-generator
- Englische Fassung: https://wingo-ui.com/blog/react-cron-generator

## Kurz gesagt

Ein guter React Cron Generator versteckt die Syntax: Frequenz-Tabs, Chips für Wochentage und Tage sowie ein Zeitfeld schreiben den Ausdruck, ein Satz liest ihn zurück, und eine Liste der nächsten Läufe belegt ihn, bevor jemand speichert. Der Cron Picker von Wingo UI erledigt das aus einem einzigen value-String, zeigt die Läufe in einer gewählten Zeitzone und bietet einen validierten Custom-Tab für alle, die Cron schon kennen.

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](https://wingo-ui.com/components/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.

| Option | Was es ist | Cron-Format | Zurücklesen und Vorschau | UI-Abhängigkeit |
|---|---|---|---|---|
| [react-js-cron](https://github.com/xrutayisire/react-js-cron) | MIT-Paket, gesteuert über `value` und `setValue` | Standard-Cron, mit `shortcuts` für Makros im Stil von `@daily` | Kein Satz im README; `humanizeValue` schreibt Namen von SUN bis SAT und JAN bis DEC in den Wert; nächste Läufe nicht erwähnt | antd 6 oder neuer, React 18 oder neuer |
| [react-cron-generator](https://github.com/sojinantony01/react-cron-generator) | Paket mit `onChange(value, text)` | Standardmäßig Quartz (6 oder 7 Felder), Unix mit 5 Feldern über `isUnix` | Eine Beschreibung von cronstrue mit `showResultText`; nächste Läufe nicht erwähnt | Keine UI-Library genannt; für die Standard-Styles importierst du seine CSS-Datei |
| [Wingo UI Cron Picker](https://wingo-ui.com/components/cron-picker) | Pro-Komponente als Quellcode, Installation mit `npx wingo-ui@latest add cron-picker` | Unix-Cron mit 5 Feldern, Namen, Makros | Ein Satz, der Ausdruck mit Kopieren-Button und die nächsten Läufe | Tailwind CSS v4, `motion`, `lucide-react` |

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.

```bash
npx wingo-ui@latest add cron-picker
```

```tsx
"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.

> Live-Demo (Cron Picker): Tipp auf Tue und Thu, damit Mon, Wed und Fri bleiben, und stell dann die Uhrzeit ein: Satz, Ausdruck und die nächsten fünf Läufe aktualisieren sich sofort. Die Demo zählt ab einem festen Zeitpunkt, Donnerstag, 24. September 2026, 16:40 Uhr. Probier sie unter [Cron Picker](https://wingo-ui.com/components/cron-picker) aus und installier sie mit `npx wingo-ui@latest add cron-picker`.

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](https://vercel.com/docs/cron-jobs) ist die Zeitzone immer UTC. [Geplante Workflows](https://docs.github.com/en/actions/reference/workflows-and-actions/events-that-trigger-workflows) in GitHub Actions laufen standardmäßig in UTC und nehmen optional eine IANA-`timezone` an. Cronie liest laut der [crontab-Manpage](https://man7.org/linux/man-pages/man5/crontab.5.html) 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.

```tsx
<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.

> Live-Demo (Cron Picker): Das Split-Layout mit der Zeitzone New York: Ändere die Uhrzeit und sieh rechts die Läufe, jeweils mit Datum, Uhrzeit und der Zeit bis dahin. Probier sie unter [Cron Picker](https://wingo-ui.com/components/cron-picker) aus und installier sie mit `npx wingo-ui@latest add cron-picker`.

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](https://github.com/harrisiirak/cron-parser) 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.

```bash
npm install cron-parser
```

```ts
// 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 };
}
```

```tsx
// 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.

> Live-Demo (Cron Picker): Der Ausdruck hat die Stunde 25: Lies den Fehler unter dem Input, wechsle dann zu By field und korrigier das Stundenfeld. Probier sie unter [Cron Picker](https://wingo-ui.com/components/cron-picker) aus und installier sie mit `npx wingo-ui@latest add cron-picker`.

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](https://wingo-ui.com/components/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](https://wingo-ui.com/components/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](https://wingo-ui.com/components/time-picker), den der [Guide zum React Time Picker](https://wingo-ui.com/de/blog/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](https://wingo-ui.com/de/pricing)). Baust du einen ganzen Automatisierungs-Screen, nutzt die [Automation Builder Page](https://wingo-ui.com/components/automation-builder-page) ihn bereits für geplante Trigger, wie der [Guide zum React Workflow Builder](https://wingo-ui.com/de/blog/react-workflow-builder) zeigt. Weitere Deep Dives zu einzelnen Komponenten findest du in der [Kategorie Komponenten-Guides](https://wingo-ui.com/de/blog/category/components), und der [Guide zu React-Formularkomponenten](https://wingo-ui.com/de/blog/react-form-components-guide) behandelt die Labels, Fehler und Smartphone-Regeln, die jedes Feld in diesem Formular teilt.

## Komponenten in diesem Artikel

- [Cron Picker](https://wingo-ui.com/components/cron-picker) (Pro): A React cron expression builder: frequency tabs, weekday and day chips, a time, a sentence that reads the schedule back and the next runs. Installation: `npx wingo-ui@latest add cron-picker`

## 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.

---

Quelle: https://wingo-ui.com/de/blog/react-cron-generator