@dateforge/react-calendar

🚀 Live Demo  ·  📖 Docs  ·  📚 Storybook

A modular calendar toolkit that starts tiny and grows with your product.

Monolithic pickers ship the grid, nav, time picker, presets, layout opinions, and weight. DateForge ships only what you use.

Start with two components. Add range selection, multi-select, time, presets, manual input, chips, tracks, custom layouts, themes, and tokens.

DateForge is not one picker with a long prop list. It is a set of focused modules that share one calendar brain.

Modular · Composable · Tokenized
Start minimal. Scale infinitely. Add only the modules you need.

The module mix, selection modes, tokens, and focused props unlock ~2.0 trillion built-in calendar configurations without forcing one prebuilt UI.

Use built-in themes and appearances, or create your own. Shape selection with presets, disabled rules, min/max bounds, timezones, and modes: single, multiple, or range.

Build a classic picker, date track, 12-month board, month-only selector, time-only control, or custom booking flow from the same parts.

Install

npm i @dateforge/react-calendar

No global CSS import is required — styles are bundled into the modules and apply automatically.

Quick start

import { useState } from "react";
import { Calendar } from "@dateforge/react-calendar";
import { CalendarNav, CalendarDays } from "@dateforge/react-calendar/modules";

export function Example() {
  const [date, setDate] = useState<Date | null>(null);

  return (
    <Calendar mode="single" value={date} onChange={setDate}>
      <CalendarNav showMonthPicker compactYears />
      <CalendarDays />
    </Calendar>
  );
}

Why DateForge?

Most date pickers ask you to accept their shape. DateForge lets you forge yours.

• Ship less by default — import CalendarDays and CalendarNav, then stop. No unused time picker, presets, or hidden panel.
• Compose real workflows — add modules for range previews, multi-month layouts, inline time, shortcuts, manual input, summaries, or tracks.
• Keep one shared state model — every module plugs into the same provider, so custom layouts feel native instead of stitched together.
• Style it like your system — themes, appearances, gradients, CSS-grid placement, and tokens help it feel built-in.
• Grow without rewriting — the same API covers a tiny picker, booking range calendar, scheduler, or dense operations tool.
• Built for serious apps — a11y, SSR-safe defaults, timezones, React 18/19, zero runtime dependencies, and tree-shakeable modules.

<Calendar mode="range" value={range} onChange={setRange}>
  <CalendarNav showMonthPicker compactYears />
  <CalendarDays />
  <CalendarPresets presets={presets} />
  <CalendarSelectedDates />
</Calendar>

Remove a line, remove a feature. Add a module, add a workflow. That is the core idea.

Modules

| Module | Use it for | | ----------------------- | ----------------------------------------------------------- | | CalendarNav | Month/year navigation, popups, clear, optional time | | CalendarDays | Classic month grid for single, multiple, and range | | CalendarSelectedDates | Selected-date chips, overflow, per-chip clear | | CalendarInfo | Selection metrics, relative hints, empty text, home / clear | | CalendarManualInput | Typed dates, keyboard-first editing, per-date remove | | CalendarPresets | Shortcuts like Today, Last 7 days, custom ranges | | CalendarTimeGrid | Inline hour/minute/second selection | | CalendarMonthsGrid | Month-only picking or fast month jumps | | CalendarYearsGrid | Year-only picking or fast year jumps | | CalendarDaysTrack | Scrollable day track for compact/mobile layouts | | CalendarMonthsTrack | Scrollable month track | | CalendarYearsTrack | Scrollable year track |

Links

• 📚 Repo Documentation
• 🏛 Architecture
• 📝 Changelog
• 🐛 Issues