react-nepalipatro/README.md

A reusable Nepali (Bikram Sambat) calendar React component.

# 📅 react-nepalipatro

A reusable and customizable Nepali (Bikram Sambat - BS) and English (AD) calendar component for React & Next.js applications. Supports event rendering, click handlers, and full styling flexibility.

---

## ✨ Features

- 📆 Switch between Bikram Sambat (BS) and AD (Gregorian) calendars.
- 🎉 Highlight days with events.
- 🖱️ Day click handlers for interactive apps.
- 🎨 Fully customizable styles via CSS Modules & props.
- 🚀 Lightweight and optimized performance.
- 🌐 Supports Devanagari fonts injection for BS rendering.

---

## 📦 Installation

```bash
npm install react-nepalipatro
```

```
import { NepaliCalendar } from "react-nepalipatro";

const MyComponent = () => {
  return (
    <NepaliCalendar
      calendarType="BS" // or "AD"
      events={[
        { id: 1, date: "2025-08-05", title: "Event Title" },
        { id: 2, date: "2025-08-06", title: "Another Event" },
      ]}
      onDayClick={({ bsDate, adDate, events }) => {
        console.log("Clicked date:", bsDate, adDate, events);
      }}
    />
  );
};

```

| Prop         | Type                                                               | Default   | Description                                                  |
| ------------ | ------------------------------------------------------------------ | --------- | ------------------------------------------------------------ |
| calendarType | "BS" \| "AD"                                                       | "BS"      | Calendar mode, either Bikram Sambat (BS) or AD (Gregorian).  |
| events       | { id: string \| number; date: string; title: string; }[]           | []        | Array of events with AD date format (YYYY-MM-DD).            |
| onDayClick   | (day: { bsDate: string; adDate: string; events: Event[] }) => void | undefined | Function called when a day is clicked.                       |
| renderDay    | (date: string) => React.ReactNode                                  | undefined | Custom renderer for day numbers (icons, badges, etc.).       |
| classNames   | Partial<CustomClassNames>                                          | {}        | Override CSS class names for root, header, grid, cells, etc. |
| styles       | Partial<CustomInlineStyles>                                        | {}        | Inline style overrides for root, header, grid, etc.          |

🎨 Customization
Uses CSS Modules (scoped styles).

Pass classNames prop to override default structure.

Pass inline styles via styles prop for dynamic theming.

```
<NepaliCalendar
  classNames={{ dayCell: "myCustomDayCell", root: "myRootWrapper" }}
  styles={{ root: { backgroundColor: "#f0f0f0" } }}
/>

```

📅 Event Dates Format
All event dates should be in AD (YYYY-MM-DD) format.

The calendar will auto-convert them to BS if the mode is "BS".

🖋 Example Events Data

```
[
  { id: 1, date: "2025-08-05", title: "New Year Celebration" },
  { id: 2, date: "2025-08-06", title: "Another Event" },
]

```

🏷 License
MIT License © 2025 jacksonrai