Nepali Calendar Components

Beautiful and customizable Nepali Calendar components for React applications with Bikram Sambat (BS) and Gregorian (AD) date support.

Overview

This library provides two main components:

• NepaliCalendar: A full calendar widget for displaying monthly views
• NepaliDatePicker: A date picker component with input field and popup calendar

Both components display dates in both the Bikram Sambat (BS) and Gregorian (AD) calendar systems. They automatically detect and display the current month, support month/year navigation, and provide dual date display functionality. The components use an efficient caching system with IndexedDB to store calendar data locally for fast loading.

Features

• 🗓️ Dual Date Display: Shows both Nepali (BS) and English (AD) dates
• 🎨 Fully Customizable: Extensive props for styling every element
• 📱 Responsive Design: Works perfectly on all device sizes
• 🌟 Interactive: Click events and date selection support
• 🔄 Month Navigation: Easy month/year navigation with smooth transitions
• 🎯 TypeScript Support: Full TypeScript support with type definitions
• 🚀 Lightweight: Minimal dependencies and optimized bundle size
• 🔀 Calendar Toggle: Switch between Nepali (BS) and Gregorian (AD) calendars
• 🎉 Event Support: Display custom events and national holidays on calendar dates
• 🇳🇵 National Holidays: Automatic detection and display of national holidays from API data
• 📅 Value Prop Support: Control selected date via value prop (BS or AD format)
• ⌨️ Input Validation: Auto-formatting and validation for date input in NepaliDatePicker
• 💾 Caching: IndexedDB caching for fast calendar data loading
• 🔍 Smart Navigation: Accurate month display in AD mode with proper date conversion

Installation

npm install nepali-calander

Usage

Value Prop Format

Both components support a value prop to control the selected date:

• NepaliDatePicker: Value is always in AD format (e.g., "2024-10-10"), regardless of calendarMode
  • When calendarMode="bs": The input displays the BS date (converted from AD value)
  • When calendarMode="ad": The input displays the AD date directly
• NepaliCalendar: Value is always in AD format (e.g., "2024-10-10"), regardless of calendarMode
  • When calendarMode="bs": The calendar navigates to and displays the BS month containing the AD date
  • When calendarMode="ad": The calendar navigates to and displays the AD month directly

The components automatically:

• Parse the value (always AD format) and convert to BS format internally
• Navigate to the correct month based on calendarMode
• Fetch the required calendar data
• Display the date as selected
• When toggling between BS and AD modes, navigate to the month containing the selected date in the new mode

Example:

// Both components - always AD format
<NepaliDatePicker calendarMode="bs" value="2024-10-10" /> // AD format, displays BS in input
<NepaliDatePicker calendarMode="ad" value="2024-10-10" /> // AD format, displays AD in input

<NepaliCalendar calendarMode="bs" value="2024-10-10" /> // AD format, shows BS month containing this date
<NepaliCalendar calendarMode="ad" value="2024-10-10" /> // AD format, shows AD month directly

Direct BS Month Specification (bsYear and bsMonth Props)

NepaliCalendar supports bsYear and bsMonth props for directly specifying BS months without relying on AD to BS conversion. This is particularly useful when you need to display specific BS months that may span AD month boundaries.

Priority Order:

1. bsYear/bsMonth props (highest priority - used directly, no conversion)
2. value prop (converted from AD to BS)
3. year/month props (converted from AD to BS)

When to use bsYear/bsMonth:

• When you need to display a specific BS month directly (e.g., पुष month)
• When AD to BS conversion might be inaccurate for months spanning AD boundaries
• When you have BS year/month values and want to avoid conversion overhead

Example:

// Direct BS month specification (takes precedence over year/month props)
<NepaliCalendar
  bsYear={2082}
  bsMonth={9}  // पुष month
  calendarMode="bs"
/>

// Traditional way - AD year/month (converted to BS)
<NepaliCalendar
  year={2025}
  month={12}
  calendarMode="bs"
