Nepali Date Calendar

A modern and lightweight NPM package for rendering and converting between Gregorian (AD) and Bikram Sambat (BS) calendars, with full support for Nepali and English localization.

Features

• 🔄 Date Conversion: Convert between Gregorian (AD) and Bikram Sambat (BS) calendars
• 📅 Calendar Rendering: Generate calendar grids for any month
• 🌐 Localization: Full support for Nepali and English languages
• 📦 Lightweight: Zero dependencies, TypeScript support
• 🎯 Type Safe: Built with TypeScript for better development experience

Installation

npm install nepali-date-calendar

Quick Start

import { adToBs, bsToAd, getMonthCalendar, getLocalizedMonthName } from 'nepali-date-calendar';

// Convert AD to BS
const bsDate = adToBs({ year: 2024, month: 1, day: 15 });
console.log(bsDate); // { year: 2080, month: 10, day: 2 }

// Convert BS to AD
const adDate = bsToAd({ year: 2080, month: 10, day: 2 });
console.log(adDate); // { year: 2024, month: 1, day: 15 }

// Get localized month name
const monthName = getLocalizedMonthName(1, 'np'); // 'बैशाख'
const monthNameEn = getLocalizedMonthName(1, 'en'); // 'Baishakh'

API Reference

Date Conversion

adToBs(adDate: AdDate): BsDate

Converts a Gregorian (AD) date to Bikram Sambat (BS) date.

interface AdDate {
  year: number;
  month: number;
  day: number;
}

interface BsDate {
  year: number;
  month: number;
  day: number;
}

Example:

const bsDate = adToBs({ year: 2024, month: 1, day: 15 });
// Returns: { year: 2080, month: 10, day: 2 }

bsToAd(bsDate: BsDate): AdDate

Converts a Bikram Sambat (BS) date to Gregorian (AD) date.

Example:

const adDate = bsToAd({ year: 2080, month: 10, day: 2 });
// Returns: { year: 2024, month: 1, day: 15 }

Calendar Rendering

getMonthCalendar(date: AdDate | BsDate, type: 'AD' | 'BS'): CalendarCell[][]

Generates a calendar grid for the specified month.

type CalendarCell = {
  date: AdDate | BsDate;
  isCurrentMonth: boolean;
  isToday: boolean;
  events?: string[];
};

Example:

const calendar = getMonthCalendar({ year: 2080, month: 10, day: 1 }, 'BS');
// Returns a 2D array representing the calendar grid

getNextMonth(date: AdDate | BsDate, type: 'AD' | 'BS'): AdDate | BsDate

Gets the next month date.

Example:

const nextMonth = getNextMonth({ year: 2080, month: 10, day: 1 }, 'BS');
// Returns: { year: 2080, month: 11, day: 1 }

getPrevMonth(date: AdDate | BsDate, type: 'AD' | 'BS'): AdDate | BsDate

Gets the previous month date.

Example:

const prevMonth = getPrevMonth({ year: 2080, month: 10, day: 1 }, 'BS');
// Returns: { year: 2080, month: 9, day: 1 }

Localization

getLocalizedMonthName(month: number, lang: 'en' | 'np'): string

Gets the localized month name.

Example:

getLocalizedMonthName(1, 'np'); // 'बैशाख'
getLocalizedMonthName(1, 'en'); // 'Baishakh'

getLocalizedWeekdayName(weekday: number, lang: 'en' | 'np'): string

Gets the localized weekday name.

Example:

getLocalizedWeekdayName(0, 'np'); // 'आइतबार'
getLocalizedWeekdayName(0, 'en'); // 'Sunday'

Usage Examples

Basic Calendar Component

import React, { useState } from 'react';
import { 
  getMonthCalendar, 
  getLocalizedMonthName, 
  getLocalizedWeekdayName,
  getNextMonth,
  getPrevMonth 
} from 'nepali-date-calendar';

function NepaliCalendar() {
  const [currentDate, setCurrentDate] = useState({ year: 2080, month: 10, day: 1 });
  const calendar = getMonthCalendar(currentDate, 'BS');

  const handleNextMonth = () => {
    setCurrentDate(getNextMonth(currentDate, 'BS') as BsDate);
  };

  const handlePrevMonth = () => {
    setCurrentDate(getPrevMonth(currentDate, 'BS') as BsDate);
  };

  return (
    <div className="calendar">
      <div className="calendar-header">
        <button onClick={handlePrevMonth}>←</button>
        <h2>{getLocalizedMonthName(currentDate.month, 'np')} {currentDate.year}</h2>
        <button onClick={handleNextMonth}>→</button>
      </div>
      
      <div className="calendar-grid">
        {['आइतबार', 'सोमबार', 'मंगलबार', 'बुधबार', 'बिहीबार', 'शुक्रबार', 'शनिबार'].map(day => (
          <div key={day} className="weekday">{day}</div>
        ))}
        
        {calendar.map((week, weekIndex) => 
          week.map((cell, dayIndex) => (
            <div 
              key={`${weekIndex}-${dayIndex}`} 
              className={`calendar-day ${cell.isToday ? 'today' : ''} ${!cell.isCurrentMonth ? 'other-month' : ''}`}
            >
              {cell.date.day}
            </div>
          ))
        )}
      </div>
    </div>
  );
}

Date Conversion Utility

import { adToBs, bsToAd } from 'nepali-date-calendar';

// Convert today's date to BS
const today = new Date();
const todayBs = adToBs({
  year: today.getFullYear(),
  month: today.getMonth() + 1,
  day: today.getDate()
});

console.log(`Today in BS: ${todayBs.year}/${todayBs.month}/${todayBs.day}`);

// Convert BS date to AD
const bsDate = { year: 2080, month: 10, day: 2 };
const adDate = bsToAd(bsDate);
console.log(`BS ${bsDate.year}/${bsDate.month}/${bsDate.day} = AD ${adDate.year}/${adDate.month}/${adDate.day}`);

Development

Building

npm run build

Testing

npm test

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Sahil Khatiwada

Keywords

nepali, calendar, bikram sambat, gregorian, date, localization, npm, typescript