React Calendar & Date/Time Picker

Ultra-lightweight Date & Time picker for React — zero dependencies, fluid adaptive layout, 21 themes.

Paper (light theme)

Carbon + gradient

Industrial + brutalism

  

---

Features

• ⚡ Zero dependencies — no moment, dayjs, or date-fns
• 📦 ~10kb gzipped — styles included
• 🌎 200+ locales — native Intl API, no extra bytes
• 🎨 21 themes — dark & light, with optional gradient overlay and one-prop dark/light toggle
• 📐 Fluid layout — adapts to any container width, smart font scaling
• 🛠️ Modular — toggle time, presets, month grid, week numbers, two-months view
• 📅 Range & multi-select — live hover preview, range highlight, chips panel
• 👆 Gesture support — swipe to change months, swipe time tracks
• 🗓️ Two-months layout — side-by-side months, auto-stacks on narrow containers

---

Install

npm i react-calendar-datetime

---

Usage

Single date

import { Calendar } from "react-calendar-datetime";

const App = () => {
  const [date, setDate] = useState(new Date());

  return (
    <Calendar
      value={date}
      // called with Date on select, null when user clicks the same date again to deselect
      onChange={(d) => {
        if (d) setDate(d);
      }}
    />
  );
};

Date range

First click sets from, hover shows a live preview, second click sets to. Clicking from again resets both. While picking the end date to is null; on reset both are null.

Multi-select

Clicking a selected date deselects it. When max is reached further clicks are ignored.

Two-months layout

Automatically stacks to single-column below ~540 px container width.

Two-months layout WIDE

Two-months layout STACKED

---

Props

Data & callbacks

Prop	Type	Default	Description
value	Date | Date[] | DateRange	—	Single: Date, multi: Date[], range: { from, to }
onChange	(date: Date | null) => void	—	Single mode: fires on select / deselect
onDatesChange	(dates: Date[]) => void	—	Multi-select mode: fires with updated selection array
onRangeChange	(range: { from: Date | null; to: Date | null }) => void	—	Range mode: fires on each click; to is null while end is not yet picked
startDate	Date	—	Minimum selectable/navigable date
endDate	Date	—	Maximum selectable/navigable date
startMonth	Date	—	Initial month to display (does not select a date)
locale	string	'en'	BCP 47 locale tag
theme	CalendarTheme	'paper'	See Themes
width	string | number	'100%'	Any CSS width value
startOfWeek	0–6	1	Week start: 0 = Sun, 1 = Mon …
disabled	DisabledRule	—	See Disabled Dates

Selection modes

Prop	Type	Default	Description
mode	'single' | 'multiple' | 'range'	'single'	Selection mode
max	number	—	mode="multiple" only — caps the number of selectable dates; omit for unlimited
rangeMinDays	number	—	mode="range" only — minimum span in days; shorter selections are blocked
rangeMaxDays	number	—	mode="range" only — maximum span in days; days beyond the limit are blocked
showSelectedDates	boolean	false	Panel showing selected dates / range below calendar

Layout modules

Prop	Type	Default	Description
twoMonthsLayout	boolean	false	Show current + next month side by side. Stacks on narrow screens
time	boolean	true	Time button in header (opens time popup)
timeGrid	boolean	false	Full-size time picker panel alongside the calendar
months	boolean	true	Month navigation arrows in header
years	boolean	false	Year navigation arrows in header
monthsGrid	boolean	false	Full-size month-grid panel alongside the calendar
compactMonths	boolean	false	Compact month dropdown button in header
compactYears	boolean	true	Compact year dropdown button in header
monthsColumn	boolean	false	Stack months vertically for two-months layout
presets	boolean	false	Quick-select presets (Today, Tomorrow, Next week…)
showWeekNumber	boolean	false	ISO week numbers alongside each row
showHomeButton	boolean	false	Home button in header — active when viewing any month other than the current one; click navigates back without selecting a date
showClearButton	boolean	false	Clear button in header — active when any date is selected; click clears the entire selection (single, multi, or range)
showThemeToggle	boolean	false	Toggle button in header that switches between paper (light) and carbon (dark) — built-in dark/light mode control

Appearance

Prop	Type	Default	Description
gradient	boolean	false	Subtle radial gradient tinted by active theme
brutalism	boolean	false	Brutalism aesthetic — monospace font, hard borders, no radius
hour12	boolean	false	12-hour AM/PM format for time picker
highlightWeekends	boolean	true	Highlight Saturday and Sunday weekday
shortMonths	boolean	false	Abbreviated month names (Jan, Feb…)

Visibility

Prop	Type	Default	Description
hideLimited	boolean	false	Hide dates outside startDate/endDate instead of dimming
hideDisabled	boolean	false	Hide disabled dates entirely instead of striking through
hideWeekdays	boolean	false	Hide the weekday header row (Mon Tue Wed…)

Input

Prop	Type	Default	Description
gestures	boolean	true	Swipe left/right on days to change month; swipe time tracks

---

Disabled Dates

Rules can be combined into an array — all matching rules are applied.

hideDisabled removes disabled days from the grid entirely instead of striking them through. hideLimited does the same for date limits: outside startDate/endDate.

---

Themes

21 built-in themes via the theme prop. Swatches show background · accent colors.

🌑 Dark	☀️ Light
carbon	paper
crimson	amethyst
cyber	mint
midnight	rosa
phosphor	snow
sandstone	solar
dracula	comfy
temporal	neon
industrial	graphite
forest	latte
nebula

Each theme exposes CSS custom properties you can override:

Variable	Role
--c-b	Background
--c-h	Accent / highlight
--c-c	Text
--c-s	Border / separator

gradient adds a radial tint tuned to each theme's accent color.

---

Localization

Powered by the native Intl API — 200+ BCP 47 locales, zero extra bytes.

<Calendar locale="de" />     // Deutsch
<Calendar locale="zh-CN" />  // 中文
<Calendar locale="ar-SA" />  // العربية
<Calendar locale="ja" />     // 日本語
<Calendar locale="ru" />     // Русский

Days, months, date labels, and range separators all follow local standards automatically.

---

Changelog

CHANGELOG.md

Roadmap

• Full accessibility — keyboard navigation, ARIA roles (grid, gridcell, dialog), screen reader announcements, focus management in popups
• Custom presets via prop
• Custom theme API
• Holiday markers with labels
• Week Selection mode
• RTL support