react-calendar-select

Single/Range/Multi‑select dates calendar for React

A lightweight calendar that supports single, range, and true multi‑select dates with easy CSS customization.

Live demo: https://6xwx48.csb.app/

---

Why this over react-calendar?

• True multi‑select (pick any set of dates, not just range/single).
• Easy styling with CSS variables + data-* attributes.
• No runtime deps beyond React (simple, minimal footprint).

---

Quick Start (copy‑paste)

Option A: default styles (recommended)

import { Calendar } from "react-calendar-select";
import "react-calendar-select/styles.css";

export default function Demo() {
  return <Calendar />;
}

Option B: auto‑styles entry

import { Calendar } from "react-calendar-select/with-styles";

export default function Demo() {
  return <Calendar />;
}

---

Install

npm install react-calendar-select

Peer dependencies: react and react-dom (16.8+).

---

Copy‑paste Usage

import { Calendar, CalendarValue } from "react-calendar-select";
import { useState } from "react";

export default function RangePicker() {
  const [value, setValue] = useState<CalendarValue>({
    start: null,
    end: null,
  });

  return (
    <Calendar
      mode="range"
      value={value}
      onChange={setValue}
      numberOfMonths={2}
    />
  );
}

---

Type Support (TS‑first)

Exported types:

import type {
  CalendarValue,
  RangeValue,
  Mode,
  CalendarTheme,
} from "react-calendar-select";

---

Props

All props are optional.

Prop name	Description	Default value	Example values
mode	Selection mode.	"single"	"range", "multiple"
value	Controlled value. Types: Date | Date[] | { start: Date | null; end: Date | null } | null.	null	new Date() [new Date(), new Date()] { start: new Date(), end: new Date() }
onChange	Called with next value on selection.	undefined	(val) => setValue(val)
renderDay	Custom day renderer: (date, state) => ReactNode. state: isSelected, isInRange, isRangeStart, isRangeEnd, isRangeSelecting, isDisabled, onClick.	undefined	(date, s) => <button onClick={s.onClick}>{date.getDate()}</button>
theme	Theme overrides: background, text, selectedBackground, selectedText, rangeBackground, rangeText.	undefined	{ selectedBackground: "#111", selectedText: "#fff" }
className	Extra class on the root.	undefined	"my-calendar"
style	Inline styles on the root (merged with theme vars).	undefined	{ maxWidth: 420 }
compact	Tighter spacing layout.	false	true
locale	Locale or fallback locales.	"en-US"	"ja-JP", ["pt-BR", "en-US"]
weekStartsOn	First day of week (0=Sun … 6=Sat). Auto-resolved from locale when supported.	auto → 0	1
weekdayFormat	Weekday label format.	"short"	"long", "narrow"
monthLabelFormat	Intl.DateTimeFormatOptions for the month label.	{ month: "long", year: "numeric" }	{ month: "short", year: "numeric" }
labels	Nav button labels: { previous?: string; next?: string }.	{ previous: "Previous month", next: "Next month" }	{ previous: "Prev", next: "Next" }
minDate	Earliest selectable date (inclusive).	undefined	new Date(2026, 0, 1)
maxDate	Latest selectable date (inclusive).	undefined	new Date(2026, 11, 31)
isDateDisabled	Disable specific dates. Return true to disable.	undefined	(date) => date.getDay() === 0
numberOfMonths	Months shown side‑by‑side.	mode === "range" ? 2 : 1	2, 3

---

Styling

CSS variables

.my-calendar {
  --rcs-bg: #ffffff;
  --rcs-text: #222222;
  --rcs-selected-bg: #111111;
  --rcs-selected-text: #ffffff;
  --rcs-range-bg: rgba(17, 17, 17, 0.12);
  --rcs-range-text: #111111;
}

Data attributes

.my-calendar .rcs-day-cell[data-in-range="true"] {
  outline: 1px solid rgba(0, 0, 0, 0.08);
}

.my-calendar .rcs-day-cell[data-selected="true"] {
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.35);
}

---

Accessibility

• Roving tab focus within the grid
• Arrow keys move by day/week
• Home/End jumps to week start/end
• PageUp/PageDown moves by month
• Enter/Space selects

Disabled dates are skipped by keyboard navigation.

---

SSR (Next.js / Remix)

Pass a stable locale to avoid hydration mismatches:

<Calendar locale="en-US" />

Next.js (app router): import CSS in app/layout.tsx for zero‑flash styles.

---

Dev & Test

npm run dev
npm run test
npm run build

---

License

MIT