📅 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" },
]