Nepali Calendar

A lightweight, customizable React component for displaying Nepali (Bikram Sambat) calendar with full navigation support.

Features

• 📅 Nepali Calendar Display - Shows dates in Bikram Sambat (BS)
• 🔄 Navigation - Month and year navigation with Previous/Next controls
• 🎯 Today Highlight - Current date is automatically highlighted
• 🌐 Bilingual - Toggle between Nepali (ने) and English (EN) display
• 🎨 Fully Customizable - Override any style via className props
• 📱 Responsive - Works on all screen sizes
• ⚡ Zero Dependencies - No external date libraries required
• 🔧 TypeScript Support - Full type definitions included

Installation

npm i @bibekghimire/nepali-calendar

or

yarn add @bibekghimire/nepali-calendar

Basic Usage

import { NepaliCalendar } from '@bibekghimire/nepali-calendar';

function App() {
  return <NepaliCalendar />;
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | className | string | '' | Container wrapper class | | headerClassName | string | '' | Header section styling | | titleClassName | string | '' | Month/year title class | | subtitleClassName | string | '' | Subtitle text class | | navButtonClassName | string | '' | Navigation button class | | todayButtonClassName | string | '' | "Today" button class | | weekdayClassName | string | '' | Weekday header class | | weekendWeekdayClassName | string | '' | Weekend weekday header class | | dayClassName | string | '' | Regular day cell class | | todayClassName | string | '' | Today's date cell class | | weekendDayClassName | string | '' | Weekend day cell class | | emptyDayClassName | string | '' | Empty cell class | | footerClassName | string | '' | Footer section class | | toggleButtonClassName | string | '' | Language toggle button class | | gridClassName | string | '' | Calendar grid container class | | showFooter | boolean | true | Show/hide footer | | showInfoCard | boolean | true | Show/hide info card | | infoCardClassName | string | '' | Info card class | | defaultLanguage | 'np' \| 'en' | 'np' | Default display language | | primaryColor | string | '#e94560' | Primary accent color | | onDateClick | function | - | Callback when date is clicked | | onMonthChange | function | - | Callback when month changes | | onYearChange | function | - | Callback when year changes |

Customization Examples

Custom Colors

<NepaliCalendar 
  primaryColor="#3b82f6"
  todayClassName="bg-blue-500 text-white"
/>

Custom Styling

<NepaliCalendar 
  className="max-w-lg mx-auto"
  headerClassName="bg-indigo-600 text-white p-4 rounded-t-lg"
  dayClassName="hover:bg-gray-100 rounded-md"
  todayClassName="bg-indigo-500 text-white rounded-full font-bold"
  weekendDayClassName="text-red-500"
/>

Event Handling

<NepaliCalendar 
  onDateClick={(date) => {
    console.log(`Clicked: ${date.year}/${date.month + 1}/${date.day}`);
    // { year: 2081, month: 7, day: 15 }
  }}
  onMonthChange={(data) => {
    console.log(`Month changed to: ${data.month + 1}/${data.year}`);
  }}
/>

Minimal UI

<NepaliCalendar 
  showFooter={false}
  showInfoCard={false}
/>

Utility Functions

The package also exports utility functions for date conversion:

import { 
  getTodayBS,
  adToBS,
  getDaysInMonth,
  toNepaliDigits,
  NEPALI_MONTHS,
  NEPALI_MONTHS_EN,
  WEEKDAYS_SHORT
} from '@bibekghimire/nepali-calendar';

// Get today's date in BS
const today = getTodayBS();
console.log(today); // { year: 2081, month: 7, day: 6 }

// Convert AD to BS
const bsDate = adToBS(new Date('2024-12-21'));
console.log(bsDate); // { year: 2081, month: 7, day: 6 }

// Get days in a month
const days = getDaysInMonth(2081, 7); // Mangsir 2081
console.log(days); // 29

// Convert to Nepali digits
const nepaliNum = toNepaliDigits(2081);
console.log(nepaliNum); // "२०८१"

Date Format

All date objects follow this structure:

interface BSDate {
  year: number;   // Bikram Sambat year (e.g., 2081)
  month: number;  // 0-indexed month (0 = Baisakh, 11 = Chaitra)
  day: number;    // Day of month (1-32)
}

Nepali Months Reference

| Index | Nepali | English | Approx. AD Months | |-------|--------|---------|-------------------| | 0 | बैशाख | Baisakh | Apr-May | | 1 | जेठ | Jestha | May-Jun | | 2 | असार | Ashadh | Jun-Jul | | 3 | साउन | Shrawan | Jul-Aug | | 4 | भदौ | Bhadra | Aug-Sep | | 5 | असोज | Ashwin | Sep-Oct | | 6 | कार्तिक | Kartik | Oct-Nov | | 7 | मंसिर | Mangsir | Nov-Dec | | 8 | पौष | Poush | Dec-Jan | | 9 | माघ | Magh | Jan-Feb | | 10 | फागुन | Falgun | Feb-Mar | | 11 | चैत | Chaitra | Mar-Apr |

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

License

MIT © 2025

Contributing

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