Material UI Cron

A React cron editor built with material ui

Inspired by

• react-cron-js

Installation

Be sure that you have these peer dependencies on your project:

• react (>=19.2.0)
• react-dom (>=19.2.0)
• @emotion/react (>=11.11.0)
• @emotion/styled (>=11.11.0)

@mui/material is bundled as a dependency, so you don't need to install it separately.

# Yarn
yarn add material-ui-cron

# NPM
npm install --save material-ui-cron

Usage

import Scheduler from 'material-ui-cron'
import React from 'react'

export default function SchedulerDemo() {
  const [cron, setCron] = React.useState('0 9 * * *')
  const [cronError, setCronError] = React.useState('') // validation error, '' when valid

  return (
    <Scheduler
      cron={cron}
      setCron={setCron}
      setCronError={setCronError}
    />
  )
}

📖 See USAGE.md for the full guide — every prop with examples: theming & dark mode, admin mode, layout, title & header, timezone, and localization.

material-ui-cron is written in TypeScript and ships complete type definitions.

Localization

The component ships with English (en) and Chinese (zh_CN), selected via the locale prop, or supply your own with customLocale — see Localization in USAGE.md. Translation contributions from the community are very welcome.

Contributing a translation

1. Clone /src/localization/enLocal.ts and rename it to the desired language prefix (based on https://meta.wikimedia.org/wiki/Template:List_of_language_names_ordered_by_code).
2. Add the language prefix to the definedLocales type inside /src/types.ts (if required).
3. Add the locale mapping inside /src/i18n.ts.

Testing

Tests run on Vitest and are split into two projects:

• unit — pure-logic tests that run in Node (cron validation in utils.ts, the cron ⇄ field-atom derivations in selector.ts).
• browser — component tests that render the real <Scheduler /> in a headless Chromium via Playwright. A real browser is required: MUI's Autocomplete triggers an infinite update loop under jsdom.

Tests live next to the code they cover:

File	Project	What it covers
src/utils.test.ts	unit	every cron-part validator + helpers
src/selector.test.ts	unit	all cron-part derivation atoms and the writer
src/scheduler.browser.test.tsx	browser	end-to-end <Scheduler /> behaviour

Commands

# Install the Chromium browser once (needed for the browser project)
npx playwright install chromium

yarn test           # run the whole suite once (unit + browser)
yarn test:unit      # run only the Node unit project
yarn test:browser   # run only the Chromium browser project
yarn test:watch     # watch mode
yarn coverage       # run everything and emit a coverage report

yarn coverage uses the V8 provider and writes a report to coverage/ (text summary in the console, plus html and json-summary).

Continuous integration

.github/workflows/test.yml runs on pushes and pull requests to main. It lints (biome lint), type-checks (tsc --noEmit), builds, installs Chromium, runs yarn coverage, and uploads the coverage report as a build artifact.

Demo & deployment

The demo/ app is deployed to Vercel, which builds a fresh preview for every branch and pull request and comments the live URL on the PR.

The build is driven by vercel.json at the repo root:

Step	Command
Install	yarn --cwd demo install
Build	yarn --cwd demo build
Output	demo/dist

One-time Vercel setup

1. Create a Vercel project and link it to this GitHub repository (Vercel dashboard → Add New… → Project, or npx vercel link).
2. Leave the Root Directory as the repo root — vercel.json already points the build at demo/. (The demo aliases the library from ../src, so the whole repo must be present at build time.)
3. That's it. Vercel's Git integration produces a Preview Deployment for each push to a branch / PR and a Production Deployment for main.

No secrets or GitHub Actions workflow are required — preview URLs come from Vercel's native Git integration.

Acknowledgement

This library was developed as a part of Udaan's Data Platform for scheduling queries. Big thanks to Amod Malviya for supporting this project.

License

MIT © baymac