/>

// With value prop (converted from AD to BS)
<NepaliCalendar
  value="2025-12-15"
  calendarMode="bs"
/>

Note: bsYear and bsMonth props are only available for NepaliCalendar component. NepaliDatePicker uses AD year/month props or value prop for navigation.

NepaliCalendar Component

Basic Usage

import { NepaliCalendar } from "nepali-calander";
import "nepali-calander/dist/styles.css"; // Import the CSS

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

With Toggle Between Calendars

import { NepaliCalendar } from "nepali-calander";
import "nepali-calander/dist/styles.css";

function App() {
  return (
    <div>
      <NepaliCalendar
        showToggle={true}
        calendarMode="bs" // or "ad"
      />
    </div>
  );
}

NepaliDatePicker Component

Basic Usage

import { NepaliDatePicker } from "nepali-calander";
import "nepali-calander/dist/styles.css";

function App() {
  return (
    <div>
      <NepaliDatePicker />
    </div>
  );
}

Input Type DatePicker

import { NepaliDatePicker } from "nepali-calander";
import "nepali-calander/dist/styles.css";

function App() {
  const [selectedDate, setSelectedDate] = useState("");

  const handleDateSelect = (date) => {
    console.log("Selected date:", date);
    // date.ad.date is in AD format "YYYY-MM-DD"
    // date.bs.date is in BS format "YYYY-MM-DD"
    setSelectedDate(date.ad.date);
  };

  return (
    <div>
      <NepaliDatePicker
        type="input"
        placeholder="Choose a date"
        showToggle={true}
        calendarMode="bs"
        value={selectedDate} // Controlled component
        onDateSelect={handleDateSelect}
      />
    </div>
  );
}

DatePicker with Value Prop (Always AD Format)

import { NepaliDatePicker } from "nepali-calander";
import "nepali-calander/dist/styles.css";

function App() {
  return (
    <div>
      {/* Value is always in AD format, regardless of calendarMode */}
      <NepaliDatePicker
        type="input"
        calendarMode="bs"
        value="2024-10-10" // AD format - input will show BS date (converted)
        showToggle={true}
      />

      <NepaliDatePicker
        type="input"
        calendarMode="ad"
        value="2024-10-10" // AD format - input will show AD date
        showToggle={true}
      />
    </div>
  );
}

Icon Type DatePicker

import { NepaliDatePicker } from "nepali-calander";
import "nepali-calander/dist/styles.css";

function App() {
  return (
    <div>
      <NepaliDatePicker type="icon" showToggle={true} calendarMode="ad" />
    </div>
  );
}

DatePicker with Date Range Restrictions

import { NepaliDatePicker } from "nepali-calander";
import "nepali-calander/dist/styles.css";
import { useState } from "react";

function App() {
  const [dateValue, setDateValue] = useState("2025-06-15");

  return (
    <div>
      <NepaliDatePicker
        type="input"
        value={dateValue}
        minDate="2025-01-01" // Minimum selectable date (AD format)
        maxDate="2025-12-31" // Maximum selectable date (AD format)
        disabled={false} // Enable/disable input field
        showArrows={true} // Show/hide navigation arrows
        calendarMode="bs"
        onDateSelect={(date) => {
          setDateValue(date.ad.date);
        }}
      />
    </div>
  );
}

DatePicker with Year Range Control

import { NepaliDatePicker } from "nepali-calander";
import "nepali-calander/dist/styles.css";

function App() {
  return (
    <div>
      {/* For birthday selection: Only show years up to current year */}
      <NepaliDatePicker
        type="input"
        calendarMode="bs"
        tillCurrentYear={true} // Year dropdown: 2033 to current BS year
        placeholder="Select birth date"
      />

      {/* For planning: Show all available years (default) */}
      <NepaliDatePicker
        type="input"
        calendarMode="ad"
        tillCurrentYear={false} // Year dropdown: 1943 to 2033 (default)
        placeholder="Select planning date"
      />
    </div>
  );
}

