@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