📅 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

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 | {} | Override CSS class names for root, header, grid, cells, etc. | | styles | Partial | {} | 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