react-customizable-calendar

A React calendar grid where each day cell is fully custom via a render prop. Includes month/year selectors, prev/next navigation, optional active-month filtering, and a visible-month callback.

Important

This package does not fetch data or render business-specific day content. You provide a component render prop that receives each day's metadata and returns your own JSX (icons, colors, click handlers, etc.).

The in-app CustomCalender in this repo may use localStorage for default dates; this npm package does not — pass custom_start or defaultStart explicitly.

Install

npm install react-customizable-calendar

Peer dependencies:

• react >= 17
• react-dom >= 17
• moment >= 2.29

Styles:

import 'react-customizable-calendar/style.css'

Quick start

import { useMemo } from 'react'
import CustomizableCalendar from 'react-customizable-calendar'
import 'react-customizable-calendar/style.css'

function App() {
  const activeMonths = useMemo(
    () => new Set(['2025-03', '2025-04']),
    [],
  )

  return (
    <CustomizableCalendar
      custom_start="2024-01-01"
      custom_end="2025-12-31"
      active_months={activeMonths}
      component={({ date }) => (
        <button type="button">{date.day_num}</button>
      )}
      onVisibleMonthChange={({ start, end }) => {
        console.log('visible range', start, end)
      }}
    />
  )
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | component | (props: { date }) => ReactNode | required | Renders each day cell. date has day_num, day_str, complete_date, active | | custom_start | string | — | Range start (YYYY-MM-DD). First day of that month | | custom_end | string | today | Range end (last day of month) | | defaultStart | string | — | Used when custom_start is omitted (no localStorage) | | active_months | Set<string> | — | If set, only months whose YYYY-MM key is in the set are navigable | | hint | ReactNode | — | Content below the grid | | onVisibleMonthChange | ({ start, end }) => void | — | Fired when visible month changes (YYYY-MM-DD bounds) | | weekdayLabels | string[] | Su…Sa | Seven weekday header labels | | monthFormat | string | 'MMM' | moment format for month <select> | | className | string | '' | Extra root class | | style | object | — | Inline styles on root | | dir | 'ltr' \| 'rtl' | 'ltr' | Root dir attribute |

date object (per day)

{
  day_num: string      // e.g. "15"
  day_str: string      // e.g. "Wed"
  complete_date: string // "YYYY-MM-DD"
  active: boolean      // true if day belongs to selected month
}

Utility exports

import { getYears, getDays } from 'react-customizable-calendar'

const years = getYears('2020-01-01', '2025-06-01', null)
const days = getDays('2025-03-01')

Styling

CSS variable on the root:

.customizable-calendar {
  --rcc-today-accent: #82e08c;
}

License

MIT