Advanced Usage Examples

NepaliCalendar with Events and National Holidays

import { NepaliCalendar, CalendarEvent, CalendarDay } from "nepali-calander";
import "nepali-calander/dist/styles.css";

function App() {
  const handleDateSelect = (date: CalendarDay) => {
    console.log("Selected date:", date);
  };

  const handleEventClick = (event: CalendarEvent) => {
    console.log("Event clicked:", event);
  };

  const handleNationalHolidayToggle = (show: boolean) => {
    console.log("National holidays:", show ? "shown" : "hidden");
  };

  const events: CalendarEvent[] = [
    {
      id: "1",
      title: "Vacation",
      description: "Family vacation",
      start: "2025-10-23",
      end: "2025-10-25",
      color: "#3b82f6",
    },
    {
      id: "2",
      title: "Meeting",
      start: "2025-10-28",
      end: "2025-10-28",
      color: "#10b981",
    },
  ];

  return (
    <NepaliCalendar
      showToggle={true}
      calendarMode="bs"
      events={events}
      showNationalHoliday={true}
      showNationalHolidayToggle={true}
      onDateSelect={handleDateSelect}
      onEventClick={handleEventClick}
      onNationalHolidayToggleChange={handleNationalHolidayToggle}
    />
  );
}

NepaliCalendar with Value Prop (Always AD Format)

import { NepaliCalendar } from "nepali-calander";
import "nepali-calander/dist/styles.css";

function App() {
  return (
    <>
      {/* Value is always in AD format, regardless of calendarMode */}
      <NepaliCalendar
        showToggle={true}
        calendarMode="bs"
        value="2024-10-10" // AD format - calendar shows BS month containing this date
        showNationalHoliday={true}
      />

      <NepaliCalendar
        showToggle={true}
        calendarMode="ad"
        value="2024-10-10" // AD format - calendar shows AD month directly
        showNationalHoliday={true}
      />
    </>
  );
}

NepaliCalendar with Controlled Value

import { NepaliCalendar, CalendarDay } from "nepali-calander";
import "nepali-calander/dist/styles.css";
import { useState } from "react";

function App() {
  const [selectedDate, setSelectedDate] = useState("2024-10-10");

  const handleDateSelect = (date: CalendarDay) => {
    // Update with AD format date
    setSelectedDate(date.ad.date);
  };

  return (
    <NepaliCalendar
      showToggle={true}
      calendarMode="ad"
      value={selectedDate}
      onDateSelect={handleDateSelect}
    />
  );
}

NepaliCalendar with Direct BS Month Specification

import { NepaliCalendar } from "nepali-calander";
import "nepali-calander/dist/styles.css";

function App() {
  return (
    <>
      {/* Direct BS month specification - most accurate for specific BS months */}
      <NepaliCalendar
        bsYear={2082}
        bsMonth={9}  // पुष month
        calendarMode="bs"
        showToggle={true}
      />

      {/* Traditional way - AD year/month (converted to BS) */}
      <NepaliCalendar
        year={2025}
        month={12}
        calendarMode="bs"
        showToggle={true}
      />
    </>
  );
}

NepaliCalendar with Full Customization

import { NepaliCalendar, CalendarDay } from "nepali-calander";
import "nepali-calander/dist/styles.css";

