⚡️ React Calendar & Date/Time Picker

📅 Ultra-lightweight Date & Time picker for React.
📦 Small but Mighty: Zero external dependencies & zero-runtime-bloat.

✨ Key Features

• 🚀 Zero Dependencies — No moment, dayjs, or date-fns. Just pure React.
• 📦 Tiny Footprint — ~6kb gzipped. Optimized for the modern web.
• 🌎 Global by Default — Instant support for 400+ BCP47 locales (including en, de, ru, zh-CN etc).
• 🌐 Universal Localization — No dictionaries, no extra bytes—powered by native Intl API.
• 🎨 16 Aesthetic Themes — Switch between Midnight, Snow, Solar, Crimson and more.
• 🕒 Smart Presets — Quick select for "Today", "Last week", "Month ago" etc.
• 🛠️ Fully Modular — Toggle Years, Months, Time, or Presets independently. Build your own UI.
• 🎛️ Deeply Customizable — Tailor experience: start-of-week day, highlight weekends, gradient.

🔨 How to install:

   npm i react-calendar-datetime

📆 How to use:

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

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

  return <Calendar date={date} onChangeDate={setDate} />;
};

export default App;

Props:

| Property | Type | Default | Description | | :--------------------- | :--------- | :----------- | :-------------------------------------------------------------------- | | date | Date | new Date() | Accepts native Date | | minDate | Date | ----- | Accepts native Date | | maxDate | Date | ----- | Accepts native Date | | onChangeDate | function | ----- | Callback returns new native Date on change | | locale | string | 'en' | Supports every possible locale, see Localization | | theme | string | 'paper' | Theme (style) name Supported themes | | presets | boolean | false | Toggle quick date selection (today, yesterday, etc.) | | years | boolean | true | Toggle year section and year picker mode | | time | boolean | false | Toggle time picker mode | | months | boolean | false | Toggle side month-selector. | | compactYears | boolean | false | Toggle compact years-selector in header. | | compactMonths | boolean | true | Toggle compact month-selector in header. | | jellyMode | boolean | false | Toggle Jelly Mode extra adaptive layout (with dynamic font-size). | | highlightWeekends | boolean | true | Use this if you want to highlight weekends. | | disableWeekends | boolean | false | Use this if you want to disable weekends. | | showWeekNumber | boolean | ----- | Use this if you want to display week numbers. | | gradientBackground | boolean | 'false' | Toggle for main block gradient background. | | gestures | boolean | ----- | Enable swipe gestures on mobile screen to change months. | | startOfWeek | number | 1 | Set start of week day, values (0 to 7) where 0 == Sunday | | width | string | 100% | Any CSS width measure (e.g. '450px' or '100%') | | height | string | auto | Any CSS height measure |

🎨 Aesthetic Themes

We offer 16 beautiful themes out of the box. Use the theme prop to switch between them.

| 🌑 Dark Themes | ☀️ Light Themes | | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | carbon | paper | | crimson | amethyst | | cyber | mintblue | | midnight | larosa | | phosphor | snowstorm | | sandstone | solar | | dracula | comfy | | temporal | neonlight |

🌍 Localization

No dictionaries, no extra bytes. The library leverages the native browser Intl API, providing instant support for 400+ locales.

  <Calendar locale="en" /> // Default
  <Calendar locale="zh-CN" />  // Chinese

Pass any BCP 47 language tag, and the calendar will automatically format days, months, and smart presets according to local standards.

✅ Patch notes:

🚀 Version 3.0.4

• 🪲 Minor bug fixes

• 🍮 Jelly Mode (Fluid Scaling) — True responsive design. The calendar fluidly scales its text and layout to perfectly fill any parent container while preserving exact proportions.

• 🎨 New Themes & Gradients — Added Crimson and Amethyst themes. Enable the gradientBackground prop to add visual depth tailored to your active theme.

• 🗓️ Advanced Grid Controls — Deeply tailor the calendar to your needs:

  • startOfWeek: Choose ANY day to start the week (e.g., 0 for Sunday, 1 for Monday, 2 for Tuesday, etc).
  • showWeekNumber: Display a dedicated column for ISO week numbers.
  • highlightWeekends & disableWeekends: Visually emphasize weekends or completely lock them out from selection.

• 📱 Touch Gestures — Enable the gestures prop for smooth, native-feeling swipe navigation between months on mobile devices.

• 🗜️ Compact & Overhauled Selectors — Introducing compactMonths and compactYears—sleek, space-saving dropdowns built directly into the header. The standard full-view month and year selector screens have also been completely redesigned.

• 💅 Zero-Runtime Styling — Migrated from goober to CSS Modules, completely eliminating CSS-in-JS runtime overhead for better performance and predictable scoping.

• ⚡ Next-Gen Build Engine — Switched from tsup to tsdown for superior minification. While the massive influx of new features resulted in a slightly larger footprint, the new bundler keeps the calendar incredibly lean and highly optimized.

  Full Version History in CONTRIBUTING.md

🗺️ Roadmap

• [ ] Date Range — Support for date range selection.
• [ ] Custom Presets — Ability to pass custom quick-select buttons.
• [ ] Custom Themes — API for creating and applying fully custom color schemes.
• [ ] Disabled Dates Array — Specific date blocking by passing an array.
• [ ] RTL Support — Full support for right-to-left interfaces.
• [ ] Compact Time Selector — A new minimalist widget for time selection.