Nepali Calendar React

A comprehensive Nepali calendar component for React applications.

Features

• Accurate Nepali date calculations based on official data
• Supports both Bikram Sambat and Gregorian dates
• Fully customizable styling
• Accessibility support
• Localized Nepali number display

Installation

npm install @adhikarisaroj795/nepali-calendar-react
# or
yarn add @adhikarisaroj795/nepali-calendar-react

Usage

Here is a basic example of how to use the calendar component in your React application.

import React, { useState } from "react";
import NepaliCalendar from "@adhikarisaroj795/nepali-calendar-react";

const App = () => {
  const [dateObject, setDateObject] = useState(null);

  const handleChange = (newDateObject) => {
    setDateObject(newDateObject);
    console.log("Selected date:", newDateObject);
  };

  return (
    <div>
      <h2>Select a Date</h2>
      <NepaliCalendar color="green" language="nepali" onChange={handleChange} />
      {dateObject && (
        <div>
          <p>Bikram Sambat: {dateObject.bs}</p>
          <p>Gregorian Date: {dateObject.ad}</p>
          <p>
            BS Object: Year {dateObject.bsDate.year}, Month{" "}
            {dateObject.bsDate.month + 1}, Day {dateObject.bsDate.day}
          </p>
          <p>AD Date Object: {dateObject.adDate.toDateString()}</p>
        </div>
      )}
    </div>
  );
};

export default App;

Date Object Structure

The onChange callback receives a comprehensive date object with the following structure:

{
  bs: "2082-04-20",                    // Bikram Sambat date string (YYYY-MM-DD)
  ad: "2025-08-05",                    // Gregorian date string (YYYY-MM-DD)
  bsDate: {                            // Bikram Sambat date object
    year: 2082,
    month: 3,                          // 0-indexed (3 = 4th month)
    day: 20
  },
  adDate: Date                         // JavaScript Date object for Gregorian date
}

Note: The month in bsDate is 0-indexed (0 = first month, 11 = twelfth month), similar to JavaScript Date objects.

API Reference

Props

| Prop | Type | Default | Description | | ---------- | ---------- | ----------- | -------------------------------------------- | | color | string | - | Color theme for the calendar | | language | string | "english" | Display language ("english" or "nepali") | | onChange | function | - | Callback function when date is selected |

Utility Functions

The package also exports useful utility functions for date conversion and number formatting:

import {
  convertADtoBS,
  convertBStoAD,
  toNepaliNumber,
} from "@adhikarisaroj795/nepali-calendar-react";

// Convert English date to Bikram Sambat
const englishDate = "2025-08-05";
const nepaliDate = convertADtoBS(englishDate);
console.log(nepaliDate); // Output: "2082-04-20"

// Convert Bikram Sambat to English date
const bsDate = "2082-04-20";
const adDate = convertBStoAD(bsDate);
console.log(adDate); // Output: "2025-08-05"

// Convert numbers to Nepali numerals
const englishNumber = 12345;
const nepaliNumber = toNepaliNumber(englishNumber);
console.log(nepaliNumber); // Output: "१२३४५"

License

MIT © adhikarisaroj795

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Support

If you encounter any issues or have questions, please open an issue on GitHub.