Dawit-y/react-ethiopian-calendar

A typed React component library for Ethiopian (and Gregorian) calendar date and time selection: single-date and date-range pickers, Amharic/English support, and custom theming. # React Ethiopian Calendar A fully typed React component library for **Ethiopian** (and **Gregorian**) calendar date and time selection: single-date and date-range pickers, Amharic/English/Afaan Oromoo support, and custom theming. Written in TypeScript and shipped with ESM, CJS, and bundled type declarations. ## Features - **Single Date Picker** — select individual dates in the Ethiopian or Gregorian calendar. - **Date Range Picker** — select a start/end range with visual highlighting. - **Dual Calendar Support** — switch between Ethiopian (ET) and Gregorian (GC) calendars with a single boolean prop. - **Ethiopian Time Picker** — a 12-hour stepper that understands Ethiopian time (the day starts at 6 AM). - **Language Support** — Amharic (`"am"`), English (`"en"`), and Afaan Oromoo (`"or"`). - **Custom Primary Color** — theme the entire calendar via the `primaryColor` prop using a scoped CSS variable. - **Controlled Components** — full control over `value` and `onChange`. - **Form Integration** — works with form libraries such as Formik. - **First-class TypeScript** — strict types and exported interfaces for every public API. - **React 18 & 19** — supports React `>=18.2`, including React 19. ## Installation ```bash npm install react-ethiopian-calendar ``` The runtime dependencies (`dayjs`, `ethiopian-date`, `react-element-popper`, `react-icons`) are installed automatically and kept external/tree-shakeable. `react` and `react-dom` are peer dependencies. ### Import the stylesheet You must import the bundled stylesheet once in your app: ```js import 'react-ethiopian-calendar/style.css'; ``` > The stylesheet is also available at `'react-ethiopian-calendar/dist/index.css'`. Older docs referenced `'react-ethiopian-calendar/src/style/index.css'` — that path does **not** exist in the published package; use `'react-ethiopian-calendar/style.css'`. ## Quick Start ### Single Date Picker (Ethiopian) ```tsx import { useState } from 'react'; import { EtCalendar …