function App() {
  const handleDateSelect = (date: CalendarDay) => {
    console.log("Selected date:", date);
  };

  const handleMonthChange = (year: number, month: number) => {
    console.log("Month changed:", year, month);
  };

  return (
    <NepaliCalendar
      bsYear={2082}
      bsMonth={1}
      showToggle={true}
      calendarMode="bs"
      onDateSelect={handleDateSelect}
      onMonthChange={handleMonthChange}
      className="my-calendar"
      calendarWrapperClassName="custom-wrapper"
      headerClassName="custom-header"
      titleClassName="custom-title"
      navButtonClassName="custom-nav-button"
      weekdaysClassName="custom-weekdays"
      weekdayClassName="custom-weekday"
      calendarDaysClassName="custom-calendar-days"
      calendarDayClassName="custom-calendar-day"
      bsDateClassName="custom-bs-date"
      adDateClassName="custom-ad-date"
      toggleWrapperClassName="custom-toggle-wrapper"
      toggleButtonClassName="custom-toggle-button"
      prevArrow="◀"
      nextArrow="▶"
      weekdayLabels={["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]}
      styles={{
        calendarWrapper: {
          maxWidth: "500px",
          backgroundColor: "#f8f9fa",
        },
        header: {
          backgroundColor: "#e9ecef",
        },
        title: {
          fontSize: "1.5rem",
        },
        navButton: {
          fontSize: "1.2rem",
        },
        weekday: {
          fontWeight: 600,
        },
        saturday: {
          color: "#dc3545",
          backgroundColor: "#fff5f5",
        },
      }}
    />
  );
}

NepaliDatePicker with Full Customization

import { NepaliDatePicker, CalendarDay } from "nepali-calander";
import "nepali-calander/dist/styles.css";

function App() {
  const handleDateSelect = (date: CalendarDay) => {
    console.log("Selected date:", date);
  };

  return (
    <NepaliDatePicker
      type="input"
      year={2081}
      month={1}
      showToggle={true}
      calendarMode="bs"
      onDateSelect={handleDateSelect}
      className="my-datepicker"
      calendarWrapperClassName="custom-wrapper"
      headerClassName="custom-header"
      titleClassName="custom-title"
      navButtonClassName="custom-nav-button"
      weekdaysClassName="custom-weekdays"
      weekdayClassName="custom-weekday"
      calendarDaysClassName="custom-calendar-days"
      calendarDayClassName="custom-calendar-day"
      bsDateClassName="custom-bs-date"
      adDateClassName="custom-ad-date"
      toggleWrapperClassName="custom-toggle-wrapper"
      toggleButtonClassName="custom-toggle-button"
      prevArrow="◀"
      nextArrow="▶"
      weekdayLabels={["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]}
      styles={{
        datepickerInput: {
          border: "2px solid #007bff",
          borderRadius: "8px",
        },
        calendarWrapper: {
          maxWidth: "400px",
          backgroundColor: "#f8f9fa",
        },
        header: {
          backgroundColor: "#e9ecef",
        },
        title: {
          fontSize: "1.2rem",
        },
        navButton: {
          fontSize: "1.1rem",
        },
        weekday: {
          fontWeight: 600,
        },
        saturday: {
          color: "#dc3545",
          backgroundColor: "#fff5f5",
        },
      }}
    />
  );
}

Props

Shared Props (Both Components)

| Prop | Type | Default | Description | | --------------------------- | -------------------- | ---------------- | ---------------------------------------------------------------------------------- | | year | number | Current BS year | Initial AD year to display (converted to BS internally). Note: For NepaliCalendar, use bsYear/bsMonth for direct BS specification | | month | number | Current BS month | Initial AD month to display (1-12, converted to BS internally). Note: For NepaliCalendar, use bsYear/bsMonth for direct BS specification | | showToggle | boolean | false | Show toggle to switch between BS and AD calendars | | calendarMode | "bs" \| "ad" | "bs" | Default calendar mode (determines which dates to show) | | holidayWeekdays | string \| string[] | "Saturday" | Days to mark as holidays (e.g., "Saturday", "Sunday", ["Saturday","Sunday"]) | | events | CalendarEvent[] | [] | Array of events to display on the calendar | | showNationalHoliday | boolean | true | Show national holidays from API data (day.events) | | showNationalHolidayToggle | boolean | false | Show toggle button to control national holiday visibility | | tillCurrentYear | boolean | false | If true, year dropdown shows only up to current year (for birthday selection). Default shows full range (2033-2089 for BS, 1943-2033 for AD) for planning |

NepaliDatePicker Specific Props

| Prop | Type | Default | Description | | ------------- | ------------------- | --------------- | --------------------------------------------------------------------------------------------- | | type | "icon" \| "input" | "input" | Display type: icon button or input field | | placeholder | string | "Select date" | Placeholder text for input type datepicker | | value | string | - | Date in format "YYYY-MM-DD" (always AD format, regardless of calendarMode) | | minDate | string | - | Minimum selectable date in AD format (e.g., "2024-01-01"). Dates before this will be disabled | | maxDate | string | - | Maximum selectable date in AD format (e.g., "2024-12-31"). Dates after this will be disabled | | disabled | boolean | false | Disable the input field (native input disabled prop) | | showArrows | boolean | true | Show/hide navigation arrows (prev/next month buttons) |

NepaliCalendar Specific Props

| Prop | Type | Default | Description | | ------------------------- | --------------------- | ----------- | ----------------------------------------------------------------------------------------------------- | | bsYear | number | - | Direct BS year specification (takes precedence over year/month props). Use this for accurate BS month display without AD conversion | | bsMonth | number | - | Direct BS month specification (1-12, takes precedence over year/month props). Use this for accurate BS month display without AD conversion | | value | string | - | Date in format "YYYY-MM-DD" (always AD format, regardless of calendarMode) | | events | CalendarEvent[] | [] | Array of custom events to display on calendar | | eventVisibility | "default" \| "line" | "default" | How to display events: "default" shows full bars, "line" shows thin lines | | type | "default" \| "full" | "full" | Display type: "default" shows minimal view, "full" shows event bars | | isClickable | boolean | true | Whether dates are clickable | | showAllNationalHolidays | boolean | false | If true, shows all events from API (including non-national holidays) when showNationalHoliday is true | | showArrows | boolean | true | Show/hide navigation arrows (prev/next month buttons) |

Display Props

| Prop | Type | Default | Description | | -------- | --------- | ------- | -------------------- | | showAD | boolean | true | Show Gregorian dates | | showBS | boolean | true | Show Nepali dates |

Styling Props (ClassName)

| Prop | Type | Default | Description | | -------------------------- | -------- | ------- | ---------------------------------- | | className | string | "" | Additional CSS class for container | | calendarWrapperClassName | string | "" | CSS class for calendar wrapper | | headerClassName | string | "" | CSS class for header | | titleClassName | string | "" | CSS class for title | | navButtonClassName | string | "" | CSS class for navigation buttons | | weekdaysClassName | string | "" | CSS class for weekdays container | | weekdayClassName | string | "" | CSS class for individual weekday | | calendarDaysClassName | string | "" | CSS class for calendar days grid | | calendarDayClassName | string | "" | CSS class for individual day | | bsDateClassName | string | "" | CSS class for BS date | | adDateClassName | string | "" | CSS class for AD date | | toggleWrapperClassName | string | "" | CSS class for toggle wrapper | | toggleButtonClassName | string | "" | CSS class for toggle buttons |

Styles Props (Inline Styles)

styles?: {
  calendarWrapper?: React.CSSProperties;
  header?: React.CSSProperties;
  title?: React.CSSProperties;
  navButton?: React.CSSProperties;
  navButtonDisabled?: React.CSSProperties;
  weekdays?: React.CSSProperties;
  weekday?: React.CSSProperties;
  weekdaySaturday?: React.CSSProperties;
  calendarDays?: React.CSSProperties;
  calendarDay?: React.CSSProperties;
  calendarDayHover?: React.CSSProperties;
  saturday?: React.CSSProperties;
  bsDate?: React.CSSProperties;
  adDate?: React.CSSProperties;
  toggleWrapper?: React.CSSProperties;
  toggleButton?: React.CSSProperties;
  toggleButtonActive?: React.CSSProperties;
  loadingSpinner?: React.CSSProperties;
  loadingText?: React.CSSProperties;
}

Customization Props

| Prop | Type | Default | Description | | --------------- | --------------------- | ------- | -------------------------- | | prevArrow | string \| ReactNode | "←" | Custom previous arrow icon | | nextArrow | string \| ReactNode | "→" | Custom next arrow icon | | weekdayLabels | string[] | - | Custom weekday labels |

Callback Props

| Prop | Type | Description | | ------------------------------- | --------------------------------------- | --------------------------------------------------------------------------------------------- | | onDateSelect | (date: CalendarDay) => void | Called when a date is clicked. Receives the selected day with both BS and AD date information | | onMonthChange | (year: number, month: number) => void | Called when month/year changes. Returns year and month in the current calendar mode context | | onCalendarModeChange | (mode: "bs" \| "ad") => void | Called when calendar mode is toggled between BS and AD | | onEventClick | (event: CalendarEvent) => void | Called when an event bar is clicked. Receives the clicked event | | onNationalHolidayToggleChange | (show: boolean) => void | Called when national holiday toggle is changed. Receives the new visibility state |

Year Range

The year dropdown in both components shows a specific range of years:

• BS Mode: Years from 2033 to 2089 (or up to current BS year if tillCurrentYear={true})
• AD Mode: Years from 1943 to 2033 (or up to current year if tillCurrentYear={true})

Controlling Year Range

Use the tillCurrentYear prop to control whether future years are shown:

• Default (tillCurrentYear={false}): Shows the full range including future years (2033-2089 for BS, 1943-2033 for AD) - useful for planning
• With tillCurrentYear={true}: Shows only up to the current year - useful for birthday selection or past date selection

Example:

// Birthday selection - only past/current years
<NepaliDatePicker tillCurrentYear={true} calendarMode="bs" />

// Planning - includes future years
<NepaliCalendar tillCurrentYear={false} calendarMode="ad" />

API Reference

Date Conversion Functions

The library provides date conversion utilities for converting between Gregorian (AD) and Bikram Sambat (BS) calendars:

adToBS(adYear, adMonth, adDay)

Converts a Gregorian date to Bikram Sambat date.

const bsDate = adToBS(2024, 12, 15);
// Returns: { bs_y: 2081, bs_m: 9, bs_d: 30 }

bsToAD(bsYear, bsMonth, bsDay)

Converts a Bikram Sambat date to Gregorian date.

const adDate = bsToAD(2081, 10, 15);
// Returns: { ad_y: 2024, ad_m: 1, ad_d: 29 }

getCurrentBSDate()

Gets the current date in Bikram Sambat calendar.

const currentBS = getCurrentBSDate();
// Returns: { bs_y: 2081, bs_m: 9, bs_d: 5 }

bsYearToAD(bsYear) / adYearToBS(adYear)

Simple year conversion utilities.

const adYear = bsYearToAD(2081); // Returns: 2024
const bsYear = adYearToBS(2024); // Returns: 2081

getDaysInBSMonth(month, year?)

Returns the approximate number of days in a BS month (actual range is 29-32 days).

const days = getDaysInBSMonth(9, 2081); // Returns: 30

Note: The conversion functions use lookup tables for accurate date conversion. The conversion algorithm:

• Uses a comprehensive lookup table for BS years 1978-2099
• Calculates day differences from a base date (April 13, 1921 AD = Baishakh 1, 1978 BS)
• Handles variable month lengths (29-32 days per month) in the Bikram Sambat calendar
• For exact dates, the component also uses API data from a calendar service

Types

interface CalendarEvent {
  id: string;
  title: string;
  description?: string;
  start: string; // YYYY-MM-DD format (AD)
  end: string; // YYYY-MM-DD format (AD)
  color?: string;
  isHoliday?: boolean;
}

interface CalendarDay {
  bs: {
    date: string; // Format: "YYYY-MM-DD"
    date_np: string; // Nepali unicode number
    bs_y: number; // BS year
    bs_m: number; // BS month (1-12)
    bs_d: number; // BS day
  };
  ad: {
    date: string; // Format: "YYYY-MM-DD"
    date_np: string; // Nepali unicode number
    ad_y: number; // AD year
    ad_m: number; // AD month (1-12)
    ad_d: number; // AD day
  };
  today: boolean; // True if this is today's date
  holiday: string | null;
  tithi: string | null;
  events?: Array<{
    id: number;
    title: string;
    title_en: string;
    national_holiday: number;
    description: string | null;
    created_at: string;
    updated_at: string;
    pivot: {
      date_converter_id: number;
      event_id: number;
    };
  }>;
}

interface BSDay {
  bs_y: number; // BS year
  bs_m: number; // BS month (1-12)
  bs_d: number; // BS day
}

interface ADDay {
  ad_y: number; // AD year
  ad_m: number; // AD month (1-12)
  ad_d: number; // AD day
}

interface CalendarData {
  days: CalendarDay[];
  otherData: {
    total_days: number;
    starting_weekday: {
      name: string;
      number: string;
    };
    ending_weekday: {
      name: string;
      number: string;
    };
    next_month: number;
    next_year: number;
    prev_month: number;
    prev_year: number;
  };
}

Utilities

import {
  calendarDB,
  fetchCalendarData,
  adToBS,
  bsToAD,
  getCurrentBSDate,
  bsYearToAD,
  adYearToBS,
  getDaysInBSMonth,
} from "nepali-calander";

// Initialize and use IndexedDB
await calendarDB.init();
const data = await calendarDB.get(year, month);
await calendarDB.set(year, month, data);

// Fetch directly from API
const data = await fetchCalendarData(year, month);

// Date conversion utilities
const bsDate = adToBS(2024, 12, 15); // Convert AD to BS
const adDate = bsToAD(2081, 10, 1); // Convert BS to AD
const currentBS = getCurrentBSDate(); // Get current BS date
const adYear = bsYearToAD(2081); // Convert BS year to AD year
const bsYear = adYearToBS(2024); // Convert AD year to BS year
const daysInMonth = getDaysInBSMonth(10, 2081); // Get days in BS month

Styling

Both components come with default styles but can be customized using component-specific CSS classes:

NepaliCalendar CSS Classes

/* Calendar-specific styles */
.nepali-calendar {
  border: 2px solid #007bff;
}

.nepali-calendar-day {
  background-color: #f8f9fa;
}

.nepali-calendar-day.saturday {
  background-color: #fff5f5;
  color: #dc3545;
}

.nepali-calendar-toggle-wrapper {
  margin-bottom: 1rem;
}

.nepali-calendar-toggle-switch {
  background-color: #007bff;
}

NepaliDatePicker CSS Classes

/* DatePicker-specific styles */
.nepali-datepicker-input {
  border: 2px solid #007bff;
  border-radius: 8px;
}

.nepali-datepicker-day {
  background-color: #f8f9fa;
}

.nepali-datepicker-day.saturday {
  background-color: #fff5f5;
  color: #dc3545;
}

.nepali-datepicker-toggle-wrapper {
  margin-bottom: 1rem;
}

.nepali-datepicker-toggle-switch {
  background-color: #007bff;
}

Shared CSS Classes

/* Shared styles for both components */
.bs-date {
  font-weight: 600;
}

.ad-date {
  font-size: 0.8rem;
}

.ad-corner {
  opacity: 0.7;
}

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

Shirish Pokhrel

• GitLab: @shirishpokhrel
• Email: [email protected]

Support

If you find this project helpful, please give it a ⭐ on GitLab!

For issues and feature requests, please use the GitLab Issues page.