iScheduler

Recurring event scheduler UI components for React + Ant Design.

Provides a complete scheduler form with weekly/monthly/yearly behaviors, a table list with CRUD actions, and a drawer-based creation flow — all driven by a simple provider pattern.

Demo sandbox: https://teamco.github.io/ischeduler/

Documentation

See the Storybook documentation for integration guides (Firebase, TanStack Query), API reference, i18n, types reference, and code examples.

Installation

npm install @teamco/ischeduler
# or
yarn add @teamco/ischeduler

Peer Dependencies

Make sure your project has these installed:

npm install react react-dom antd dayjs @ant-design/icons

| Package | Version | |---------|---------| | react | >= 18 | | react-dom | >= 18 | | antd | >= 6 | | dayjs | >= 1.11 | | @ant-design/icons | >= 5 |

Quick Start

import { useState, useCallback } from 'react';
import {
  SchedulerProvider,
  SchedulersList,
  ESchedulerPrefix,
  type IScheduler,
} from 'ischeduler';
import 'ischeduler/dist/ischeduler.css';

function SchedulerPage() {
  const [schedulers, setSchedulers] = useState({
    [ESchedulerPrefix.SALE]: [] as IScheduler[],
    [ESchedulerPrefix.DISCOUNT]: [] as IScheduler[],
    [ESchedulerPrefix.TRIAL_DISCOUNT]: [] as IScheduler[],
  });

  const onCreate = useCallback(async (type: ESchedulerPrefix, scheduler: IScheduler) => {
    // Save to your API / database
    const saved = await api.createScheduler(type, scheduler);
    setSchedulers((prev) => ({
      ...prev,
      [type]: [...prev[type], saved],
    }));
  }, []);

  const onUpdate = useCallback(async (type: ESchedulerPrefix, scheduler: IScheduler) => {
    const updated = await api.updateScheduler(type, scheduler);
    setSchedulers((prev) => ({
      ...prev,
      [type]: prev[type].map((s) => (s.id === updated.id ? updated : s)),
    }));
  }, []);

  const onDelete = useCallback(async (type: ESchedulerPrefix, id: string) => {
    await api.deleteScheduler(type, id);
    setSchedulers((prev) => ({
      ...prev,
      [type]: prev[type].filter((s) => s.id !== id),
    }));
  }, []);

  return (
    <SchedulerProvider
      schedulers={schedulers}
      onCreate={onCreate}
      onUpdate={onUpdate}
      onDelete={onDelete}
      permissions={{ canCreate: true, canUpdate: true, canDelete: true }}
    >
      <h2>Sale Schedulers</h2>
      <SchedulersList type={ESchedulerPrefix.SALE} />

      <h2>Discount Schedulers</h2>
      <SchedulersList type={ESchedulerPrefix.DISCOUNT} currency="USD" />

      <h2>Trial Discount Schedulers</h2>
      <SchedulersList type={ESchedulerPrefix.TRIAL_DISCOUNT} />
    </SchedulerProvider>
  );
}

Development

npm run dev            # Vite dev server
npm run build          # Production build (TypeScript check + Vite)
npm run test           # Run all tests
npm run test:watch     # Tests in watch mode
npm run lint           # ESLint
npm run format         # Prettier
npm run storybook      # Storybook dev server on port 6006
npm run build-storybook # Static Storybook build

License

MIT